Search code examples
svgvectorpostscripteps

How do SVG/EPS (vectors) clip a path by another path?

I try to understand how SVG programs (like browsers) draw a shape by the given paths. I struggle to understand how a path is drawn and one clips part of a shape.

For example, consider the letter Å, and A with a top ring. The SVG code is like

<svg viewBox="0 0 1800 1800" xmlns="http://www.w3.org/2000/svg">
<path 
d="
M484 0l-42 137h-245l-47 -137h-147l237 664h161l234 -664h-151z
M426 822q0 -47 -24 -71.5t-80 -24.5q-104 0 -104 96q0 46 25.5 71t78.5 25q56 0 80 -25t24 -71z
M319 515h-1l-85 -264h169z
M374 822q0 51 -52 51q-50 0 -50 -51q0 -49 50 -49q52 0 52 49z
" />
</svg>

JSFIDDLE

  • First line: draws the body of an A.
  • Second line: draws a top circle.
  • Third line: clips a triangle from the first line.
  • Fourth line: clips a small circle from the second line.

My question is: how do SVG programs understand to draw a shape by the second line, but clip a shape from an existing shape?

Obviously the answer is: if the path is within another path, it clips otherwise it draws.

There are two reasons that I think this not the whole picture:

  1. It needs huge calculations to find if a path is within another path.
  2. The order of lines is not important (the clipping path does not necessarily come after the drawing path).

This is, of course, not limited to SVG, as other vector formats such as EPS does the same.

To add a pragmatic perspective, please read the question as: how can we parse (in any programming language) the above d element to find out which path is drawing (black) and which is clipping (white) out of the four paths given in the above SVG?

Solution

  • Broadly speaking, you don't parse the paths at all.

    Instead you 'scan convert' each path to a series of rectangles, at the current resolution. Each reactangle may be as little as one pixel high, and there may be more than one rectangle at a given y value.

    Do this for both the path to be filled or stroked and the path to apply as a clip, then intersect the series of rectangles. This is, obviously, a much simpler task. Then fill the rectangles.

    This does, of course, produce a result which is only correct at a given resolution. Change the resolution and you get a different series of rectangles. However it produces the correct output at a decent speed. Intersecting two arbitrary paths to produce a new arbitrary path is obviously a much more complex task, and for the purpose of drawing the result, not one we need to perform.