Wikipedia:Reference desk/Archives/Computing/2023 July 12

Welcome to the Wikipedia Computing Reference Desk Archives
The page you are currently viewing is a transcluded archive page. While you can leave answers for any questions shown below, please ask new questions on one of the current reference desk pages.

July 12

nesting contours in SVG

Resolved

In outline fonts, you make a hole in e.g. 'O' by drawing the outer and inner boundaries in opposite senses. Can you do that in SVG, or do you have to make an invisible edge through the stroke so that the inner and outer boundaries are topologically connected? —Tamfang (talk) 22:21, 12 July 2023 (UTC)

I just tried it out, and it works the same way. If you want a reference, the introduction of the W3C SVG 1.1 recommendation says Compound paths (i.e., a path with multiple subpaths) are possible to allow effects such as "donut holes" in objects. It does not however explain how, or demonstrate. But yes, drawing an anticlockwise subpath inside a clockwise path creates a hole.

<svg width="300" height="300">

    <path fill="orange" d="M 10,10 210,10 110,183 z M 190,27 30,27 110,166 z" stroke="purple" stroke-width="3"/>

</svg>

This results in a triangle with an inner triangle which is a hole.

If you want a handy place to try it out, you could copy and paste that over the code for My first SVG. Indeed you can leave the yellow circle in place (but change the width and height to 300), and paste the triangle path after it inside the <svg>, and the circle will show through the triangular hole to demonstrate that it is really a hole.

See also the fill-rule property. Setting fill-rule="evenodd" inside <path> means that any interior closed subpath will create a hole, regardless of direction.  Card Zero  (talk) 07:13, 13 July 2023 (UTC)

Thanks. I did not know that a <path> can have disjoint pieces. —Tamfang (talk) 18:08, 15 July 2023 (UTC)