How to get started with SVG

In the last few months, the buzz around SVG images has grown and grown. SVG has been around for years, but it’s only recently that it’s started to look like a real contender.

The hype around SVG isn’t just some hipster trend, SVG completely solves issues that file formats like JPG completely fail to address.

If you want to start using SVG, this article is for you. I’ll guide you through getting your SVG from Illustrator into HTML and then teach you to modify that image using CSS.

Before we get started take a look at the demo I’ve put together, this is what we’ll be building.

What is SVG?

S.V.G. stands for Scaleable Vector Graphics, and that first word will give you a clue as to why SVG is so popular. SVG is the perfect counter-part to responsive design.

SVG images are, at their core, an XML-based vector image format for 2D graphics.

The SVG specification is an open standard that was developed by the W3C in 1999, so you can see it’s been around as a technology for a decade and a half—a lifetime in web terms.

Why should I use SVG?

Workflow and efficiency are too valuable to throw away on a whim. If you’re going to switch from JPG or PNG to SVG then you need valid reasons, fortunately SVG provides a lot:

• SVG is usually smaller than bitmaps like JPGs and PNGs, meaning they use up less web space and download faster.
• SVG images are scaleable, they look great no matter what size you use them at, and that’s brilliant for retina displays.
• SVG makes the responsive image conundrum academic, by providing a one-size fits all solution.
• SVG is perfect for the flat design trend that is currently so popular.
• Because SVG is essentially XML, it can be controlled with CSS and JavaScript, providing a wealth of interactive possibilities.
• SVG doesn’t require HTTP requests; SVG is part of the document’s source code and so already available.

SVG is an incredibly useful technology, and it’s a mystery to many why it hasn’t taken off to fuller effect.

From Illustrator to the Web

There are a multitude of applications that will output SVG, you can use any of them. My personal preference is Adobe Illustrator, so that’s what we’ll use.

I’ve just thrown together some shapes and some text for our SVG:

As you can see, it’s a very simple graphic, so that we can clearly see what’s happening in the code.

The next step is to save it as an SVG. So select File > Save As.

You’ll see the usual pop up, and in this one you need to select the SVG format; as soon as you do this pop up will appear:

This dialogue provides us with two options:

Option 1: Save the image

The first option we have is to click OK in the pop up and simply save the image as a .svg image and add it to our HTML as we would a bitmap image:

<img src="images/image.svg" alt="SVG"/>

This is absolutely fine, and the image will still scale if you want it to, however because this option is an embedded file, we won’t have editing abilities in the source code of our page.

Option 2: SVG Code…

The second option is to directly access the code for the image by clicking the SVG Code… button. You can then copy it and paste it into your HTML.

The code I got was:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1"  xmlns_xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml_space="preserve">
<rect x="314" y="89" fill="#AD6F6F" width="250" height="158"/>
<circle fill="#6F9FAA" cx="553" cy="241" r="68"/>
<circle fill="#6F9FAA" cx="314" cy="157" r="68"/>
<polyline fill="#6FA86F" points="206.794,352.189 241.083,427.637 631.769,395.559 670.822,309.072 "/>
<text transform="matrix(0.9957 -0.0926 0.0926 0.9957 260.4678 399.3389)" fill="#383838" font-family="'Pacifico-Regular'" font-size="35">SVG FOR THE WEB</text>
</svg>

This is the preferred approach because it’s going to allow us to manipulate the image with CSS.

As you can see, the code is simple XML and as a result, is probably reasonably familiar to anyone working on the Web. That familiarity is a great advantage when working with SVG.

You’ll also see that there are a number of attributes in the XML elements, that detail colors, and positions; these are the values we’ll be manipulating later on.

Cleaning up the code

If you’re familiar with XML (don’t worry if you’re not) you’ll see that the code produced by Illustrator is somewhat messy. This is because it’s added presentational CSS properties in the XML, cluttering it up.

So the next job we have is to move the presentation aspects to CSS where they belong.

We can see that all of our shapes have a fill color, and that is one of the attributes we can easily move to our CSS. To do that we just need to delete the fill attribute and value from the XML and use a simple selector to define the color we want in the fill property:

rect {
 fill: #AD6F6F;
}
circle {
 fill: #6F9FAA;
}
polyline {
 fill: #6FA86F;
}

Next, we can see that in our text, most of the attributes can also be transferred to our CSS. Just delete fill, font-family and font-size from the XML and add them to the CSS:

text {
 fill: #383838 ;
 font-family: 'Pacifico-Regular', arial, sans-serif;
 font-size: 35px;
} 

Let’s take a look at our code now:

<svg version="1.1" id="Layer_1"  xmlns_xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml_space="preserve">
<rect x="314" y="89" width="250" height="158"/>
<circle cx="553" cy="241" r="68"/>
<circle cx="314" cy="157" r="68"/>
<polyline points="206.794,352.189 241.083,427.637 631.769,395.559 670.822,309.072 "/>
<text transform="matrix(0.9957 -0.0926 0.0926 0.9957 260.4678 399.3389)">SVG FOR THE WEB</text>
</svg>

You can see that by removing the presentation attributes we have far more readable code.

Taking it up a notch

We’ve moved our presentation attributes out of our XML into our CSS, but those were attributes we already had. We can also add brand new attributes.

The first thing I want to do is add a stroke to our first circle, but not only that, I want to control the thickness and the opacity. It’s all very simple:

circle {
 stroke: #547178;
 stroke-width: 5px;
 stroke-opacity: 0.5;
}

If you check your file, you’ll see that this does indeed add a stroke to the circle, but it also adds it to the second circle which we didn’t want.

The solution is exactly the same as any CSS selection issue, we just need to add a class to our XML element:

<circle class=“stroke” cx=”553″ cy=”241″ r=”68″/>

And then, we can target the class in our CSS:

circle.stroke {
 stroke: #547178;
 stroke-width: 5px;
 stroke-opacity: 0.5;
}

Almost any CSS can be applied to SVG. We can apply a hover effect that will increase our font size, for example:

text:hover {
 font-size: 40px;
}

If you test that, you’ll see that it works, but it’s a bit of an instantaneous response. It would be far better if we used a CSS transition, which is of course possible:

text {
 fill: #383838 ;
 font-family: 'Pacifico-Regular', arial, sans-serif;
 font-size: 35px;
 transition: all 1s ease;
}

If you reload the page you’ll see a gentle transition in font size.

Conclusion

As you can see, SVG has a lot of power behind it. The learning curve is very shallow, and the possibilities seem endless. A single SVG image is worth dozens of bitmap images.

Featured image/thumbnail, scaleable design image via Shutterstock.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.