question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SVGO not merging paths

See original GitHub issue

I 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:closed
  • Created 5 years ago
  • Comments:7 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
cascornelissencommented, Dec 4, 2018

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.

0reactions
cascornelissencommented, Dec 7, 2018

@ZebraFlesh, just wanted to let you know this fix has been released as part of version 3.0.1 🚀

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found