Website Logo. Upload to /source/logo.png ; disable in /source/_includes/logo.html

Up and Running with SVG

An SVG primer for everyone. Created by Mijingo.

Creating SVGs with Tools

Before we start to use SVGs in our webpages, let’s go ahead and create some. We’re going to create SVGs in a few different ways.

First, we will create SVGs by creating a simple illustration in Adobe Illustrator and exporting as SVG. After that, we will convert an existing image (the same logo we created in illustrator) to SVG with an online conversion tool.

The coding of SVG is coming up in the next sections. Don’t worry.

Creating SVGs with Adobe Illustrator

Before we learn how to use SVG in our web pages, let’s first create a file that we can use. We’ll start with a logo for this fake company called BIG Corporation. It’s a terrible company and they have a terrible logo. But we’re tasked with creating their website, so let’s create a vector version of their logo so it scales nicely in all contexts.

You might not be responsible for the logo or artwork creation but you may have to open the file and create an SVG. It’s important to know how to do that properly so your SVG will look good.

Big Company Logo in Illustrator

Here are the things you need to know:

Fill the Artboard

The artwork should fill the entire artboard or canvas. This will ensure that your SVG doesn’t extend wider and taller than the actual artwork. If you save the SVG with excess space than you will have that as white space in your SVG file.

Convert to Outlines

At a minimum, any text in your illustration should be selected and then converted to outlines. This is important because we want the SVG to be a portable file and not rely on other assets, like typefaces. Your SVG should work without needing special typefaces. SVG will turn the type in the logo into path elements.

Converting text to outlines in Adobe Illustrator

Save as SVG

This is the easy part! Using the “Save as…” option, save the illustrator file as an SVG.

  • Choose “SVG (.svg)” as the format (not “SVG Compressed”) and name your SVG file.
  • In the next modal, leave the default settings as they are.
  • You can preview the SVG code using the “SVG Code” button at the bottom. This is a nice way to sanity check your SVG before saving. If you didn’t convert the file to outlines then you’ll see typefaces referenced in the SVG. If so, go back and convert to outlines before saving!
  • Save the file to your hard drive. Make a note of where you saved it because we’ll need it later.

Saving as SVG

Converting an Existing Image to SVG

Beware of the image to SVG conversion tools online. Some of them do not actually convert the image to SVG, which requires retracing the image and turning it into a set of coordinates and lines, but instead just encodes the image as base64. That’s fairly easy to do without needing an online tool and doesn’t help us at all on our goal of creating a real SVG file, not another form of a bitmap image.

Vector Magic

If you have to convert a bitmap image to SVG, the best online tool I’ve found for converting images to SVG is Vector Magic. This service actually traces and plots the images into SVG. I only tried it with the Mijingo logo, but it probably works best with simple line-based artwork, like logos or icons.

Vector Magic does require having Adobe Flash installed for your web browser.

Previewing an image conversion in Vector Magic

Ready to learn more?

Get the Full Video Course