7.3. Paths shortcuts

7.3.1 The Horizontal lineto and Vertical lineto Commands

Since horizontal and vertical lines are so common, a path may specify a horizontal line with an H command followed by an absolute x-coordinate or an h command followed by a relative x-coordinate. Similarly, a vertical line is specified with a V command followed by an absolute y-coordinate or a v command followed by a relative y-coordinate

Shortcut
Equivalent to
Effect
H 20
L 20 current_y
Draws a line to absolute location (20, current_y)
h 20
l 20 0
Draws a line to (current_x+20, current_y)
V 20
L current_x 20
Draws a line to absolute location (current_x, 10)
v 20
l 0 20
Draws a line to (current_x+20, current_y)

Example 1. Using shortcuts H and V

<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
   <!-- rectangle -->
   <path d="M 10 10 H 90  V 40  H 10 Z"
   style="stroke:red; fill:orange; fill-opacity:0.5"/>
   <!-- triangle -->
   <path d="M 10 60 H 90 V 90 Z"
   style="stroke:green; fill:green; fill-opacity:0.5"/>
</svg>

Example 2. Using shortcuts h and v

  <svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
   <!-- rectangle-->
   <path d="M 10 10 h 80 v 30 h -80 Z"
   style="stroke:red; fill:orange; fill-opacity:0.5"/>
   <!-- triangle -->
   <path d="M 10 60 h 80 v 30 Z"
   style="stroke:green; fill:green; fill-opacity:0.5"/>
</svg>

7.3.2 Notational Shortcuts for a Path

Different ways (shortcuts) of defining the same path

You can omit white spaces.

1 
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
   <path d="M 10 50 L 50 10 L 90 50 L 50 90 Z"
   style="stroke:green; fill:none"/>
</svg>
2 
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 50 L 50 10 90 50 50 90 Z"
    style="stroke:green; fill:none"/>
 </svg>
3 
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 50 50 10 90 50 50 90 Z"
    style="stroke:green; fill:none"/>
 </svg>
4 
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path d="m 10 50 l 40 -40 l 40 40 l -40 40 Z"
    style="stroke:green; fill:none"/>
 </svg>
5 
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path d="m 10 50 l 40 -40 40 40 -40 40 z"
    style="stroke:green; fill:none"/>
 </svg>
6 
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path d="m 10 50 -40 -40 40 40 -40 40 z"
    style="stroke:green; fill:none"/>
 </svg>