Coding - HTML5 - Design

Introduction to SVG (Scalable Vector Graphics)

If you want to use SVG (Scalable Vector Graphics) in your Web pages but don’t know where to start – it’s easier than you think. You can of course create SVG images using software programs such as Inkscape, but you can also author the SVG markup code yourself in any text editor. SVGs scale up and down to suit the user environment, making them well-suited to responsive designs. You can also control and interact with the content of an SVG using CSS and JavaScript. In this tutorial we will guide you through the process of authoring your first SVG within an HTML5 page.

Include an SVG Element in your Page

Create a new Web page using the following outline:

<!DOCTYPE html>
<style type="text/css">

We will style the SVG element using the style section. Add the SVG element to the body section of the page:

<svg version="1.1"
	width="500" height="400"

You will place the shapes and content of the SVG between these opening and closing tags. First, add the following to the style section in your page head:

body, html {background-color:#330000;}
svg {border:3px double #FFFFFF;}

Save and open your page in a Web browser – you should be able to see the bounds of the SVG by its border. You can actually style the elements inside the SVG using CSS code as well if you wish – as with all elements in a Web page, you can also use JavaScript to interact with the SVG content. As we add code to the SVG, keep saving and opening it in the browser to see the effect.

Add Shapes

We are going to build an SVG which depicts an eye, with a rectangle background plus circle shapes for the iris, pupil and light reflection. Each element in an SVG is added on top of the previous elements, so you start and the back and work forward. Inside the SVG element, first add a background rectangle:

<rect width="100%" height="100%" fill="#FFFFCC"/>

As you can see, the dimensions can be specified using relative values – since we have set fixed width and height on the SVG element itself, these percentage values will be relative to those. We set the fill color using a hexadecimal value, which you may be familiar with from CSS.

After the rectangle, add a circle for the iris:

<circle cx="250" cy="200" r="180" fill="blue"/>

Here we specify the center point of the circle shape within the SVG using the cx and cy values, which is in the center of the SVG element (which has a width of 500 pixels and a height of 400 pixels). We also specify the radius, so the shape will almost fill the SVG. You can use either relative or fixed dimension values throughout the shapes in your SVGs. Notice that we use a color name in this case rather than a HEX value.

The iris shape has been added after the rectangle, so it will appear in front of it when the page is loaded. After the iris shape, add two more circles, for the pupil and a reflection:

<circle cx="250" cy="200" r="70" fill="black" />
<circle cx="270" cy="180" r="20" fill="white" />

The circles get increasingly smaller as you can see from the radius values. Notice from the white circle cx and cy values that it is off-center. Save and open your page.


Fill Effects

Let’s make things a little more complex now. Rather than setting solid colors, we can define gradients within an SVG, then apply them to elements inside it. To do this, we need a defs section – add it after the opening svg tag, before the shapes:



Inside it, first define a linear gradient:

<linearGradient id="backGradient" x1="0" x2="1" y1="0" y2="0">
<stop offset="0%" stop-color="#FFEEAA"/>
<stop offset="30%" stop-color="#FFFFFF"/>
<stop offset="70%" stop-color="#FFFFFF"/>
<stop offset="100%" stop-color="#FFEEAA"/>

Take a moment to look at the details here. First, the opening tag specifies a linear gradient, then gives the gradient an ID – we will be able to refer to it using this value. The x1, x2, y1 and y2 values specify how the gradient should extend – in this case it will be applied horizontally, with the start point at the top-left and the end point at the top-right. Inside the gradient, we list the color stops. You could simply have two color stops, one at 0% and the other at 100%, in which case the gradient would spread evenly across the shape it was applied to. In this case we have a central white area, with a pale pink-yellow at either end.

Apply the gradient to the background rectangle by altering the markup you added earlier:

<rect width="100%" height="100%" fill="url(#backGradient)"/>

Note the syntax we use to refer to a gradient with its ID – open your page in the browser to see the gradient in the background.

Gradient Types

Now let’s add a couple of radial gradients for the iris and reflection. Inside the defs section, add one after the linear gradient:

<radialGradient id="irisGradient">
<stop offset="0%" stop-color="#006633"/>
<stop offset="100%" stop-color="#003366"/>

This time the gradient is going to spread evenly from the center to the outer edge of the circle. Apply the gradient by altering the blue circle:

<circle cx="250" cy="200" r="180" fill="url(#irisGradient)"/>

Open your page again to see the effect.


Now add a final gradient to the defs section for the reflection:

<radialGradient id="lightGradient" cx="0.75" cy="0.25" r="0.75">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/>
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>

This time we include cx, cy and r values to define the gradient circle, with a central point slightly to the right and up from the center of the shape using the gradient, and a radius three quarters of its width. We also define the opacity of the color-stops, so that the gradient will go from full color to complete transparency at its outer edge.

Apply the gradient by altering the white reflection circle:

<circle cx="270" cy="180" r="20" fill="url(#lightGradient)"/>

Open your page – you begin to see how you can achieve complex effects with SVG coding:


Stroke Effects

Finally, let’s look at some of the additional properties you can apply to SVG shapes. We have already looked at fills, so let’s try some stroke properties. Extend the code for the black circle we used for the pupil:

<circle cx="250" cy="200" r="70" fill="black" stroke="#121212" stroke-width="2px" stroke-opacity="0.5"/>

We apply a stroke by specifying its color, then add properties for the stroke width and opacity. Do the same for the iris:

<circle cx="250" cy="200" r="180" fill="url(#irisGradient)" stroke="#000033" stroke-width="3px" stroke-opacity="0.7"/>

View the page in a browser for the final effect:



When you look at an SVG, the amount of code may seem intimidating at first, but as you have seen in this tutorial, the basic ingredients are very simple, you just have to build your images up incrementally. We have barely scratched the surface of what’s possible with SVG in this tutorial, so see if you can enhance your image using some of the many other SVG elements. After that you can also try controlling the details of SVG element appearance and interaction with CSS and JavaScript code.

About the author

I'm a developer and technical writer - see for details. Follow me on Twitter @BrainDeadAir or email me at

Share this post

Leave a Comment

Subscribe To Our Newsletter