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 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.
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!
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.
For a simple conversion, I like to use this free site here: https://convertio.co/png-svg/
Or, for more complicated images, you can try your luck with Adobe's free converter: https://express.adobe.com/tools/convert-to-svg
Option 1:
Upload your SVG to https://vectorink.io/app/
Follow the video above, and make edits to your own file!
I've found this site to be useful to make some edits to your SVG: https://boxy-svg.com/app
Go to https://boxy-svg.com/app
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
Go to https://jakearchibald.github.io/svgomg/ and click "paste markup"
Download your SVG
