- This topic is empty.
April 10, 2018 at 5:26 am #269639UtisParticipant
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
However, I ran into issues. One of them is that the “natural” way of hiding a
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
heightto “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
symboldefining SVG? Or is it hackish and likely to break across browsers. Is there a better way?April 10, 2018 at 6:33 am #269643PoganyParticipant
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.April 10, 2018 at 7:29 am #269657UtisParticipant
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.
- The forum ‘CSS’ is closed to new topics and replies.