Kevin Powell - CommunityKP-C
Kevin Powell - Community•16mo ago•
73 replies
snxxwyy

<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.
<svg>
  <symbol id="..." viewBox="0 0 16 16">
    <path d="..."></path>
  </symbol>
</svg>

<symbol id="..." viewBox="0 0 16 16">
   <path d="..."></path>
</symbol>

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.
<use href="..."/>

<svg>
  <use href="..."/>
</svg>

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.
<svg>
  <symbol id="..." viewBox="0 0 16 16">
    <title>...</title>
    <path d="..."></path>
  </symbol>
</svg>

<svg>
  <title>...</title>
  <use href="..."/>
</svg>

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.
Was this page helpful?
CommunitiesDocsAboutTermsPrivacy