SVG
SVG is a vector image format that I use a lot for diagrams and computer-based art.
Unlike bitmap images, where you specify a grid of coloured pixels, an SVG is made up of drawing instructions, like “draw a line from point A to point B”. This allows you to define complex shapes with a few lines of code, and they look crisp and sharp at any size.
3 articles
Two examples of hover styles on images
When I hover over an image, I can add a border to a link, or change the colours of an SVG icon.
Drawing a circular arc in an SVG
A Python function to help me draw circular arcs, as part of an upcoming project.
Drawing with triangular coordinates in SVG
Some code and trigonometry for drawing shapes that don’t fit neatly into a rectangular grid.
4 notes
How to embed an inline SVG in a CSS rule
Modern browsers allow you to embed the SVG almost as-is, with just a couple of characters that need escaping – no base64 required!
Pausing the animation of <svg> elements can affect child <svg> elements differently in different browsers
SVGs are only rendered on GitHub if you use an
<img>that points to another fileAnimate an attribute of an element with <animate>