How I Created My First SVG

How I Created My First SVG

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:

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:

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.

3. Inkscape

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.

Let’s see.

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.

How I Created My First SVG

How I Created My First SVG

I’ve also cleaned up the SVG using Peter Collingridge’s online editor.

How I Created My First SVG

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.

How I Created My First SVG

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 <svg> tag.

See the Pen Ihatetomatoes SVG Logo by Petr (@ihatetomatoes) on CodePen.0

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.

7 thoughts on “How I Created My First SVG

  1. Ryan

    Hey Petr!

    Long-time reader, first-time commenter…I’ve started back down the path of SVG’s late last year. Before then it was pretty much out of interest when I’d explore them.

    I always wanted to know why no a Windows machine the svg file type defaults to IE??? Anyways, I’m excited to continue refining my svg-ness but where I get tripped up is fallbacks.

    Most browsers support SVGs and from what I’ve seen a good amount of devices. However, you don’t always want to run animations on phones…but I can’t seem to ever come up with a bedrock fallback option.

    Do I hide the SVG and show a static image? Or just disable the animation call? If I have a map with hover effects on the boundaries of the map properties, should I run that on mobile? Seems like a decent amount of bloat to pull down off a cell tower….I don’t have a one size fits all answer (like there ever is one).

    But what I’d like to see is some benchmarking with SVGs on mobile devices. If I get around to it I’ll see if I can run some numbers. If yo know of any resources I’d be much appreciated for a lead.

    Thanks for all your hard work that you share, I and loads others appreciate it!

  2. mike

    Hi Petr,

    I stumbled onto Affinity Designer at the weekend.
    Mac OS only though.
    So far I must say it’s very good.
    It can I/O Adobe formats and SVGs.
    While it’s not Illustrator it suffices for most of my current output, icons & logos mainly.
    Ten day trial version is free and the full version costs about the same as a single month with Adobe.

    1. Petr Tichy Post author

      I haven’t heard about data-depth attributes in Skrollr, but you can try to create your own data attributes and change their value using Skrollr. I haven’t tried this myself though.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.