Paths

SVG paths are outlines of shapes. They can be filled in, stroked (a line is drawn along the path), or used as clipping paths (cutouts of other shapes).Windows Internet Explorer 9 introduced support for SVG paths, as specified in the Paths module of the SVG 1.1 (Second Edition) specification. This includes support for the path element, as well as the d property, which enables parsing of path data.

The Paths module’s associated DOM interfaces are also supported.

The path element enables many different developer scenarios. Following are just a few simple examples. After the markup is a screenshot of the corresponding result in Internet Explorer 9.

Closed Shape with Straight Lines and a Fill

<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

 <path d="M 20 20 L 60 20 L 40 60 z"
    fill="green"
    fill-opacity="0.5"
    stroke="red"
    stroke-width="3" />

 </svg>

Bezier Path (Quadratic)

<path d="M20,30 Q40,50 60,30 T100,30"
    fill="none"
    stroke="red"
    stroke-opacity="0.2"
    stroke-width="3" />

Line with Arc

<path d="M30,60 l 50,0 a25,45 0 0,1 50,0 l 50,0"
    fill="green"
    stroke="blue"
    stroke-width="4" />aa700834

Related topics

SVG