SVG

Scalable Vector Graphics.

<svg> element

Many attributes of the <svg> element are not necessary in HTML.

  • The xmlns attribute is only necessary in SVG files.
  • The baseProfile and version attributes are deprecated.

Tips

To cut a hole in a path, draw the inner shape in the opposite direction to the outer shape.1

<svg width="100" height="100" viewBox="0 0 100 100"
     style="fill: purple;">
  <!-- Define two lines in one path.
       The first traces the shape of a square
       in a clockwise direction.
       The second traces the shape of a triangle
       inside the square
       in an anticlockwise direction. -->
  <path d="M 0 0 h100 v100 h-100 Z
           M 10 10 v80 h80 Z" />
</svg>