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

Getting started with SVG
The image above is a screenshot - we'll be using SVG not images..

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


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

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

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.

SVG - Creating a line
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(0,255,255);stroke-width:10"/></line>


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.

SVG - Creating a circle
	<circle cx="60" cy="60" r="50" stroke="black" stroke-width="5" fill="silver"/>

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.


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

SVG - Creating a rectangle
<rect width="200" height="100" style="fill:rgb(0,0,255);stroke-width:5"/></rect>

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 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.

SVG - Creating an ellipse
 <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/></ellipse>


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.

SVG - Creating a polygon star
	<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>


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:

SVG - Creating text
<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.


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
SVG - Creating paths

Here's some example code:

	<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>  

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

SVG - Creating text
		<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>  	
	<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>  	

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?

SVG - saving from Adobe Illustrator
SVG - Show code from Adobe Illustrator

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.


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.

Additional Resources

Related Posts
  • Web Design
    Case Studies
    How They Did It: CrowdpilotCrowdpilot thumb
    Crowdpilot's landing page shows off just how simple and awesome SVG is in combination with JavaScript and CSS animations. In this tutorial, you'll learn how to recreate Crowdpilot's diagonal message rotator and curtain, plus we'll talk a bit about "flat" design and what it means to design digitally native elements.Read More…
  • Web Design
    How to Animate Festive SVG Icons With CSSAnimated icons retina
    'Tis the season, so in this tutorial, I'll walk through creating some CSS animated, holiday-themed, SVG icons. There are some great icons on Iconmelon, a site which hosts many free vector icon sets for you to sink your teeth into. The icons I'm using come courtesy of designer Sam Jones. So grab yourself a cup of eggnog, pull your laptop up to the yule log, and let's gets started!Read More…
  • Design & Illustration
    Web Design
    SVG Files: From Illustrator to the WebSvg thumb retina
    Scalable Vector Graphics (SVG) is a vector image format which began life back in 1998. It was always developed with the web in mind, but only now has the web actually started to catch up. There's no denying its relevance today, so let's have a look at the basics of taking SVG from Illustrator to the web browser.Read More…
  • Web Design
    Manipulating SVG Icons With Simple CSSIconic retina1
    This article is the second in a three-part series showing the new approaches to iconography Iconic will be delivering. If you like what you see in this article, please consider backing Iconic on KickstarterRead More…
  • Web Design
    Making Web Icons SmarterIconic retina
    This article is the first in a three-part series showing the new approaches to iconography Iconic will be delivering. If you like what you see in this article, please consider backing Iconic on Kickstarter.Read More…
  • Web Design
    Responsive Design, Retina Images and Debugging for Google Maps APIGoogle map rwd retina
    This final part of the Google Maps API For Designers series rounds things up by looking at responsive design, retina images and a range of testing and debugging tools which make life a lot easier.  It gives a whistle-stop tour through a whole range of areas, which you can explore further in your own projects.Read More…