This article is a quick introduction to a popular image technology on the web known as SVG. It will explain to you the gist of what SVG is, why it’s used, and then show you how to edit an SVG file.
What pre-requisites do you need to follow this SVG tutorial? Not much, perhaps a basic knowledge of what XML is, a knowledge of hex colors, and an open mind. Let’s go!
What is SVG?
SVG stands for scalable vector graphics. A vector graphic is a graphic that’s, well, scalable. While most images are a set size and will look ‘pixelated’ if you try to scale them any further, a vector will scale as much as you want it to.
This is because vector graphics are mathematically generated. If you tried to open a normal image file in a text editor, you’d get a long load of random numbers that define each pixel individually.
SVG files, on the other hand, are nicely and efficiently coded in the XML language, so they take up a smaller file size. The other bonus of the images being coded is that it’s super easy to edit them later on.
Here’s an SVG example: the HTML5 logo. Right-click and select ‘View Source’ to see the XML source code.
Creating an SVG File
If you wanted to, you could write the XML code yourself to create an SVG image, but most people choose to use an image editor. You shouldn’t use an editor to write your HTML code for you, but for creating SVG images it’s OK.
So as for which editor to use to create an SVG file, here’s an online SVG editor. It’s free and easy to use, so it should serve you well.
SVG Example
Remember how fun it was the first time you tweaked a web page? Now you can do it with images too.
We’re going to edit the HTML5 logo. Here’s the source code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<title>HTML5 Logo</title>
<polygon fill="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512"/>
<polygon fill="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894"/>
<polygon fill="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/>
<polygon fill="#EBEBEB" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399"/>
<path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"/>
<path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"/>
<path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"/>
<path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"/>
<polygon fill="#FFFFFF" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217"/>
<polygon fill="#FFFFFF" points="255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"/>
</svg>Now, by changing the fill attributes, we can re-color the HTML5 logo. By changing…
<polygon fill="#E44D26"… to…
<polygon fill="#AC3", and…
<polygon fill="#F16529"… to the very badass…
<polygon fill="#BADA55", we can change the orange logo to green!
So with SVG, not only is your file size smaller, but you can edit your graphics easily without needing to be a Photoshop wizard.
Watch Out If You’re On WordPress
So once you’ve got an SVG file created, you can embed it on your website just like a normal image:
<img src="html5logo.svg" width="100" height="100" />Unfortunately, if you’re on WordPress, uploading an SVG file into your media library is not so easy. SVG files are disallowed by default, but the good news is, you can get around that by following these instructions, or by installing this plugin.
Note that this only applies if you want to upload an SVG to your media library. If you’re fetching the image from an external source, it’ll display fine.
So now you should understand the basics of SVG (hopefully). Now go out and do some exploring of SVG of your own.
Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.
