Derek Dysart

Derek Dysart


Periodic notes from an independent Sitecore Developer/Architect

October 2017
M T W T F S S
« Sep    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Categories


SVG paths getting merged in Sitecore

Derek DysartDerek 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.

Independent Sitecore developer. I also blog about other stuff from time to time.