SVG takeaways

I started playing with SVG for another blog post I'm working on. I wanted to learn more about SVG, an XML application. Some of my takeaways:

Z ordering

Elements are drawn in the order they appear in the XML. So if you want element B to overlay element A, then write A earlier in XML, and write B later. Then B will be drawn after A, and lay on top of it (if they overlap), hiding bits of A if B isn't transparent.

Scaling

You define your own coordinate system, and X/Y coordinates are all relative to this drawing area, called the "view box". So if you declare the view box to have an X ranging 0-20 "units" and a Y ranging 0-100 "units", then your elements will use an X between 0 and 20 and a Y between 0 and 100.

Recall the "S" in "SVG" stands for scalable. So when I say "units", these are relative units in context of the view box, and so in the example, "50%" of the X coordinate is 10 "units". You don't write down "units" in the XML, just provide the X and Y ranges.

What size is this on screen? Your browser or device or PDF will render the SVG view box to fit, and scale your elements accordingly. This is great for diagrams and drawings. If you do nothing special to stretch or squeeze the view box, your elements will retain perspective and always fit the page.

Embedding SVG in HTML5, I found this produced nice standalone diagrams within the vertical flow of text (using the X/Y from the example). The "style" bit is important:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 20"
    width="80%" style="margin: auto; display: block">
    <!-- Write elements here -->
</svg>

Styling

Element attributes are consistent. So when I figured out that stroke="black" drew black lines, I could use the same attribute on any element to assign color. This was nice for learning the SVG language piecewise, picking up bits as I went along.

Fractional values are OK in several contexts. So when I wanted skinnier lines, I could write stroke-width="0.5".

A full example

Here's the SVG for that post I mentioned at start. I provide it without explanation; take your best guess what it's for!