path

  • Revision slug: Web/SVG/Element/path
  • Revision title: path
  • Revision id: 484497
  • Created:
  • Creator: drewish
  • Is current revision? No
  • Comment

Revision Content

{{ SVGRefElem() }}
Getting started
This tutorial will help get you started using SVG paths.

Summary

The path element is the generic element to define a shape. All the basic shapes can be created with a path element.

Usage context

Categories Graphics element, Shape element
Permitted content Any number of the following elements, in any order:
Animation elements »
Descriptive elements »
Normative document SVG 1.1 (2nd Edition)

Example

<svg width="100%" height="100%" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg">

  <path d="M 100 100 L 300 100 L 200 300 z"
        fill="orange" stroke="black" stroke-width="3" />
</svg>

Live result:

{{EmbedLiveSample("Example",200,215)}}

Attributes

Global attributes

Specific attributes

  • {{ SVGAttr("d") }}
  • {{ SVGAttr("pathLength") }}

DOM_Interface

This element implements the SVGPathElement interface.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) IE Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop('1.8') }} {{ CompatIE('9.0') }} {{ CompatOpera('8.0') }} {{ CompatSafari('3.0.4') }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatAndroid('3.0') }} {{ CompatGeckoMobile('1.8') }} {{ CompatNo() }} {{ CompatVersionUnknown() }} {{ CompatSafari('3.0.4') }}

The chart is based on these sources.

See also

Revision Source

<div>
 {{ SVGRefElem() }}</div>
<div class="callout-box">
 <strong><a href="/en-US/docs/SVG/Tutorial/Paths" title="SVG/Tutorial/Paths">Getting started</a></strong><br />
 This tutorial will help get you started using SVG paths.</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>path</code> element is the generic element to define a shape. All the basic shapes can be created with a path element.</p>
<h2 id="Usage_context" name="Usage_context">Usage context</h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Categories</th>
   <td>Graphics element, Shape element</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td>Any number of the following elements, in any order:<br />
    <a href="/en-US/docs/SVG/Element#Animation" title="SVG/Attribute#Animation">Animation elements</a> »<br />
    <a href="/en-US/docs/SVG/Element#Descriptive" title="SVG/Attribute#Descriptive">Descriptive elements</a> »</td>
  </tr>
  <tr>
   <th scope="row">Normative document</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/paths.html" title="http://www.w3.org/TR/SVG/paths.html">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>
<h2 id="Example" name="Example">Example</h2>
<pre class="brush: html">
&lt;svg width="100%" height="100%" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;path d="M 100 100 L 300 100 L 200 300 z"
        fill="orange" stroke="black" stroke-width="3" /&gt;
&lt;/svg&gt;
</pre>
<p>Live result:</p>
<p>{{EmbedLiveSample("Example",200,215)}}</p>
<h2 id="Attributes" name="Attributes">Attributes</h2>
<h3 id="Global_attributes">Global attributes</h3>
<ul>
 <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">Core attributes</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent" title="SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#Presentation" title="SVG/Attribute#Presentation">Presentation attributes</a> »</li>
 <li>{{ SVGAttr("class") }}</li>
 <li>{{ SVGAttr("style") }}</li>
 <li>{{ SVGAttr("externalResourcesRequired") }}</li>
 <li>{{ SVGAttr("transform") }}</li>
</ul>
<h3 id="Specific_attributes" name="Specific_attributes">Specific attributes</h3>
<ul>
 <li>{{ SVGAttr("d") }}</li>
 <li>{{ SVGAttr("pathLength") }}</li>
</ul>
<h2 id="DOM_Interface" name="DOM_Interface">DOM_Interface</h2>
<p>This element implements the <code><a href="/en-US/docs/DOM/SVGPathElement" title="DOM/SVGPathElement">SVGPathElement</a></code> interface.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>IE</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>1.0</td>
    <td>{{ CompatGeckoDesktop('1.8') }}</td>
    <td>{{ CompatIE('9.0') }}</td>
    <td>{{ CompatOpera('8.0') }}</td>
    <td>{{ CompatSafari('3.0.4') }}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{ CompatAndroid('3.0') }}</td>
    <td>{{ CompatGeckoMobile('1.8') }}</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatSafari('3.0.4') }}</td>
   </tr>
  </tbody>
 </table>
</div>
<p>The chart is based on <a href="/en-US/docs/SVG/Compatibility_sources" title="SVG/Compatibility sources">these sources</a>.</p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
 <li>{{ SVGElement("circle") }}</li>
 <li>{{ SVGElement("ellipse") }}</li>
 <li>{{ SVGElement("line") }}</li>
 <li>{{ SVGElement("polygon") }}</li>
 <li>{{ SVGElement("polyline") }}</li>
 <li>{{ SVGElement("rect") }}</li>
 <li><a href="/en-US/docs/SVG/Tutorial/Paths" title="SVG/Tutorial/Paths">The MDN SVG "Getting Started" tutorial : Path</a></li>
</ul>
Revert to this revision