![]() We can achieve the latter with an SVG feature called clipping.Ī clip defines an outline, and only the area inside the outline is visible. You can get an inner stroke by drawing a double-width centred stroke, then discarding everything outside the boundary of the shape – or alternatively, only showing everything inside the shape. Right: A heart3 with a blue-red striped stroke.įor more complex shapes, it gets even harder (sometimes impossible) to combine different sizes in a way that doesn’t leave gaps. Middle: A blue heart3 with an outer3 stroke. Notice how the red stripe is much thicker than the blue stripe, and the width of the blue stripe is inconsistent: 90% size + 100% size → inconsistent stripes Left: A red heart3 with an inner3 stroke. It gives a consistent, even line around the whole shape, whereas combining different sizes gives a messier result. Using inner/outer strokes tends to look better than combining different sizes of the same shape. I wanted to replicate this effect in SVG, so that I create the stripes programatically, rather than fiddling around with a graphics program. For example, to draw four stripes, you could draw two outer strokes and two inner strokes. Right: A heart with a blue-red striped stroke.īy adding more strokes of different widths, you can create more complex stripes. Middle: A blue heart with an outer stroke. inner stroke + outer stroke → striped stroke Left: A red heart with an inner stroke. When I made my initial heart graphic in OmniGraffle, I combined inner and outer strokes to create something that looked like a striped stroke. If you’re interested, I found a Stack Overflow thread that links to several of the proposals – it also gave me some ideas about how I’d implement this myself. There have been several proposals to make stroke alignment part of the SVG spec, so you could write something like stroke-alignment="inner" to position your strokes, but so far none of them have been accepted. In some graphics programs, you can choose to draw an inner stroke (which puts the entire stroke inside the shape) or an outer stroke (which puts the entire stroke outside the shape): inner stroke centre stroke outer stroke Three examples of a rectangle with inner, centre, and outer strokes.Īlthough the square is the same size in all three cases, notice how the stroke alignment changes the size of the final shape. (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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |