SVG Clipping Path Examples — Multiple Shapes and Images

Last week I walked through a few examples using the path element and the text element as clipping paths. I also showed you how to clip elements inside a group as opposed to individually.

Continue reading

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

More About SVG Clipping Paths

Last week I showed you the very basics of SVG clipping paths. I mentioned the difference between clipping and masking and then worked through a simple example to show you SVG clipping paths in action. I closed by showing how to do the same thing using the CSS clip-path property.

Continue reading

SVG Clipping Paths

Last year I published several series (25 posts in total) on the subject of SVG. First was a series on the basics of creating SVG shapes, lines, and curves and adding fill colors and strokes to them. I followed that series with another with more intermediate topics such as reusing SVG code and using patterns and gradients to fill SVG graphics. I closed the year with a series on SVG Text.

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