Posted on: 13 May 2014
With increasing browser support, SVG (Scalable Vector Graphics) is finally becoming a valid option for creating images that can scale without loss across multiple viewport sizes.
There are a number of areas where SVG can be useful, for example:
- Icons that can be styled with css
- Generated graphs and other diagrams like pie charts, columns charts
- Animated images
In this workshop we will look at the anatomy of svg images and see an example of how they can be manipulated.
1. Anatomy of an SVG element
In its most basic form the svg element only requires a link to the svg namespace and the version number. You can also add other namespaces. An additional namespace that makes sense to include is the xlink namespace.
Let’s start creating an svg element.
Shapes in an svg element are being drawn on a grid that spans from the top left to bottom right. A y coordinate of 200 means that the point is drawn 200 units (in most cases pixels) from the top down.
Let’s start playing with the line shape.
2. More Shapes
This is an example from the Mozilla Developer Network. Note that in an svg file you normally have an xml declaration before the svg element.
You can try out more shapes here: http://scriptdraw.com/
The most powerful shape element is <path>. It can be used to draw all the other elements. It has an attribute D, which contains a series of commands and parameters to draw a line. For example M 10 20 means “move to point 10 20”, C stands for Cubic Bezier curve, and Q for quadratic one. Z is used for closing a shape.
For example <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
There is a detailed section on the path element on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
3. Combining and reusing shapes
We will now start creating an SVG image, which we can later animate. We will define a shape, group various elements, use them in different places in the document, and manipulate them, too.
The <defs> element is used to define and element for later reuse. This could also be a gradient or pattern. The <g> element groups elements together. By assigning an id to the group element, it can be treated as a whole.
Let’s start creating a pinwheel:
First, our svg element with a title inside. It’s all markup!
We are using a /
We are drawing one ‘petal’ of the pinwheel as two path shapes and put them in a group called “p”:
To reuse the petal, we use the <use> element. The element that you want to reference is included as a link. Make sure that the href attribute is prefixed by the xlink namespace. The namespace also needs to be declared in the root element!
We also need to rotate the three remaining petals at the same time. For that we use the 'transform' attribute. Finally, we wrap the whole wheel in a group withe the id “wheel”.
Please note: Up to here, it worked to have the svg element inline in the web page. To make the rotation visible, this is not sufficient anymore. The element needs to be embedded with an <embed> tag or linked to within an iframe.
SMIL stands for Synchronized Multimedia Integration Language. Animation is achieved by adding an SVG element like <animate> inside the SVG element to animate. For detailed documentation check MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL
Or an unscaled version here: Big pinwheel
6. More things to do with SVG
SVG Primer by the W3C: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/SVG
SVG Tutorial: http://tutorials.jenkov.com/svg/index.html
Animated Icons with snap.svg: http://tympanus.net/Development/AnimatedSVGIcons/
Icons with all the power of SVG: http://useiconic.com/