Removing <style> elements from compiled sprite.svg

[adamgilmour]

Hi, just wondering if there's an option to remove the <---- THIS ......... I've read through the documentation but can't find what I'm looking for. Apologies if I've missed it. Thanks

[jkphl]

@adamgilmour Thanks for asking. The short answer: No, there is no such option, at least not directly.

The long version: svg-sprite tries to stick to its most basic purpose which is to create sprites. There are plenty of libraries out there which are really good at parsing and manipulating SVG / XML, so svg-sprite doesn't try to replace them. Instead, you should pipe svg-sprite's output to a second, specialized process which strips out the <style> elements.

That being said, svg-sprite might offer you a cheap possibility to do so: You should be able to use a global post-processing transformation and apply a regex based replacement like this (off the top of my head, untested):

var config = {
    svg: {
        transform: [
            /**
             * Strip out all <style> elements
             *
             * @param {String} svg                  Sprite SVG
             * @return {String}                     Processed SVG
             */
            function(svg) {
                return svg.replace(~<style>.*?</style>~i, '');
            }
        ]
    }
}

Please let me know if this works for you.

[adamgilmour]

@jkphl Thanks for your reply :)

Many thanks for the function, unfortunately there was a syntax error in the regex code you supplied. I don't have any experience in regular expression but did a search and ended up using the following code which worked to remove all <style> elements from the compiled sprite:

return svg.replace(/(<style.*?<\/style>)/g, "")

Works great :)

[jkphl]

@adamgilmour Perfect, thanks for your feedback (and sorry for the typo — as I said, the regex was off the top of my head and untested). Happy spriting!

[adamgilmour]

Just to add to this.. I had to remove the svg fill:#xxxxxx styling which was also stopping me from overwriting with css. The final function looks like:

function(svg) {
    return svg.replace(/(<style.*?<\/style>)/g, "").replace(/(fill=\"#([0-9a-f]{6})\")/g, "");
}

[andrejilderda]

That's great @adamgilmour . I've changed the lines to the following so that it also replaces caps (#FF0000) and shorthand hex colors (#ff0):

function(svg) {
    return svg.replace(/(<style.*?<\/style>)/g, "").replace(/(fill=\"#([0-9a-fA-F]{6})\")/g, "").replace(/(fill=\"#([0-9a-fA-F]{3})\")/g, "");
}

[petrchutny]

I love you all in this thread @jkphl, @adamgilmour & @ajilderda :) Just used the last regex to my total happiness!

[cssfish]

thanks, use this for remove style="position:absolute"

svg: {
    rootAttributes : {
        "xmlns" : "http://www.w3.org/2000/svg",
        "style" : "display: none;" // not work
    },
    dimensionAttributes: false, // remove <svg>`s width and height attributes
    transform : [
        function(svg) {
            return svg.replace('style="position:absolute"', 'style="display: none;"'); // work! remove <svg>`s absolute style
        }
    ]
},