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
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.
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"/>
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 / element for the pinwheel. The id is assigned to the group inside the <defs> element though. Then we start drawing the stalk as a rectangle.
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.