SVG Drawing animation (Part 1) – Exporting to SVG

Beginner Adobe Illustrator tutorial: This tutorial covers preparing and exporting your illustrations into SVG and using Adobe Illustrator so that we can bring them to life in a drawing animation.

Demo

Exporting to SVG

In late 2015, I worked on an internal project for the launch of TheTin’s website (a digital agency I work for). The Playground is an area where we share internal projects that showcase our skills and I got the opportunity to work on our first project (you can read all about it on our website).

In this tutorial series, I will be covering how I achieved the animation of the pipes in this project. In Part 1, I will be sharing tips that I learnt whilst working on this project that will help you export your illustrations to SVG effectively for CSS animation. This illustration was created internally at the digital agency I work for and credit to our designer Daisy Harding for drawing this.

  1. Open your .ai illustration file in Adobe Illustrator. Ensure that the Artboard (your canvas) is cropped so that your illustration is fitting neatly & removing excess white space. This is important for when the SVG is placed on the web page.artboard-no artboard-yes
  2. Your animation will depend on how the illustration was originally drawn. This tutorial series will be animating the stroke (border) to appear as if it is being gradually drawn. For example, if the starting point of your line is on the left and goes to the right, your animation will behave the same and start from the left. Keep this into consideration when you are drawing.drawing-path
  3. It is recommended to convert all the lines of your illustration to path, having all your lines as the same type also makes it easier to select in CSS (e.g. svg.path in CSS would select all the path elements within the SVG). Sometimes when you export your SVG, you may get line or polygon being outputted in the code. To convert these to path, hold Ctrl (Command button if you are using Mac) and click on all the lines you wish to be one path. Then right-click on your selected lines and select “Make Compound Path”.

    I compounded the paths for the pipe’s outline and detailing as separate paths. This is because when I selected both the pipe’s outline and detailing and compounded as a path, this forced both lines to be the same thickness. Keep this in mind when compounding paths that have different properties. You may also want to do this if you want certain paths to have different animation behaviours or decide they should animate separately.

    compound-path

  4. Before you export, take a look at your Layers window (Press F7 to view this). Give your layers a naming convention to help differentiate between lines when animating them. I have used “P” (for pipe) and its number for the order I want to animate them. I have also labelled the extra detailing on the pipes as “P1_extra”svg_layers

  5. Now we are ready to export to SVG. Go to File > Save As (or Ctrl/Command + Shift + S) and select SVG under “Save as type“. Don’t forget to also save a copy of your altered illustration as .ai so you can revisit it in the future.svg_save
  6. This is the next Save window. You can click on the “SVG Code..” to see the code before you save the SVG. I am happy with the default settings and click “OK” but you may need to change them for your specific needs.svg_save2
  7. Now you have successfully exported your illustration to SVG. You can open your SVG in a web browser to preview. You can also open your SVG in your favoured code editor to see the code behind the SVG. It may look a little daunting but don’t worry, Vizune is here to help! In part 2, we will be placing this SVG into a web page and animating using pure CSS (including keyframes).svg_code

Go to Part 2 >>

Share
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *