Working with SVGs and external content/"use" tag

[brightpixels]

I have got inline SVGs, which I have animating with GSAP. Today, I was asked, for reasons I don't fully understand, to implement SVG sprites technique by combing SVG content into a single external SVG and referencing chunks on the SVG with the <use> tag (read more here about this technique https://css-tricks.com/svg-use-external-source/).

 

Issue I have now, is that GSAP can't target any elements that exist in the external svg file. I understand this is due to how DOM works and the fact GSAP or even CSS have no access to any other DOM.

 

My question: what options do I have? If this is a bad idea, if so, why is it? Blake mentioned https://greensock.com/forums/topic/16889-target-class-inside-svg-sprite-sheet-inside-loop/ here about performance might be an issue but didn't go into detail (anything to help me push back on this and stick with inline SVG will be useful).

 

 

Example code

 

<!-- Main file -->
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
  <use xlink:href="img/svg-assets.svg#mainshape"/>
</svg>

<!-- External svg file-->
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="mainshape">
    <circle cx="27" cy="27" r="25" fill="#293741" fill-opacity=".75" stroke-width="4"/>
        <text fill="#FFF" font-family="SourceSansPro-Semibold, Source Sans Pro" font-size="20" font-weight="500">
      <tspan x="24.18" y="38">Title</tspan>
    </text>
    <text fill="#FFF" font-family="SourceSansPro-Regular, Source Sans Pro" font-size="9">
      <tspan x="19.058" y="21">Subtitle</tspan>
    </text>
  </symbol>
</svg>

 

[OSUblake]

Results may vary, but <use> elements are not static, so the browser has to track changes across every instance. 

https://stackoverflow.com/questions/8604999/does-reusing-symbols-improve-svg-performance

 

This slide show reveals really poor performance.

http://slides.com/rovolutionary/tuning-svg-performance-in-a-production-app#/

 

Performance issues aside, the real issue when working with the <use> tag is that everything is hidden inside a shadow-root, which you can't access. That might be ok for static icons, but not for animations.

[Jonathan]

Hello @brightpixels and Welcome to the GreenSock Forum!

 

When dealing with the SVG <use>, there is cross domain security, due to same-origin policy. You would need to have the SVG located on the same domain. So, Yes i would echo @OSUblake advice. It is better to just use the SVG embedded in your page so you dont have to deal with generated content or elements that are hidden, external, and not directly rendered in the DOM.

 

Also there are still various browser bugs when using the SVG <use> element when defined in your CSS which can be blocked by the browser. So your better off to just including your SVG inside the same document.

 

Happy Tweening

[brightpixels]

Thanks guys