Learning SVG: a base

learn-svg-base-template image

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:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
   
  <svg width="100" height="100">
    
  </svg>

  </body>
</html>

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;
}

IMPORTANT: Add the relevant vendor prefixes to each linear-gradient declaration, or you won't see your grid.

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:

<svg width="200" height="200">
  <rect x="20" y="60" width="100" height="50" />
</svg>

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!

No Responses

rss feed

This comment thread is closed. Got something important to say? contact us!