Clipping Paths 1


Clipping paths are a layer effect, which can be used to produce images in non-standard and custom shapes. A photo (or SVG object) can be put into (clipped) a triangular shape. Or any other shape you can imagine. The way it does this also reduces rendering speed and typing. Most browsers are able to render the commands correctly. I have tested Firefox and Safari successfully.

The top illustration of a typical Venn diagram is produced traditionally by creating 2 circles and offsetting by some amount. This is slightly more overhead. On a larger scale, or when using JavaScirpt, this may make a difference in rendering speed.

<circle cx=200 cy=125 r=50 fill="blue"/>
<circle cx=200 cy=125 r=50 fill="red"/>

In the bottom diagram, we use a clipping path to produce 2 circles, which are slightly separated. However we only drew 1 circle, but referred to it twice with different attributes.

<defs> <circle id="circle" cx=250 cy=350 r="100" />
</defs>
<use xlink:href="#circle" x="-50" y="0" fill="blue"/>
<use xlink:href="#circle" x="+50" y="0" fill="red"/>

While both illustrations may look the same, the bottom one (using clipping) uses less resources, and allows for more control.

Let's see how this works ...