SVG File Syntax

One of the best things about SVG files are that we can read and modify the file formats directly. This is impossible with other image formats.

SVG is based on XML and should look pretty familiar once you get pass all the numbers in the files.

SVG Elements
SVG Text
Styling SVG with CSS
SVG Special Properties for Styling
SVG Grouping with g
Advanced SVG Effects

SVG Elements

All of our SVG shapes will be contained in an SVG element. At it's barest state, it should include attributes for the version and xmlns (XML Namespace). These values will usually be generated for you so you don't need to memorize them.

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg">
   <!-- The actual SVG shapes and paths go here -->
</svg>

Basic SVG Shapes

We can create basic shapes by using the shape elements: circle, ellipse, rect, polygon, line, and polyline.

Circles and Ellipses

Circles can be drawn by inputting the x and y postion at the center of the circle and the radius.

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg">
	<circle cx="100" cy="100" r="50"></circle>
</svg>

Ellipses are similar except they include both an x and y radius.

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg">
	<ellipse cx="100" cy="100" rx="100" ry="50"></ellipse>
</svg>

Rectangles

You can create rectangles by setting the width and height as well as the x and y position.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<rect x="100" y="50" width="200" height="200"/>
</svg>

You can round off the corners of your rectangles by using the rx and ry attributes to set a corner radius.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<rect x="400" y="50" rx="10" ry="10" width="200" height="200"/>
</svg>

Lines

Lines can be drawn by inputting the x and y coordinates of both the start and endpoints of the line. You also have to include the stroke attribute for anything to show onscreen.

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg">
	<line x1="100" y1="25" x2="200" y2="150" stroke="black"></line>
</svg>

Example Files

See the example files of each of the basic shapes:

More Resources on Basic SVG Shapes

Complex SVG Shapes

There are a couple of other SVG shapes which are probably too complex to code by hand. They can however be reasonably understood after they've been generated.

Polylines

Polylines are groups of connected lines. They are drawn with a list of coordinates (points). Notice how both the stroke and fill attributes are also being set.

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg">
	<polyline points="50 50, 150 400, 250 100, 350 400, 450 50" stroke="black" fill="none" />
</svg>

Polygons

Polygons are essentially the same as polylines except that the last point will automatically connect to the first point. Notice how both the stroke and fill attributes are also being set.

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg">
	<polygon points="50 50, 150 400, 250 100, 350 400, 450 50" stroke="black" fill="none" />
</svg>

Paths

Paths are the most common and will usually result from using the Pen tool in Illustrator. The d attribute controls the shape. Beyond that, they're pretty much best edited in a graphical editor.

Here is a simple path:

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg">
	<path d="M224, 112 c 0.4, 169.1, -10.7, 487.1, 0, 574 c 101.7, -7.1, 232.5, 5.7, 256, -133 c -1.5, -148.7, -98.1, -151.4, -178, -172 c 87.1, -23.5, 143.3, -23.6, 162, -156 c -14.3, -102.3, -198.1, -154.5, -240, -112" stroke="black" fill="none"/>
</svg>

Example Files

See the example files of each of the complex shapes:

More Resources on Complex SVG Shapes

SVG Text

You can create text inside SVG files. This text will be selectable in the browser and accessible to screen readers.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<text>
	  <tspan x="0" y="100" style="font-weight:bold; font-size: 4em; fill: saddlebrown;">Bear</tspan>
	</text>
</svg>

You can also style SVG text using most of the regular CSS font properties.

Using Webfonts with SVG Text

You can use special webfonts with your SVG text just like you would normally use. Make sure that you properly link to the webfont in your html page. Use the CSS font-family property to specify which font to use.

Here's a simple example using the Changa One typeface from Google Web Fonts.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>SVG Webfont Example</title>

	<link href='https://fonts.googleapis.com/css?family=Changa+One' rel='stylesheet' type='text/css'>
</head>

<body>
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
		<style type="text/css">
		.bear {
			font-family: "Changa One", serif;
			font-weight:bold;
			font-size: 8em; 
			fill: saddlebrown;
		}
		</style>

		<text>
		  <tspan class="bear" x="0" y="100">Bear</tspan>
		</text>
	</svg>
</body>
</html>

Converting Text to Outlines

You can convert your SVG text to outlines using Illustrator. This might occasionally be necessary to avoid font issues. Keep in mind that when you do this you are actually just turning the text into a path element. Because of this, your text will no longer be accessible.

Example Files

See the example files for the text section:

