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
andversion
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>