The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Gradients and hiding symbol defining SVG blocks in HTML

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #269639

    Well, last summer Chris Coyier himself promoted just dumping SVG icons into the HTML. While I can see the reason behind this, I plan to work on websites that heavily use and re-use SVG for illustration and what in graphic design is called “non-objective elements”. And since I obsess about keeping the size of my sites small, this wont’t do for me in many cases. Instead, I’m currently writing a plugin for Grav CMS that is supposed to facilitate creating, manipulating and referencing SVG symbols in Twig.

    However, I ran into issues. One of them is that the “natural” way of hiding a symbol defining svg block with style="display:none;" does not play well with gradients (and possibly other things, like patterns, which I haven’t tested yet).

    According to the SVG 2 spec, adding viewBox="0" should keep the SVG from rendering, but neither in Firefox nor Chrome this seems to have any effect. However, at least in current Firefox and Chrome, I can set width and height to “0” and the element collapses as desired. (Well, sort of, there seems to be gap caused by a text node containing only white space, but I think I can deal with that in the backend.)

    I can’t test this easily with many browsers. Would this be a good way to hide the symbol defining SVG? Or is it hackish and likely to break across browsers. Is there a better way?


    I think the second one is ok. Codepen is using width="0" height="0"to hide theirs.
    If you don’t want to use width="0" height="0" you can use style="position:absolute" for the first SVG.


    Thank you, that’s quite reassuring. I see that they also have display="none" which unfortunately has the same effect as style="display:none;". I hope it’s not really necessary when width and height are 0?

    If you don’t want to use width=”0″ height=”0″ you can use style=”position:absolute” for the first SVG.

    Didn’t think about that. I might do both for good measure.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.