Jump to content


SVG Graphics are outlined with background-color

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey guys,


When i upload the code from illustrator the background color outlines my graphics. You can see it on the cats head and arm. It's also outlining where the mans head touches his shoulders. In illustrator the graphic are perfectly lined up.

Any advice on how to avoid this? 

See the Pen xdyBPL by stinkytofu3311 (@stinkytofu3311) on CodePen

Link to comment
Share on other sites

That can sometimes happen. That's the Wild West of SVG. ;)


If you have paths in an illustration that are next to each other, styled exactly the same and don't need to animate separately, I'd recommend merging them in Illustrator before export. If you use the Pathfinder tool, you can merge, unite, intersect etc... The simpler you can make an SVG, the easier it will be to manage.


That's my two cents worth. Others may have additional advice.


Happy tweening.


  • Like 4
Link to comment
Share on other sites



In your case just


sc2   stroke:#10667A;

sc19 stroke: #5D5D5D;


Or follow the advice of PointC


Best regards


  • Like 4
Link to comment
Share on other sites

Thanks for the advice. That seems like a good idea to merge and unite as many shapes as possible. I will give that a try, i will also try the stroke.

Thanks guys

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