SVG Clipping Path Examples — Using Paths And Text

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.

Continue reading

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.

Continue reading

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.

Continue reading

SVG Basics—Creating Paths With Curve Commands

Last week I began a discussion about paths, mainly focusing on the different line commands you can use to draw lines and shapes. Today I want to continue the path discussion and talk about the different curve commands at your disposal.

Continue reading

SVG Basics—Creating Paths With Line Commands

A couple of weeks ago when talking about basic SVG shapes, I mentioned paths as a more general way to create any shape. Paths are more powerful and flexible than the basic shapes and they can be used to create any or all of them.

Continue reading