Getting your SVG ready

How to get your own SVG

Option 1: Use an existing SVG

Presumably, you already have an idea of the icon you want to use – maybe it's already an SVG. Follow the steps below to make sure your SVG is formatted correctly.

You can also convert your PNG logo to an SVG using the steps below. Or, maybe you want to edit your SVG.

Option 2: Find one online

You can find a shape online that you can use. I recommend a website like thenounproject.com - But make sure whatever you choose follows the guidelines below!

Option 3: Make your own!

Vector Ink Canvas | Draw Vector Graphics | Vector Design Tools for EveryoneVector Ink

Outline vs. non-outline

In order to make the animation work, you'll need to make sure your SVG is formatted correctly – Here's how!

Outline

Animations: Draw spin, Draw, Jump draw, Draw sequence, Sequence draw spin

If you want to animate the outline of your SVG, you can use one of the drawing animations. This works best with solid shapes that will look good as an outline, such as the examples below.

You can also make some more complicated shapes to outline, but you'll need to make sure they're made correctly to show up as intended. In the example below, the image on the left is made of only lines using the pen tool. The shape on the right is already outlined, and will not show up like we want.

Non-outined

Animations: Spin, Pulse, Jump, Jump rotate

Non-outlined animations are much easier, and can be almost anything. If you have a more complicated logo that you want to use, this might be your best option.

Below is a complicated shape - You probably won't want to use this as an outline, since it won't look too great. Instead, find a simpler shape, or use with one of the non-outline animations.