(You get an extra half a stroke’s width on both sides of the shape – thus, an extra stroke width.) This means the visible width of the shape is actually the width of the shape plus the width of the stroke. Normally, the stroke is centred on the boundary of the shape: that is, half of the stroke is inside the shape, and half of it is outside. In this context, I’m thinking of the path that encloses an entire shape its outline. In vector graphics, a stroke is a visible line that you draw along a path – think of it like the stroke of a brush. This seems like something I might use again, and it helped me understand both features, so in this post I’m going to explain how I did it.

It was partly for fun, partly to play with some SVG features that I hadn’t used before: clipping and masking.Īs part of the app, I came up with a way to draw inner and outer strokes in SVG. A pair of interlocked hearts: one in rainbow colours on the left, one in trans pride colours on the right.Īt the weekend, I wrote a fun little app to make SVGs of interlocking rainbow hearts. Although it’s more effort, I can write much simpler images by hand than with an app, and it forces me to really understand how SVG works. I write most of my SVGs by hand, rather than using an app like Illustrator or Inkscape.

Simple diagrams work well as vector images, I can store them as text alongside source code, and they look sharp at any size. I make a lot of box-and-arrow diagrams, and I typically make them as SVGs.

Inkscape crop everything outside image