SVG for Frontend Engineers

Feedback: MartinRinehart at gmail dot com

SVG Enabled?

You should see a six-pointed star above. A blue triangle points up; a symmetric yellow triangle points down. This is drawn with SVG. If you cannot see it, try a more modern browser.

Getting Started

Use your browser's View Source option. Copy the div, id "svg", into your own HTML page. Also copy the CSS from the head.

Next, copy the <svg ...> and copy or type an </svg> tag. Yes, you will want to include the obeisance demanded by the W3C's arrant pedantry as some browsers insist on it (to "conform to the standard" or so they say).

Your First SVG

Now draw a line:

This will draw a line from x1,y1 to x2,y2. The coordinates are relative to the top-left of the SVG area. If you surrounded the SVG with a div, display:inline-block; width:100%; height:100% your coordinates will also be relative to the div. (The line will be one-pixel wide. You can use stroke-width='5' if you want a five-pixel line.)

Don't forget those silly XML closing slashes. (Remember Churchill re not ending sentences with prepositions? "This is arrant pedantry up with which I will not put!")

The top line of the down-pointing triangle is a good one to start with. Copy the proportions from the illustration. Use a size that suits yourself. Adjust the height and width of the <svg> tag to suit. Your work will be easier if your line's midpoint is a nice, round number.

Reload your page in your browser. You should have a line.

(No line? Did you forget the stroke=...? Is the line between the <svg> and </svg> tags?)

Do Your Math!

I assume that you got pretty good grades in high school math classes. You may, however, have left most of that math in some dusty corner of the mental attic. So here are the secrets.

The triangles are identical, save for a rotation.
The base of one triangle is half way between the star's center and the top (or bottom).
The height of each triangle is, therefore, 3⁄4 of the diameter of the figure.
The length of each side of each triangle is (sqrt(3)/2)—0.866—times the diameter.
The distance between the bases of the two triangles is two-thirds the diameter.

So far, so good? Add two more lines to complete the triangle.

Strokes and Fills

A "stroke" in SVG is a line around a figure. With some figures, stroke='black' is implied. With some you won't see a thing if you don't specify the color. So the smart idea is to always include stroke='black' (or any other HTML-valid color).

The "fill" is, as you might guess, the color that will be painted in the center of the figure.

Attributes let you specify opacity, too. fill-opacity='0.25' mutes the yellow color in the sample. A stroke-opacity='...' does the same job for strokes.

Polygons to the Rescue!

Lines are, at best, a nuisance to type. Add a polygon for the second triangle. A polygon is a set of points that will be connected. Omit the closing connection and SVG will automatically connect the start and the end points. (Remember, this is XML. Quoting the attribute values is arrant pendantry up with which you must put. Sorry.)

So try one of these:

Your starting points must be correctly spaced relative to your initial line. The bases, if they are "b-units" long must be sqrt(3)/4 "b-units" apart.

Now, replace those three initial lines with a polygon, fill it with a nice color and enjoy your artwork. (Adjust the opacity to balance stronger/weaker colors.)

# # #