The last couple of weeks, I’ve been talking about SVG clipping paths and their attributes. So far in the series I’ve stuck to rectangles as the path in order to keep things simple, however you aren’t limited to using rectangles. In fact clipping paths become a lot more interesting when they aren’t rectangular or when you clip something more than a simple shape.
Tag: text
SVG Text On Path—Part 2
Creating SVG text along a path opens up some interesting and creative possibilities. Last week I showed you the <textPath> element and how to add a reference to a path you define. I also showed you the startOffset attribute so you can position the text somewhere along the path other than the start.
SVG Text On A Path — Part 1
In addition to laying out text in a straight line SVG includes the ability to have text laid out along any path you create. This opens up many possibilities for displaying text. It’s easy to set up. And the results are fun.
How To Work With The SVG Text Spacing Properties
Most of the time the default spacing between characters and words is perfectly fine, but when working with display type in headlines and subheads you may want to adjust the spacing in your text. SVG provides a way to do just that.
How To Use SVG Font Properties
I’ve said throughout this series that SVG text gains the best of both worlds in that it’s rendered as a graphic while still being selectable and searchable text.