SVGs <use> and not...
Hi guys I really would aprecciate come help here. In this HMTL are two ways of using svgs but one of them is not getting the size of the actual svg (image) change it only changes the size of the container. The weird thing is that the two of them are responding to a change of color fill:red but just one is responding of a change of height. Can you figure out why?
https://codepen.io/Ari-Cohelo/pen/WNYoBjR?editors=1101
8 Replies
put the viewbox on the <symbol>
mark , is it true you dont need the attr xmlns="http://www.w3.org/2000/svg" when using svgs inline in html?
I don't use it all the time and never noticed any deficit. But can not say for sure, my svg knowledge is a bit weak (mostly i just copy paste from figma)
Okay, so no, not necessary for inline svg inside a html document
ref: https://stackoverflow.com/questions/18467982/are-svg-parameters-such-as-xmlns-and-version-needed
you shouldn't use the namespace in html
and yes, the symbol is missing the viewbox
also, make sure that the svg is visually hidden - doing
display: none breaks animations on itxmlns == xml Name Space, now it makes sence in my head. will never forget 😉
Glad it's clicked for you, it still floats around with ❓️❔️ around it for me 🤣
OMFG Thank you!!