Learning SVG: a base

SVG has been around for a while, but so few have managed to learn to wield its powers! Learning SVG poses a number of problems to beginners, including sparse (until recently) documentation, application of some advanced mathematical techniques, and lack of support of SVG by a number of browser vendors.

Things are, however, changing drastically, and the benefits of utilising SVG, including optimisation, responsive design, and pure awesomeness are fast becoming apparent!

I strongly believe in having a solid base to make work efficient, learning easy, and most of all, fun! Below is a decent place to start when learning and experimenting with the glories of SVG.

An SVG base template

If you're learning SVG from the ground up, having quick access to a template can save you time from having to repeatedly recreate the same basic page structure.

With the advent of the HTML5 doctype, creating an SVG template is quick and painless:

Simple enough, a basic HTML document with an svg element. No need for any complicated SVG doctypes! A stylesheet is linked for all your styling needs.

The problem with a clean canvas, however, is that SVG uses a co-ordinate system to draw, place, and transform objects, so understanding exactly where you have placed your objects within your SVG canvas can become difficult without a visual reference. Enter the co-ordinate grid!

SVG co-ordinate grid with CSS

Placing a grid on your SVG canvas will help wonders in understanding positioning and transformations of the co-ordinates of objects on your canvas. CSS3 gradients make adding a grid a no-brainer.

svg { 
  background: linear-gradient(left, hsla(0,100%,50%,.1), hsla(0,100%,50%,.1) 1px, transparent 1px),
              linear-gradient(top, hsla(0,100%,50%,.1), hsla(0,100%,50%,.1) 1px, transparent 1px),
              linear-gradient(left, hsla(0,100%,0%,.03), hsla(0,100%,0%,.03) 1px, transparent 1px),
              linear-gradient(top, hsla(0,100%,0%,.03), hsla(0,100%,0%,.03) 1px, transparent 1px),
              linear-gradient(left, hsla(0,100%,0%,.0175), hsla(0,100%,0%,.0175) 1px, transparent 1px),
              linear-gradient(top, hsla(0,100%,0%,.0175), hsla(0,100%,0%,.0175) 1px, transparent 1px),
              linear-gradient(left, hsla(0,100%,0%,.0175), hsla(0,100%,0%,.0175) 1px, transparent 1px),
              linear-gradient(top, hsla(0,100%,0%,.0175), hsla(0,100%,0%,.0175) 1px, transparent 1px);
  background-size: 100px 100%,
                   100% 100px,
                   20px 100%,
                   100% 20px,
                   10px 100%,
                   100% 10px,
                   5px 100%,
                   100% 5px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

The idea is to highlight areas of the grid at 5px, 10px, 20px, and 100px (red lines) intervals. Adding new intervals is easy, as is changing the unit of measurement. Substituting the px unit for whichever unit you choose in the background-size:; property will create a new grid using that unit!

The 1px borders on the right and bottom simply assist in allowing the gradient to close the box (for widths and heights that are multiples of 100px) without adding additional pixels to the actual width of the svg canvas.

An Example

The preceding two rectangles are both created using the same markup:

The rectangle on the right, with the added grid visual cue, poses no problems when visualising its position in relation to the canvas!

Happy SVG'ing!