Intro To Animating SVG’s – Prepping The Artwork & Code

How to prep your SVG file for animation. How to prettify your SVG Code. How to manipulate and prep the SVG code for web animation use.

Subscribe to us on Youtube

Animation on the web is the bees-knees. It can help you tell a story, or create some whimsy. An animation will add to the overall experience on your website.

We have created this three-part video series to help you get started with animation on the web with SVG’s you create.

Prep, Prep That SVG

This first video will show you how to export out an SVG from Illustrator (you can use whatever vector editor). Then, we will show you a tool to take the exported SVG and prettify the code. We will also show you why the code needs prettifying. Once the code is prettified, we will show you how to manipulate and prepare your code for the web by using a code editor. We use Atomic, and you will see why it is buttery to use.

Tools We Used

Share this article
Facebook
Twitter
LinkedIn
Pinterest

Subscribe to our Design, Art, Life Email Newsletter

Related ish...

Design Blog     Studio (Coming Soon)

Tickyboom is a graphic design studio that specializes in illustration, brand identity, and web design. We are a husband and wife duo that love to equip others to flourish through design.