In this article I want to share where and how front-end developers can start with creating SVGs.
In short I wanted to turn my Ihatetomatoes logo from PNG to SVG.
What was my process? And what is the result?
1. Start With A Research
Of course Googling “SVG for web” was my first option, luckily there is plenty of resources available.
Maybe that’s why it’s so overwhelming to start.
Here’s my recommended reading for starting with SVG’s:
- Styling And Animating SVGs With CSS by Sara Soueidan
- Using SVG by Chris Coyier
- The Designer’s Guide to Working with SVG by Alex Walker
- SVG Guide by Joni Bologna
These 4 articles will give you enough information and should answer a lot of your SVG related questions.
They certainly answered mine.
2. SVG Editor Options
It’s clear that there are 3 most popular vector graphics editors available:
- Inkscape – free
- Adobe Illustrator – 19.99$/month as part of Creative Cloud
- Sketch – 99$ one off payment
I am ‘just’ a front-end developer, do I really need a paid software to create and animate my SVG’s?
Let’s explore the free option first. Remember all I want to is to export my Ihatetomatoes logo as SVG and animate it later on.
So I’ve downloaded Inkscape and also installed the required XQuartz plugin.
I’ve had some issues running it and needed some additional help when installing Inkspace.
Finally after a few hours installing and configuring, I am giving up.
I guess, you get what you pay for.
If the installation is so painful, how good will be the software itself?
Bye, bye Inkscape.
4. Adobe Illustrator
Illustrator comes as part of the Adobe Creative Cloud and you can try it for 30 days free. Let’s give this a go.
Smooth installation with a press of a button is big plus.
I hope that to create SVG will be as simple as that.
The file from my designer came in the
.ai format so everything should very smooth anyway.
5. Exporting SVG from Illustrator
These are the settings I’ve used initially. None of the above mentioned articles showed the
Responsive option but I kept it selected anyway.
I’ve also cleaned up the SVG using Peter Collingridge’s online editor.
I thought that the
Remove whitespace option will remove all the white space, but this needs to be done in Illustrator before exporting.
Exporting artwork without a whitespace
Simply select the elements you want to export as SVG and go to Object > Artboards > Fit to selected art.
This created the SVG only as the size of my logo, that’s what I wanted.
6. Embedding SVGs
There is a multiple ways of embedding SVGs in your html documents, but we’ll explore all the options next time.
For now here is the Ihatetomatoes logo embedded using the
Now that the logo is exported into SVG, my next job will be to make it animate like on my YouTube videos intro.
Have you already started with creating and animating SVGs? What were some of your most helpful tools, articles and resources?
Let me know in the comments below.
Like What You're Reading?
Sign up to receive my future tutorials and demos straight to your inbox.
No spam, Unsubscribe at any time.