Jump to content
Search Community

SVG graphics - drawn with code or AI?

azuki test
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

Hi all,


Apologies for a very green question here but I've searched through the interwebs and the forums here and can't seem to land on an answer (unless I have already and just didn't recognize it...)


I'd like to explore the DrawSVG plugin to animate the outline of a word, much like the example used on the DrawSVG page here.  However, I'm not clear on where/how the original illustration is created - in Illustrator or purely in code?  Is the graphic first drawn in illustrator, exported as an svg file and then animated with GSAP?


When looking at the source files for this tutorial, I don't see any Illustrator files, just the svg code in the html.  Is this being drawn with coordinates and then animated?  Likewise, when inspecting the source for the DrawSVG banner, the green-caped greensock illustration is composed of several "path class="gray-line"" lines - was this logo first created in Illustrator and the coordinates copied in Illustrator somehow?


Again, apologies for what I'm sure is a simple answer via my verbose question but I'm not sure where to dive in so I can start animating.


Any help is much appreciated!!

  • Like 1
Link to comment
Share on other sites

Hi azuki  :)


yep , you can make text outlines in adobe Ai :


- select your text in Ai  >  right click  >  Create Outlines .


- select your text in Ai  >  Type ( from main menu )  >  Create Outlines .


and export SVG from Ai > save as > *.svg


i think that's better to check your svg for issues in this online tool after exporting : https://jakearchibald.github.io/svgomg/


finally you need to set id or class name for your paths to easily select them .

  • Like 2
Link to comment
Share on other sites

Hi Diaco,


Thanks for your response.  I do know how to create outlines in Illustrator however, I'm don't know where to get the SVG data to put into the html so I can start animating it.


Where does the SVG data come from?

Link to comment
Share on other sites

Hello azuki, After you draw it in AI you need to export your AI drawing as an SVG. Illustrator will also give you the option to preview the SVG markup before exporting


Many ways to export SVG in Illustrator:




And here is a youtube video on how to export an svg in Illustrator:





  • Like 2
Link to comment
Share on other sites

You can open the svg file saved with illustrator with a code editor and copy/paste the code into your html file or you can also use some jquery to look for dom elements with a certain class ( <img src="image.svg" class="svg"> ) and embed the files content into a div... 

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