The following is a presentation I gave at the Milwaukee SItecore Developer meetup. The presentation was sort of a back to basics...
SVG paths getting merged in SitecoreDerek Dysart
Ran into an issue with a client today that was pretty interesting, they were using an SVG image for the main logo, and it was being altered when it was rendered out on the delivery server. The SVG they uploaded had about 23 paths defined in it, and the one that was ending up on the site had only 12. There was a need to vary the color of some parts via CSS and the altered paths made that impossible.
We installed Kam Figy’s great image optimization library, Dianoga a while back and I knew it did some SVG optimization. Under the covers, it uses the Nodejs tool SVGO. Looking at the README for that library, there is an option call
mergePaths which could be disabled. By adding
--disable=mergePaths to the
<AdditionalToolArguments> configuration, we stopped it from messing up our paths.
<dianogaOptimizeSvg> <!-- Optimize the SVG with SVGO https://github.com/svg/svgo --> <processor type="Dianoga.Optimizers.Pipelines.DianogaSvg.SvgoOptimizer, Dianoga"> <ExePath>/App_Data/Dianoga Tools/SVGO/node.exe</ExePath> <!-- See https://github.com/svg/svgo#cli for arguments. removeUselessDefs and cleanupIDs are disabled because they eat SVG sprite-sheets --> <AdditionalToolArguments>--disable=removeUselessDefs --disable=cleanupIDs --disable=mergePaths</AdditionalToolArguments> </processor> </dianogaOptimizeSvg>
The question remains, what actually is it accomplishing at this point? Basically it’s removing extra whitespace and characters, but every little bit helps.