Bitmap images like PNG or AV1 are the standard on the web, but they lose detail during pixel upscaling. Alternatively, you can define geometric primitives in the SVG format. This is not perfect either, e.g. for fonts, but we have to start somewhere.
To start [tutorial], you need to imagine a canvas of some size, e.g. 100x100, so you know the size of things to define. Lets start with a rectangle, defined completely inline within this html document.
Already you can see that e.g. the stroke width is relative to the canvas size, so it will look good scaled up. Lets have a circle/ellipse next:
... and note that stroke width is added to both sides of the stroke line, so the lower circle has a bigger "inner fill". Next up are (poly)lines:
At least the polyline can also have a fill color, and is not a closed polygon by default. And line ends are rectangular, not rounded caps. Onwards with path, a command-based, super-powered version of polyline:
... which reads as "move (uppercase M: absolute) to (10, 90), then build a quadratic curve (lowercase q: relative) with control point at (+40, -80) and ending at (+70, -10), both relative to the last absolute point (10, 90)".
Line transition points can be adorned by marker [tutorial] elements.
Look at the polygon first:
a 10x7 triangle pointing to the right.
Now look at the marker:
A 10x7 rect where the reference point is 0
(at the left) and 3.5 (vertically in the middle)
of the 10x7 triangle.
The orientation can be auto for repeat and
auto-start-reverse for e.g. xy-axis.
On the polylines at the bottom,
note that some style attributes like stroke-width
carry over to the arrow head, while others like
stroke color do not.
Text is interesting because anchoring to a point is an issue.
... where the default anchoring is to the bottom left. If we rotate the text:
... rotation is clockwise, unlike in regular math. Since the size of the rendered text box is unknown, the most sensible rotation axis is probably at the lower left corner, the same coordinate as the text itself.
Use a shape multiple times with grouping [tutorial] [tricks].
A group has sub-shapes much like the
line markers seen previously.
Any style attributes defined in the defs
cannot be overwritten later, so rather be less specific here.
Below, use the group repeatedly with different
styles.
Note that scaling by half means specifying all attributes with a factor of two, e.g. the planned coordinate (70, 80) became (140, 160), and also the stroke width is halved if left unspecified.
SVGs are a nice and compact way of painting with geometric primitives, and particularly suited for programming. I hope you liked this first introduction, and happy painting!
EOF (Jun:2022)