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:

svg_001

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.

svg_002

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:

svg_003

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" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://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="http://www.w3.org/2000/svg" xmlns:xlink="http://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.

0 shares
  • Pavel 2Nine Antolík

    I can’t wait to try this out, but I am still a bit concerned by the large amount of code – it seems that when there is more SVG images in one document, HTML can get really messy :/

    • Sara Vieira

      If you have no necessity to do any CSS or JS to the SVG images you can very well just place the SVG as the src attribute of your image tag.
      You can still use that SVG in different sizes :)

    • Kevin Johansson Candlert

      You can embed .SVG files as normal images! :)

    • Byron Houwens

      There are a number of ways around this. Snap.svg is a Javascript library that’ll dynamically load SVGs when you serve your HTML. Another option is to set up your own AJAX calls to load the SVGs, and still another is to grab an extension (depending on your code editor) that’ll fold sections of code for you.

  • Heliotheist

    I get the idea, but I believe a pen with the result would help to get a couple devs on board with SVG :)

  • http://Darklit.net/ George

    That is awesome. I had been just using SVG’s for the occasional scaling icon – had no idea you could put the xml right into the document. Mind = Blown. The possibilities here are … just … wow. Thanks for this. And a request; can you make a simple “download the demo files” available like on Codrops? Would level up this article. Thanks.

  • Jacob Stone

    Great article. Just made myself a nice CSS editable SVG graphic in well under 10 minutes. Much easier than I thought it’d be!

  • Leon Gleiser

    is it works in our beloved IE8?

    Thanks for the tutorial!

  • prettyconfusd

    Very excited to play with SVG.

    Has anyone considered using them for lettering in web comics? Still use a JPG for the image but then all the word balloons and actual lettering as SVG? I think that’ll be my first test…

  • Zach

    SVG is perfect for responsive UI elements! No more pixelation!!!!!

  • Robert J.

    Actually, interesting and future improvement technique since all mayor browsers supports SVG natively! Nu fuzzy icons and boring chart animations anymore :-) thanks SVG and SMIL, thanks W3C.

  • Byron Houwens

    The code for the SVG can be cleaned up way more in order to get it more readable. A lot of the attributes on the SVG tag (in this instance everything after the “xmlns:xlink” attribute) can be removed and the whole thing will still render properly. It’s also good to point out that SVG animations can be declared within the SVG itself, no CSS or Javascript needed. You can read the docs on that if anyone’s interested.

    • http://www.robustgroup.com/ Albuquerque Web Design

      This is pretty awesome.. I see a future in responsive SVG animations for websites, online applications such as games.. Something to finally replace Flash on tablets without really using a player.

      • Byron Houwens

        Definitely :) SVG was originally created as an alternative to Flash and with that almost gone from the web these days I’m sure we’ll see SVG getting bigger

  • http://makemeahappyuser.blogspot.com/ Julia

    If you’re looking for free tool for creating SVG, check out Inkscape (http://www.inkscape.org/)

  • Victor Marchenko

    Little tip: When save svg from Illustrator, click “More Options”, then select “CSS Properties”=>”Style Elements” – instead of presentation attributes, elements styles will store in tag

  • stotskii

    SVG export for Photoshop – http://www.zeick.com