Your Search Results

    <path>

    Getting started
    This tutorial will help get you started using SVG paths.

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

    Usage context

    CategoriesGraphics element, Shape element
    Permitted contentAny number of the following elements, in any order:
    Animation elements
    Descriptive elements

    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:

    Attributes

    Global attributes

    Specific attributes

    DOM_Interface

    This element implements the SVGPathElement interface.

    Specifications

    Specification Status Comment
    Scalable Vector Graphics (SVG) 2
    The definition of '<path>' in that specification.    		 Working Draft  
    Scalable Vector Graphics (SVG) 1.1 (Second Edition)
    The definition of '<path>' in that specification.    		 Recommendation Initial definition

    Browser compatibility

    Feature Chrome Firefox (Gecko) IE Opera Safari
    Basic support 1.0 1.5 (1.8) 9.0 8.0 3.0.4
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 3.0 1.0 (1.8) No support (Yes) 3.0.4

    The chart is based on these sources.

    See also

    Document Tags and Contributors

    Tags: 
     Contributors to this page: Sebastianz, kscarfone, drewish, Jeremie, mindrones, ethertank, Manuel_Strehl
     Last updated by: Sebastianz,