More Resources on SVG Text

Styling SVG with CSS

SVG files can be styled in a variety of ways, including using CSS and many of the properties you already know.

Attributes

You can style elements using attributes. This works for small graphics but is not very scalable.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<text>
	  <tspan x="0" y="100" font-weight="bold" font-size="4em" fill="saddlebrown">Bear</tspan>
	</text>
</svg>

Inline Styles

Similar to Attributes but using CSS instead. Not very scalable.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<text>
	  <tspan x="0" y="100" style="font-weight:bold; font-size: 4em; fill: green;">Bear</tspan>
	</text>
</svg>

Style Element inside the SVG

You can actually include a style element inside your SVG code. This works similarly to embedded or internal styles. This is the most common approach. It is extensible while also still maintains the SVG styles with the SVG graphic itself.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<style type="text/css">
	.bear {
		font-weight:bold;
		font-size: 4em; 
		fill: blue;
	}
	</style>
	
	<text>
	  <tspan class="bear" x="0" y="100">Bear</tspan>
	</text>
</svg>

Regular Embedded or External Styles

You can style SVG elements just as you style anything else using either external or embedded styles. Keep in mind that this will only work if you include the actual SVG code in an HTML file. It will not work if you are simply linking to an SVG file. You'll also have to ensure that your SVG file has all the proper classes or ids for styling.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">		
	<text>
	  <tspan class="bear-embed" x="0" y="100">Bear</tspan>
	</text>
</svg>

Example Files

See the example files for the text section:

SVG Styling

More Resources on SVG Text

SVG and CSS - Cascading Style Sheets

SVG Special Properties for Styling

There are a number of special properties for some SVG elements which can be styled. For example, most shapes have a stroke and a fill property. There are also a variety of different stroke fill and marker properties.

For example, I could use the stroke-linecap property with a value of round to round out the edges of my bear's mouth.

There is a good description of each of the properties on Jenkov.com.

More Resources

SVG Grouping with `g`

You can group various SVG elements together using the g element. This is helpful for styling.

Take our bear as an example. By grouping each ear together, we can make the wiggle when we hover over the bear. The rest of the SVG document is omitted.

See Example

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="bear">

	<g id="left-ear">
		<circle id="left_outer_ear" class="primary-color" cx="31.4" cy="31.4" r="31.4"/>
		<circle id="left_inner_ear" class="secondary-color" cx="33.1" cy="33.1" r="15.8"/>
	</g>
	<g id="right-ear">
		<circle id="right_outer_ear" class="primary-color" cx="195.4" cy="31.4" r="31.4"/>
		<circle id="right_inner_ear" class="secondary-color" cx="191.1" cy="32.1" r="15.8"/>
	</g>

	<!-- The rest of the svg file -->
	
</svg>

Using the left-ear group I can apply a transform to the hover state to make the ear wiggle. Note I'm using the hover state on the entire svg graphic to make sure the ear wiggles when we mouse over anywhere in the graphic.

<style>	
	/* Animation */
	#bear:hover {
		cursor: pointer;
	}
	#bear #left-ear{
		transform: rotate(0deg) translate(0,0); /* Set the initial state */
	}
	#bear:hover #left-ear {
		transform: rotate(5deg) translate(5px, 5px);  /* The animated state */
	}
</style>

You could modify this example to work with touch screen devices using jQuery.

More Resources

Structuring, Grouping, and Referencing in SVG — The <g>, <use>, <defs> and <symbol> Elements

Advanced SVG Effects

With SVG files you can include some fairly sophisticated effects with gradients, patterns and filters.

SVG Gradients

Jenkov
MDM

SVG Patterns

MDM
Jenkov

You can get pretty crazy with SVG filters. Here are some resources to scratch the surface.

SVG File Syntax

SVG Elements

Basic SVG Shapes

Circles and Ellipses

Rectangles

Lines

Example Files

More Resources on Basic SVG Shapes

Complex SVG Shapes

Polylines

Polygons

Paths

Example Files

More Resources on Complex SVG Shapes

SVG Text

Using Webfonts with SVG Text

Converting Text to Outlines

Example Files

More Resources on SVG Text

Styling SVG with CSS

Attributes

Inline Styles

Style Element inside the SVG

Regular Embedded or External Styles

Example Files

More Resources on SVG Text

SVG Special Properties for Styling

More Resources

SVG Grouping with g

More Resources

Advanced SVG Effects

SVG Gradients

SVG Patterns

SVG Grouping with `g`