Jump to content


.svg guidance for use with gsap

Go to solution Solved by GreenSock,

Recommended Posts

I am new to working with .svg files, and am trying to use and animate some with gsap, but am instead seeing my alt text. It is my first time generating my own, and bringing them in. I have been embedding them in an img tag, and have checked out documentation and stack overflows, but remain stuck. Is there anything I'm just unaware of re: the format of the svg I'm trying to use....like in the DOCTYPE or headers in the image below that I have attached...? Any know-how would be much appreciated!


Thank you!!

Screen Shot 2021-09-30 at 7.47.29 PM.png

Link to comment
Share on other sites

  • Solution

It's super difficult to troubleshoot just by looking at an excerpt of the code - you'll significantly increase your chances of getting a good answer if you provide a minimal demo so we can see the issue in context. 


GSAP doesn't have any specific requirements in terms of the SVG, DOCTYPE or anything like that. If you can get it into the browser, GSAP can animate it. 


Your SVG values look pretty weird (lots of extra "0" characters, but that won't break anything). You could run it through an optimizer like SVGOMG.


If you're trying to animate individual parts of the SVG, you'll need to inline it, meaning literally paste the SVG markup directly into your HTML page because browser's don't allow access to the guts if you load it into an <img> for example (security reasons). 


If you still need some help, post a minimal demo and we'd be happy to take a peek but please keep in mind that these forums are for GSAP-specific questions (see the forum guidelines). 👍

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

I don't have codepen ability to add assets, like my .svg files, to make a minimal demo super useful here.


See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

so that anyone can see how I'm trying to embed in the img tag. The animation is aiming to be very simple, like a slide in, etc. The problem is that the image itself does not show up. Instead I get the alt text that I provided. I have used svg's before with gsap, and had no issue with them rendering, so just wanted to know if anyone saw something wrong with my svg format. As this is not something specifically for this forum, I apologize. I may have more questions about animating it....once I can see it. Much appreciated, and I'll continue scouring stack overflow too.

Link to comment
Share on other sites

The demo you provided is just our starter template. We need to see how you're trying to put the SVG in there. If you're trying to load an external SVG, why don't you just put it at a URL somewhere (like on a domain you have) and just reference that in a CodePen fork? Sorry, we just can't help you without seeing what you're doing. 🤷‍♂️

  • Like 1
Link to comment
Share on other sites

So the SVGOMG tool was very useful for me, and I got the .svg files to a format that displayed. Thank you @GreenSock for pointing me in that direction! I had never heard of that. :)

  • 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.