SVG In 180 Seconds
--
The Hard Parts
This is a quick lesson/ skim-through for anyone struggling to understand SVG. You may feel like SVG is too difficult, but the truth is that most people really suck at breaking it down.
That’s not to say that I will be any better, but let me dream; I'm going to attempt to teach you the so-called hardest parts of SVG in roughly 180 seconds. Why? Because the rest is ridiculously common-sense. Let’s do this!
⌚ 00:00
d = draw, M = MoveTo absolutely. Edit in jsFiddle
<svg width=’155' height=’55'> <path d=’M0 0, 50 50, 90 10, 120 40, 140 20, 150 30' /></svg>
The path below has the exact same code as above except m = moveTo from the last position. Edit in jsFiddle
<svg width=’570' height=’170'><path d=’m0 0, 50 50, 90 10, 120 40, 140 20, 150 30' /></svg>
You now understand the simple co-ordinate system, custom shapes, the difference between lower case (relative / from last point) letters and upper case (absolute) letters. You’re half way there.
<svg></svg> is a viewport. We define the viewport width and height like so <svg width=’1000’ height=’600’ ></svg> the units are pixels, or percentage <svg width=’100%’ height=’50%’ ></svg> (must set html body height to 100%).
Inside the <svg></svg> interface is a metric system that is user-defined. Think of each unit as cells in a spreadsheet. We are using 8 x 4 in this jsFiddle example.
The viewBox just a box inside the viewport. It is imaginary.
Although, above we can actually see the viewbox’s “aspect ratio” represented by the 8 squares.
Try not to laugh ;-D: Miss ViewBox is inside Mr Viewport. Miss ViewBox has one job by default and that’s to preserve her aspect ratio, whilst consuming as much space as possible. Mr Viewport’s only job is to have a width and height.
We now understand the default behaviour of the last two values of the viewBox. What about the first two? They are min-x and min-y, but don’t dwell on the names.
The min values represent the x and y position of the viewBox, they do not distort the initial aspect ratio of the content. Try “0 2 8 4” and “4 0 8 4 ”, resize it to gain a better understanding. jsFiddle example.
⌚ 03:00 Fin!
Congratulations you now understand SVG. That’s pretty much every commonly used major concept within SVG with the exception of preserveAspectRatio.
You may find common usage of SVG to now be a little easier than even CSS with HTML
I decided to sightly oversimplify the min values & I decided not use too much terminology in the challenge because SVG names can be a bit confusing. But with that said here’s a few references to useful terms, breakdowns and resources:
- viewBox: min-x, min-y, width, height
- viewport: width=’?’ height=’?’
- You do not need to do this: <svg xmlns=”http://www.w3.org/2000/svg" version=”1.1" xmlns:xlink=”http://www.w3.org/1999/xlink"> in HTML5,
- d= draw attribute: M= moveTo, L= lineTo, C= curveTo, Z= close path,
- m= moveTo, l= lineTo, c= curveTo, z= close path,
- Commas are not required for pairs of co-ordinates in paths (I use them for readability),
- SVG = Scalable Vector Graphics, are “resolution independent” therefore unit-less. Within the viewBox you are not setting the resolution, you are setting the number of SVG units. When using CSS with SVG, 1 pixel represents 1 SVG unit/ user unit.
Some useful resources:
Mozilla Developer Network: SVG
Some videos, if you have the time to kill:
Tavmjong Bah: SVG 2 and the Artist — LGM 2014
Dmitry Baranovskiy — You Don’t Know SVG
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS
Please point out any silly mistakes
