Jump to content


Loading SVG Externally and changing TweenMax.selector

Recommended Posts


I am loading my SVG file externally in an object tag because I wish to use gzip compression for my SVG. Because my SVG is now loaded separately, I can not select the elements inside the SVG with the default Greensock selector.


I have tried this solution, but I don't wish to wrap



around all of my selectors instead of the default Greensock ' ' selector.


Is there a way to modify the TweenMax.selector so my selectors will be referencing that document?

Thank you.



Link to comment
Share on other sites

I don't think the browser will allow you to reference things inside the externally-loaded SVG with JavaScript for security reasons. You might want to consider injecting it into the DOM instead. 

Link to comment
Share on other sites

@Amplus yeah unfortunately as mentioned above even CSS styling is not possible on an embedded SVG object. 


I know you're feeling because svgs can get so big and ugly they're hard to handle alone let alone inside another document. 


But the styling has to be with the SVG content itself not the object. 


You can do things like embed the SVG html itself with different techniques which can make it easier....For example in server side PHP you can do an include which brings the SVG content with one line and then you can work with the SVG in a separate file. 


As mentioned above perhaps there are similar scenarios in JavaScript by keeping the files separately and somehow getting the actual SVG content into the DOM but I'm not sure what drawbacks that can include as well. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.