Basic shapes in SVG

Published on 2003-03-01 by John Collins. Socials: YouTube - X - Spotify - Amazon Music - Apple Podcast

Note: In order to view the examples used in this tutorial, you will need to have the Adobe SVG Viewer 3.0 installed.

SVG (Scalable Vector Graphics) is an XML application designed by the World Wide Web Consortium for the creation of vector graphics. The current specification, version 1.0, is not supported by any browser, hence the need for the Adobe plugin, but with the weight of the W3C behind it, SVG is likely to become a fully-fledged standard in the not to distant future with native browser support.

In this basic introduction to the format, I will show you how to set up an SVG document, how to draw some basic shapes, how to apply CSS to your vector creations, and finally how to embed an SVG document in a HTML file.

The Root Element

Every SVG document begins with the SVG root element, svg. This element has many different attributes, the most commonly used being the width and height attributes for setting the dimensions of the canvas. If no width and height is specified, the x and y axis are thought to be infinite.

Below is an example of an SVG document that draws a circle, notice the circle attributes: r for radius; cx for the x-coordinate of the centre of the circle; and cy for the y-coordinate of the centre.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="150" cy="150" r="100" fill="red"/>
</svg>

Example One: Circle

Shapes, Shapes and More Shapes.

Now, using the same document syntax as the previous example, here are some further examples of the various shapes that SVG supports:

Rectangle:

x and y coordinates are for the upper left corner of the rectangle.

<rect width="50" height="200" x="125" y="50" fill="green"/>

Example Two: Rectangle

Ellipse:

For the ellipse, we have a radius for the x-axis (rx), and one for the y-axis (ry).

<ellipse cx="150" cy="150" rx="130" ry="50" fill="blue"/>

Example Three: Ellipse

Line:

For the line, we simply supply the coordinates for each end point, (x1,y1) and (x2,y2).

<line x1="150" y1="150" x2="130" y2="50"/>

Example Four: Line

At this stage you might be forgiven for thinking that everything in SVG is coloured black, so next I will show you how CSS can be applied to liven things up a little.

Applying CSS to SVG

As SVG is under the guidance of the W3C and it is an XML technology, it is fully compatible with CSS. To demonstrate this, we will go back to our ellipse example before and add some colour and a border with the following modified line:

<ellipse cx="150" cy="150" rx="130" ry="50" style="fill:#AFBCC7; stroke:#646464; 
 stroke-width:3px;"/>

Example Five: CSS

The attribute 'fill' refers to the background colour, and 'stroke' refers to the border width and colour. There are many more CSS formatting methods that work with SVG, it is worth experimenting with those that you know.

Embedding an SVG Document in an HTML Page

To embed an SVG document in an HTML page, we use HTML's embed tag as the next example shows:

<html>
<head>
<title>Example Six: Embedding SVG</title>
</head>
<body>
 
<embed width="300" height="300" src="ex5.svg" align="left"
 pluginspage="http://www.adobe.com/svg/viewer/install/">
 
</body>
</html>

Example Six: Embedded SVG

Conclusion

As the simple demonstrations in this article show, SVG can produce quality graphics for your site with the minimum of coded effort. Previously, something as simple as a circle would have required a graphic file, as such a shape is not possible with CSS-2. What I find most exciting about SVG is that all of the objects you create within SVG will be accessible and therefore modifiable via JavaScript, which has got to be infinitely more preferable to working with Flash's propriety scripting language, ActionScript. I hope to write much more on SVG for this section of the site in the near future, until then, here's hoping that the next generation of web browsers offer full SVG support!

Updated 2020 : note that the above post is out-of-date, given this post was originally published in 2003, but is left here for archival purposes. Thankfully most modern browsers now support SVG natively, and the Adobe SVG plugin is no longer required or supported.