<symbol> and <use> layout difference
Hey, i have a couple of questions regarding wha's in the post title.
1) what's the difference between defining your
<symbol> tags within an svg tag and without? e.g.
i understand that when you define them within an svg tag you can use the <use> tag by itself whereas if you don't define them in an <svg> tag you have to wrap the <use> tag in an <svg> tag e.g.
it's pretty understandable to me as to why this is the case, e.g. if you're lacking an <svg> tag wrapping the <symbol> tags, you wrap the <use> tag within one, vice versa. But is there more to it?
-----------------------
2) following from the question above, is there a difference between defining a <title> tag within the <symbol> tag when you wrap the symbol in an <svg> tag compared to defining a <title> tag within the <svg> tag along with <use> when you don't wrap the <symbol> tag in an <svg> tag? e.g.
i suspect it could be the same sort of logic as the first, but again, is there more to it? or are they both a matter of preference?
i'd appreciate any help, thanks in advance.36 Replies
the difference is that one's an svg
<use> element, the other is a random <use> element
being inside the <svg> makes an enormous difference
if those elements work outside the <svg> tag, that's a bugah okay, so if the
<use> tag needs to be inside of an <svg> tag, then would wrapping the <symbol> tags in an <svg> tag be redundant? e.g.
or would you do this?
what exactly does wrapping the <symbol> tags in an <svg> tag do? the only thing i've seen is people putting display none on the svg tag to hide them all, but i don't get that since i've also heard that the symbol tag by itself hides by default?what wrapping with svg does is completely change everything
inside an svg goes xml, not html
the namespaces are completely different
so essentially, this wouldn't work since
<symbol> isn't wrapped in an <svg> as they both have to be wrapped in one? The svg use declaration thinks the symbol content is html rather than xml?
it must be wrapped in an svg
doesn't matter where, it has to be one
in fact: it doesn't even matter if it is in the same server
yes: the other svg for the
<use> can be somewhere elseah and is the reason for it having to be wrapped in an svg due to what i said? (The
<use> tag thinks the symbol content is html rather than xml since it isn't wrapped in an svg tag).
what do you mean it can be somewhere else, sorry?no, it's because it isn't an html element
it's an svg element
and where do svg elements go?
ohh right that makes sense haha, it's similar to
<path> in that sense?
and is that the same reason that <use> is wrapped in an svg too? <use> is also an svg element?yup, and path is an svg element too
ah that all makes sense now, i appreciate you helping clear that up, thanks
you're welcome
i was just reading up on it a little and came across a pros and cons list for using svg symbols on this site https://nucleoapp.com/blog/post/how-to-add-and-manage-icons-in-web-projects-using-svg-symbols. i'm a little confused on the cons though.
1) "Fewer customization options compared to inline SVGs". In the article i believe it refers to being unable to directly access path attributes such as
fill directly with css, however as they state, you can use currentColor and change the color by setting color on the svg tag wrapping the <use> tag. i actually think this is better?
2) "Unlike inline SVG, you can't animate individual icon elements". Isn't-
theoretically the same as the following since use is sort of like a variable for the path content.
allowing you to still animate it as shown here? Unless i'm wrong? https://codepen.io/deerCabin/pen/MWNzVYV
3) "To add/remove icons, you need to generate a new .svg symbol file". How is this the case? don't you just add another <symbol>?
point 1
true, you can only costumize the currentColor, and that's more than enough for icons
point 2
someone forgot to do not use
display: none...
point 3
what in the fuck???
none of that makes any sense!!!
OH!!!
yeah, you need a new svg file if you add or remove symbols
however, this is a very very narrow view, and it covers just a fraction
it's a cherry picked example to say "svg symbols bad >:("
a blow some minds here, but, svg symbols dont need to be in a separate file...
🤯
in fact, this argument is total bs when he's saying to use inline svg
so, instead of having the same svg stuff repeated all over, bloating the html a lot
... just put the symbols in an svg inside the document ...
saves space, they are still inline and you can easily edit itOh haha, I thought you had to do that otherwise there would be a lot of excess space from the symbols?
I’m still a little confused with this one, even if the symbols are in a seperate file, don’t you only still need to add/remove symbol tags to edit them?
you can hide it without
display: none
if the svg with symbols is in a different file, and you need to change something, people will have to re-download everything
which is absolutely true, but, it's a shitty argument against <symbols> in favor of having the same huge chunk of svg all over the websiteOh, how do I do that? Is it a special thing with symbol or is it styling it off page?
Ohh okay I see
just use visibility and set it to 0x0
if you want, you can even use
position: absolute to remove it from the document flowahh okay, and how does
display: none; affect the animations of individual icon elements like it states? I know you can't animate to and from display none but you wouldn't need to with this? perhaps it's referring to not being able to animate the <symbol> tags?it stops the animations, to save cpu and gpu resources
ohh okay that makes sense. what's "individual icon elements" referring to though? is it
<symbol>? it can't be <svg><use href=".."><use><svg> as i was able to animate that just fine? unless it was referring to the <use> tag?yes, it is the
<use>ah i see then. so to make sure i've got that-
since
<use> is theoretically like a variable for the <symbol> content which is wrapped in a parent with display: none;, it can't animate? Therefore i assume it could animate without the display none?
is that what's going on essentially?it can
i had problems with smil animations before
https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL
and the solution was to do not use
display: nonewoah that's kinda cool, i didn't know you could animate svgs like that
so the con referring to the animations is a little misleading then? since it doesn't say they can animate without
display: none;?i think that that might be the issue he had, yes
if it is, then his statement is misleading
Ah okay, and then if you style it off screen, I assume you’d have to have an inert value to stop screen readers selecting it?
no, you don't usually need to
you can put
role="none" or presentation
and aria-hidden="true"Oh I see, inert is for tab disabling too right, so since you can’t tab to an svg by default then It’d be what you said?
inert should have tab-navigation disabled, yes
Ah I see. I think that just about concludes this post then. I appreciate all the help 🙂
you're welcome
Quickly jumping back to this thread, is there any use case where just using an inline svg over a symbol set would be better? Obviously if you had one svg you probably wouldn’t set symbols up for it, and if you wanted to directly access the svg tags/attributes then you wouldn’t either, but is there anything else?
yes: if you just use it once in a single place forever, then it is easier
ah okay, thanks
you're welcome