search

svg-sprite / gulp-svg-sprite

SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours
MIT License
648 stars 43 forks source link

Is it possible to add 'style="display:none"' to svg? #3

Closed cortopy closed 9 years ago

cortopy commented 9 years ago

Currently, the output for the svg sprite in symbol mode does not provide any styling. When file is included in the HTML , a big blank space is rendered on top of the page by the browser.

This is normal behaviour with svg sprites when no styling is added. So could 'style="display:none"' be added to the svg tag of the file? Adding it manually fixes the issue, but it has to be done every time the sprite is generated

Not sure if it's an svg-sprite issue, so my apologies in advance if it is

jkphl commented 9 years ago

Hi @cortopy,

this is exactly what the mode.symbol.inline option is for. Please see the manual for further information. In fact, it doesn't add style="display:none" but width="0" height="0" style="position:absolute" (don't remember why I went for this, but there surely was a reason) and omits the XML & DOCTYPE declarations. So the sprite should be perfectly suited for inline embedding into a HTML document.

Cheers, Joschi

cortopy commented 9 years ago

Thanks!!

cssfish commented 2 years ago

@jkphl - how to remove style="position:absolute" ?

this not work:

svg: {
    rootAttributes : {
        "style" : ""
    },
    dimensionAttributes: false // remove <svg>`s width and height attributes
},

upd: solve here