Scalable Vector Graphics: Code Your Images

By Alli Treman on August 11, 2015

Scalable Vector Graphics: Code Your Images
After reading this, you’ll probably start to wonder if SVG stands for “Super Versatile Graphic” because that’s what SVGs are: graphics that you can manipulate with code and use for all different purposes. Like the more familiar GIF, JPG, and PNG, SVG is an image file type. It actually stands for “Scalable Vector Graphics” which is also an accurate, although less exciting, name for this fancy file type.

The most amazing thing about SVGs is that they aren’t just images, they’re XML markup. They’re code. I don’t mean the crazy, nonsense code you see if you open up a JPG in notepad, but human-readable (and editable!) XML code. The ‘Vector’ part of SVG means that they aren’t made out of pixels, which makes them exceptionally useful for creative responsive designs for devices with retina and other high-resolution displays. No matter how much you zoom in, you’ll still see a pretty image.

You can also style SVGs with CSS. This is particularly helpful when developing responsive websites. Not only do SVGs look good in all sizes and resolutions, you can actually change some aspects of how the image looks using media queries. 

SVGs are used for icons, logos, and other site images. We will be using a logo for our example, but you can see how it would be useful for icons: they’re responsive and you can change their size and color with code. It’s a lot easier than creating sprites with all of the different color and size options you need or loading an icon font with upwards of 200 icons when you only need four.

While an SVG can be created with pure code, most people choose to make them with a vector graphics program such as Adobe Illustrator or Inkscape. These programs allow you to save your work in an SVG file format. Even if you create your SVG in Illustrator, the browser reads the XML code to display the image. You can also edit the XML directly.

For example, here is the SVG code for a simple blue square:

<svg width="50" height="50">
    <rect x="0" y="0" width="50" height="50" fill="#0287AA"/>
</svg>

This SVG is incredibly basic. It’s simply a rectangle <rect> shape with a height, width, and fill color. The code for your SVG generated with Illustrator will look a bit different, but they will all be made up with the same set of tags. Check out the entire list of tags here.

Another option is to find SVG online created by graphic designers. Iconfinder.com is one place where may of the icons featured are available in SVG format. Any of these SVGs can be used just like an SVG you created yourself. Make sure when looking for an SVG online that you pay attention to the licensing so you are only using icons licensed for your type of website.

It’s a good idea to optimize your SVG before you add it to your site. This will get rid of any excess code and make the file even smaller. You can do this for free with this helpful tool, the SVG-Optimizer. Upload your SVG and click Upload. You will be taken to a page where you can preview your SVG and see a few options. I suggest checking the “Conservative” option under “Optimization”. When you’re ready, click download for your new SVG file.

When you get ready to add your SVG to your site, there are a few options to consider. Displaying an SVG on your site using the <img> tag is the easiest way:

<img src=”www.example.com/mysvg.svg”>
It’s just like adding a regular PNG or GIF to your site. This doesn’t let you do anything special to it though--nothing more than you could do with a PNG or GIF. It’s still a vector image, however, and it will look nice as it scales. If you want to style the individual parts of your SVG, it’s best to embed the SVG markup directly in your HTML. Before you do this, open up your SVG in your favorite IDE or text editor and take a look. You might notice something very familiar: CSS. I suggest moving the SVG CSS to an external CSS file with the rest of the CSS for your project. Of course, you don’t have to do everything I say. It’s your site. I prefer to keep all my CSS together in one spot, and since I use LESS, I might want to use LESS variables in my SVG CSS.

