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="75" cy="75" 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="75" 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="0" y="0" width="250" 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="0" y="0" 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
- SVG Tutorial: Texts (MDM)
- SVG text element (Jenkov)
- W3C Spec: 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:
More Resources on SVG Text
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.
<g id="bear_snout">
<path id="snout" class="st2" d="M169.3,131.2c0,34.4-24.7,62.3-55.1,62.3s-55.1-27.9-55.1-62.3s24.1-43.6,54.5-43.6
S169.3,96.8,169.3,131.2z"/>
<ellipse id="nose" class="st1" cx="113.9" cy="119.3" rx="26.4" ry="10.4"/>
<path id="mouth" class="st3" stroke-linecap="round" d="M149.1,148c-20.2,19.2-52,18.4-71.2-1.8"/>
</g><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 226.9 203.3" style="enable-background:new 0 0 226.9 203.3;" xml:space="preserve">
<style type="text/css">
.st0{fill:#8C6239;}
.st1{fill:#42210B;}
.st2{fill:#C69C6D;}
.st3{fill:none;stroke:#000000;stroke-width:6;stroke-miterlimit:10;}
#mouth {
stroke-linecap: round;
}
</style>
<g id="bear_snout">
<path id="snout" class="st2" d="M169.3,131.2c0,34.4-24.7,62.3-55.1,62.3s-55.1-27.9-55.1-62.3s24.1-43.6,54.5-43.6
S169.3,96.8,169.3,131.2z"/>
<ellipse id="nose" class="st1" cx="113.9" cy="119.3" rx="26.4" ry="10.4"/>
<path id="mouth" class="st3" d="M149.1,148c-20.2,19.2-52,18.4-71.2-1.8"/>
</g>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 them wiggle when we hover over the bear. The rest of the SVG document is omitted in the example below for brevity.
<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
Advanced SVG Effects
With SVG files you can include some fairly sophisticated effects with gradients, patterns and filters.SVG Gradients
SVG Patterns
You can get pretty crazy with SVG filters. Here are some resources to scratch the surface.