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).
https://codepen.io/Utis/pen/vRbrja
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.)
https://codepen.io/Utis/pen/KoJeBp
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?