The CSS in my sample SVG looks like this:
 <style type="text/css">

    .st0{fill:#FFFFFF;stroke:#0287AA;stroke-width:3;stroke-miterlimit:10;}

    .st1{fill:#F4B84E;stroke:#B32527;stroke-width:2;stroke-miterlimit:10;}

</style>
You’ll see that .st0 and .st1 are class names and when I look at my SVG code, I see that these classes are applied to two polygon elements. If you’d like, you can change these class names to match your own CSS naming standards. Be sure to change them both in your CSS and SVG markup. (Note: This will not work if you are using an <img> tag to display your SVG.)

Once your SVG and CSS is ready, you can copy your SVG markup and embed it directly into your HTML where you want the SVG to appear. In my example, I’m pretending BizStream wanted to use a new logo shaped like a star. I suggested using an SVG, and here’s my code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 300 300" xml:space="preserve" enable-background="new 0 0 300 300">

    <polygon id="XMLID_1_" class="st0" points="151.5 4.5 197.5 97.4 300 112.4 225.7 184.8 243.2 287 151.5 238.7 59.7 287 77.2 184.8 3 112.4 105.7 97.4 "/>

    <polygon id="XMLID_2_" class="st1" points="151.5 24.7 191.4 105.5 280.6 118.5 216 181.3 231.3 270.2 151.5 228.2 71.7 270.2 87 181.3 22.5 118.5 111.6 105.5 "/>

</svg>
This is what it looks like:
 

(I know, we at BizStream would never use this as our logo. But I wanted to make something simple to demonstrate the powers of SVG. Pretend with me for a moment.)

You can see everything quite well on desktop, but when it gets shrunken down for mobile devices the borders get really thin and difficult to see.
 

Here’s the good news: we don’t have to go back to Illustrator and make a new image for mobile. We can use media queries to change the look of the image. It sounds like magic, but it’s just CSS. Let’s say we decide to remove the blue border entirely and make the red border a lot thicker. In our SVG code above, we have two <polygon> tags. The first one represents the blue border of the star, and the second one represents the inside: the yellow star with the red border.

First let’s change the class names from st0 and st1 to something that better describes what we’re working with:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 300 300" xml:space="preserve" enable-background="new 0 0 300 300">

    <polygon id="XMLID_1_" class="star-outer" points="151.5 4.5 197.5 97.4 300 112.4 225.7 184.8 243.2 287 151.5 238.7 59.7 287 77.2 184.8 3 112.4 105.7 97.4 "/>

    <polygon id="XMLID_2_" class="star-inner" points="151.5 24.7 191.4 105.5 280.6 118.5 216 181.3 231.3 270.2 151.5 228.2 71.7 270.2 87 181.3 22.5 118.5 111.6 105.5 "/>

</svg>
Now we need to change the class names in the existing CSS:
.star-outside{fill:#FFFFFF;stroke:#0287AA;stroke-width:3;stroke-miterlimit:10;}

.star-inside{fill:#F4B84E;stroke:#B32527;stroke-width:2;stroke-miterlimit:10;}

Let’s add some spacing and formatting to this CSS so we can read it a little better:
.star-outside {

    fill: #FFFFFF;

    stroke: #0287AA;

    stroke-width: 3;

    stroke-miterlimit: 10;

}

.star-inside {

    fill: #F4B84E;

    stroke: #B32527;

    stroke-width: 2;

    stroke-miterlimit: 10;

}
Okay, what the heck does this mean? It’s actually pretty straightforward:

fill - that determines the fill color for the polygon. Or outer polygon is filled in white, while our inner polygon is filled in yellow. 

stroke - like fill, this is about color. In this case, it’s the color of the border.

stroke-width - the width of the stroke.

stroke-miterlimit - this has to do with the joining of the lines of your stroke. You can probably leave this as is, but if you’re interested you can read more about it here.

For mobile, want to hide the blue border on the outside. We can do this in two ways. For one, we could set the stroke-width to 0. That would work, but we would still have the white fill area that, since our image is on a white background, we can’t see. Instead we’re going to hide the entire polygon by using display: none.

On our inner polygon we just want to make the border thicker. Let’s set the stroke-width to 10. Our media query looks like this:
@media (max-width: 768px) {

    .star-outside {

        display: none;

    }

    .star-inside {

        stroke-width: 10;

    }

}

If you’re reading this on a desktop computer, you can resize your browser and watch the image change. (If you’re on mobile, you’re stuck looking at the mobile version.)
 

Let’s say this works well for a while, but after a few months it’s decided that we no longer want the yellow in our branding and want to switch to purple. Normally this would require building brand new images, but for the website we just need to change the CSS of our star-inside class:
.star-inside {

    fill: #b882ee;

    stroke: #B32527;

    stroke-width: 2;

    stroke-miterlimit: 10;

}

I’ve just changed the fill color to the new marketing-approved shade of purple, and here it is:
 

If I was using mixins in LESS or SASS, I could just change the value of the variable and everything on the site, including the color of the logo image, would change. No opening up Illustrator required!

This example merely touches on the basics of what SVG can do for the web. This article from CSS Tricks explains how SVG sprites can be a better option for icon systems than fonts, and how to create them. The JavaScript library D3.js uses SVG to power beautiful, animated visualizations of data. The possibilities are endless!

Share This Post:

Twitter Pinterest Facebook Google+
Click here to read more Tutorials posts
Start a Project with Us

About the author

Alli taught herself HTML when she was 12. Just for fun. After that, she was obsessed with figuring out everything a computer can do. Here at BizStream, Alli does front-end development. When she’s not making websites, Alli is going on adrenaline adventures and tackling her ambitious reading list. She has sweet baby boy named Simon and an extra fluffy cat named Sashimi.

View other posts by Alli

Subscribe to Email

Enter your email address to subscribe to the BizStream Newsletter and receive updates by email.