Getting your SVG ready
Last updated
Last updated
Presumably, you already have an idea of the icon you want to use – maybe it's already an SVG. Follow the to make sure your SVG is formatted correctly.
You can also convert your PNG logo to an SVG using . Or, maybe you want to .
You can find a shape online that you can use. I recommend a website like - But make sure whatever you choose follows the !
In order to make the animation work, you'll need to make sure your SVG is formatted correctly – Here's how!
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-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.
Option 1:
File > Upload from Disk > Select your SVG file
Make any edits to your SVG if needed
Click the "elements" button at the bottom of the screen
Select the shape you would like to use, and copy the "path" or "polygon" code
Download your SVG
For a simple conversion, I like to use this free site here:
Or, for more complicated images, you can try your luck with Adobe's free converter:
Upload your SVG to
Follow the , and make edits to your own file!
I've found this site to be useful to make some edits to your SVG:
Go to
Go to and click "paste markup"
