SVGO not merging paths
See original GitHub issueI have a particular SVG that I know should be optimized by SVGO (because I can manually run it through SVGO and see a path deeply nested within transform groups get optimized into a single top level path). Here’s the plugin config I’m using:
new SVGSpritemapPlugin(
'./assets/svg/*.svg', {
output: {
filename: 'lib/svg/dlssprite-new.svg',
svgo: true
},
sprite: {
prefix: false
}
}
);
I’ve also tried various forms for svgo options such as:
svgo: {
plugins: [
{ removeTitle: true },
{ removeStyleElement: true }
]
}
and
svgo: {
plugins: [{
removeTitle: true,
removeStyleElement: true
}]
}
Input SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="LTL-R4---Advanced" stroke="none" fill-rule="evenodd">
<g id="P1-01A-Advanced---Item-Template-Copy" transform="translate(-635.000000, -1554.000000)">
<g id="step-3" transform="translate(45.000000, 1181.000000)">
<g id="additional-services" transform="translate(11.000000, 335.000000)">
<g id="blind-ship" transform="translate(540.000000, 38.000000)">
<g id="Group" transform="translate(39.000000, 0.000000)">
<g id="Group-3">
<path d="M20.6310006,3.66328621 C20.6469053,3.67730158 20.6624712,3.69190844 20.6776695,3.70710678 C20.7048296,3.73426688 20.7301008,3.7626006 20.753483,3.7919447 C22.7668686,5.93824539 24,8.82522294 24,12 C24,18.627 18.627,24 12,24 C8.82522294,24 5.93824539,22.7668686 3.7919447,20.753483 C3.7626006,20.7301008 3.73426688,20.7048296 3.70710678,20.6776695 C3.69190844,20.6624712 3.67730158,20.6469053 3.66328621,20.6310006 C1.40461436,18.4488601 0,15.3883409 0,12 C0,5.373 5.373,0 12,0 C15.3883409,0 18.4488601,1.40461436 20.6310006,3.66328621 Z M18.8888265,4.08173622 C17.0437196,2.4744434 14.6335794,1.5 12,1.5 C6.21,1.5 1.5,6.21 1.5,12 C1.5,14.6335794 2.4744434,17.0437196 4.08173622,18.8888265 L8.34667478,14.623888 C7.41722206,13.9424849 6.67856863,13.1536556 6.228,12.62 C5.924,12.26 5.924,11.74 6.228,11.38 C7.177,10.256 9.404,8 12,8 C12.8408985,8 13.6430797,8.23671013 14.3756153,8.59494744 L18.8888265,4.08173622 Z M20.2665307,5.53245918 L16.0869812,9.71200864 C16.8128969,10.304652 17.3934044,10.9317006 17.771,11.379 C18.076,11.74 18.076,12.26 17.771,12.621 C16.823,13.744 14.596,16 12,16 C11.3596479,16 10.7417478,15.8627326 10.1599426,15.6390472 L5.53245918,20.2665307 C7.31632701,21.6652271 9.56245706,22.5 12,22.5 C17.79,22.5 22.5,17.79 22.5,12 C22.5,9.56245706 21.6652271,7.31632701 20.2665307,5.53245918 Z M11.8080832,13.9909067 C11.8712478,13.9969229 11.9352664,14 12,14 C13.104,14 14,13.105 14,12 C14,11.9352594 13.9969243,11.8712396 13.9909114,11.8080785 L11.8080832,13.9909067 Z M10.1676827,12.8028801 L12.8028534,10.1677094 C12.5570772,10.0598518 12.2854934,10 12,10 C10.896,10 10,10.895 10,12 C10,12.2855972 10.0598537,12.5571661 10.1676827,12.8028801 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Expected output (generated by manually running svgo from the command line using default options):
<svg viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path d="M20.631 3.663a1.015 1.015 0 0 1 .122.129A11.958 11.958 0 0 1 24 12c0 6.627-5.373 12-12 12a11.958 11.958 0 0 1-8.208-3.247 1.01 1.01 0 0 1-.129-.122A11.965 11.965 0 0 1 0 12C0 5.373 5.373 0 12 0c3.388 0 6.449 1.405 8.631 3.663zm-1.742.419A10.456 10.456 0 0 0 12 1.5C6.21 1.5 1.5 6.21 1.5 12c0 2.634.974 5.044 2.582 6.889l4.265-4.265a12.657 12.657 0 0 1-2.119-2.004.957.957 0 0 1 0-1.24C7.177 10.256 9.404 8 12 8c.84 0 1.643.237 2.376.595l4.513-4.513zm1.378 1.45l-4.18 4.18c.726.593 1.306 1.22 1.684 1.667a.957.957 0 0 1 0 1.242C16.823 13.744 14.596 16 12 16c-.64 0-1.258-.137-1.84-.361l-4.628 4.628A10.449 10.449 0 0 0 12 22.5c5.79 0 10.5-4.71 10.5-10.5 0-2.438-.835-4.684-2.233-6.468zm-8.459 8.459a2 2 0 0 0 2.183-2.183l-2.183 2.183zm-1.64-1.188l2.635-2.635a2 2 0 0 0-2.635 2.635z" fill-rule="evenodd"/>
</svg>
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (5 by maintainers)
Top Results From Across the Web
svgo - npm
Plugin Description Default
removeDoctype remove doctype declaration enabled
removeXMLProcInst remove XML processing instructions enabled
removeComments remove comments enabled
Read more >Optimising SVG images - the Web developer blog
If you want to use the mergePaths plugin of svgo, you must combine overlapping paths yourself. Here's how to do it:.
Read more >How to combine two SVG paths together (without spaces)
Select the paths to merge · From the Path menu, choose Union · Save the file.
Read more >SVGOMG - SVGO's Missing GUI
Round/rewrite paths. Convert non-eccentric <ellipse> to <circle> Round/rewrite transforms. Remove empty attrs. Remove empty containers. Merge paths
Read more >Three Ways of Decreasing SVG File Size with SVGO - SitePoint
The big advantage of not being pixel-based is that SVGs look awesome ... by removing comments and merging multiple paths in the source...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Awesome! Until this gets released in the next version you can manually remove the
id
attributes. I’m hoping to include a fix for #55 in the upcoming release as well and I’d like to keep the issue open until the release is available.@ZebraFlesh, just wanted to let you know this fix has been released as part of version
3.0.1
🚀