Getting Started With Scalable Vector Graphics (SVG)

As a web designer it's high time you knew how to implement SVG (Scalable Vector Graphics) into your websites. Let's now take a look at the basics of SVG, as well as more complex designs such as logos or icons.

What We'll be Creating

Resolution Independent

Recently at WWDC 2012 Apple announced the release of the new retina display MacBook Pro. Retina displays have a higher pixel density (220.5ppi) than that of normal screens or monitors and Apple claim that their retina technology pixel density is so high that the eye is unable to notice pixelation at a typical viewing distance. If you've witnessed a retina display firsthand then I'm sure you'll agree they do look stunning. However, these retina displays can start to cause problems for us web designers.

The problem occurs when images that were previously saved as 72ppi now start to look distorted on retina displays. The solution to this problem is still not 100% solved and designers are looking at new ways to try and get around this problem.

One possible solution (in some cases) is to use SVG. Why would you want to use SVG? SVG's are rendered as vectors and are therefore able to scale to whatever screen resolution we are viewing them on, whilst maintaining the sharpness and crystal quality that we intended when we first designed them.

This won't solve all problems; we aren't able to use SVG to render pixel based images such as .jpg's or png's (however, for that we can always use the canvas tag). When it comes to things like illustrated icons or logos then SVG proves extremely useful. Today I'm going to be showing you the basics of using SVG, as well as demonstrating how you can take your vectors that you have designed in Adobe Illustrator and implement them in your websites with ease.

SVG Summed Up in Ten Points

Before we jump in, I'm going to give you a quick overview of SVG:

SVG stands for Scalable Vector Graphics.
SVG is used to define vector graphics on the web.
XML format is used to define the vector graphics.
SVG's do not lose quality when they are resized or zoomed.
SVG's can be animated.
SVG integrates with the dom and can work alongside JavaScript and CSS.
SVG's can be indexed, meaning that if you have text in the SVG then search engines will pick this up.
SVG's can be printed at any resolution.
SVG is currently a W3C recommendation.
SVG works in all modern browsers, though has no support in IE 8 or below. A plugin can be used for anything below that.

Let's Create Some SVG Shapes

Lines

Let's start simple. We'll create a line. We do this by adding the following code to an HTML document.

1	<svg>
2	<line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:1"/></line>
3	</svg>

Firstly we use the 'svg' tag and then inside that we add the xml markup. Here's what we're defining:

X1: The start position of the line on the x-axis
Y1: The start position of the line on the y-axis
X2: The end position of the line on the x-axis
Y2: The end position of the line on the y-axis

So for instance, if we wanted to create a diagonal line then we could set the y2 attribute to 200 and this would bring the end point of the line down by 200, therefore creating a diagonal line. We can also apply some styles to this and we do that with CSS. Here we've used some inline styles, but you can use them in an external style sheet if you wish.

1	<svg>
2	<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(0,255,255);stroke-width:10"/></line>
3	</svg>

Circles

Circles can be created in a similar way to a line, with the exception of a few attributes. Here we will create a silver circle, with a black border and a radius of 50.

1
2	<svg>
3	<circle cx="60" cy="60" r="50" stroke="black" stroke-width="5" fill="silver"/>
4	</svg>

The cx and cy attributes are the ones where we can set the x and y coordinates of the middle of the circle. If we missed out these attributes then the circle's centre would be set to '0' which would result in the circle being cut off from the page. Finally, the attribute marked 'r' sets out the radius of the circle.

Rectangles

As you can see by now, creating shapes with SVG really is quite simple. Creating a rectangle is no exception.

1	<svg>
2	<rect width="200" height="100" style="fill:rgb(0,0,255);stroke-width:5"/></rect>
3	</svg>

In a similar way to setting the width and height of an element in CSS we do the same but using the svg 'rect' attributes.

Ellipse

Ellipse works in almost the same way as creating a circle, however, this time rather than just having one fixed radius, we have separate attributes for the x and y radius.

1	<svg>
2	<ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/></ellipse>
3	</svg>

Polygons

Polygons get a little bit more tricky (but only a little). We start by giving the polygon a fill color, a stroke of orange and a stroke width of 10. We then pass the point attributes to it. Each pair of coordinates defines the x and y coordinate of each corner point of the polygon. In this demonstration I've created a star.

1	<svg>
2	<polygon fill="green" stroke="orange" stroke-width="10" points="350, 75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161"/><polygon>
3	</svg>

Text

As mentioned earlier, SVG is great because when we include text the search engines are able to index it - unlike other rendering engines such as Flash.

This is how we add text:

1	<text x="0" y="34" style="font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:34; fill :#000; ">webdesigntuts+</text>

In the above code you can see that we have added the x and y coordinates. Then set a few CSS styles such as the font-family, weight, size and color.

Paths

Within the path tag we need to concentrate on the 'd' attribute. This 'd' attribute describes the path to be created. Each command within the 'd' attribute is one of the below command letters, followed by its parameters. The commands for the 'd' attribute are as follows:

M: moveto
L: lineto
H: horizontal lineto
V: vertical lineto
C: curveto
S: smooth curveto
Q: quadratic Bezier curve
T: smooth quadratic Bezier curveto
A: elliptical Arc
Z: closepath

Here's some example code:

1
2	<svg>
3	<path id="path1" d="M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428" style="fill:none;stroke:2;"></path>
4	</svg>

We can even set our text from above to follow that path like this:

  
<svg>  	
	<defs>  		
		<path id="path1" d="M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428"></path>  	
	</defs>  
	<text x="0" y="34" fill="black" style="font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:22; fill :#000; ">  	
		<textPath xlink:href="#path1">webdesigntuts+</textPath>  	
	</text>  
</svg>

We have basically defined the path in the 'defs' tag and given it an id of 'path1'. We can then apply this to the text using the 'textPath' attribute.

Creating a Scalable SVG Logo and Icon

Now that we've covered the basics of creating shapes using SVG, it's time to move on to something a little bit more complex. Fortunately for us though it doesn't have to be that complex, in fact it's actually very simple thanks to Adobe Illustrator. For those of you who don't know about Illustrator, it can be described as:

The industry's premier vector-drawing environment for creating graphics that scale across media.

Open up Illustrator and create your logo or icon. Most professional logos should have been created using vectors so you should be able to get them from your clients. If not, then you could try recreate them yourself. If you're not familiar with working in Illustrator then there's a wealth of information over at Vectortuts+

Once you have your logo or icon, go to "File > Save as", then select "SVG" from the "Save as type" dropdown. Give your file a name and then click "Save". The SVG options dialogue should then open. From there select "Show SVG code". This will then open the code in the browser. You simply need to copy between, and including, the svg tags into your html document and that's it. How simple was that?

You can also use Illustrator to create paths. Simply draw a line in Illustrator, grab the 'd' attribute data which you can use for a path as we described earlier. For example, the path that I created for the 'webdesigntuts+' text above was created in Illustrator and then exported into my document.

You can then style or position the SVG tag into your document using standard CSS methods. You can also wrap it in an anchor tag to create a link, or target it with JavaScript to add extra functionality.

Conclusion

It's now only a matter of time before retina and pixel density are part of every device and screen that we use and this will continue to be pushed forward with greater density in the future. By using SVG we are able to create scalable graphics that will render crystal clear and will be ready for the future as screen resolutions get higher. Of course, SVG's are not practical in every situation, but for vector based illustrations on the web it is most definitely the best way forward.