SVG HTML

Absolute Versus Relative Paths

This SVG example illustrates the difference between absolute versus relative paths. The example contains two coincident congruent paths: one given by absolute coordinates in black and a thinner one on top of it given by relative coordinates in green. This example connects seven different types of curves that define the path in the following order: one vertical, one horizontal, one linear, one arc, two quadratic portions, two cubic portions, and finally there is a line to close the loop via the "Z" specification.

Relative coordinates are given signalled by the use of lowercase letters to specify the path, as opposed to the uppercase letters that are used for absolute coordinates. Also, relative coordinates are given relative to the last point of the prior path section.

AbsoluteVersusRelativePath.svg

<svg width="675" height="275" xmlns="http://www.w3.org/2000/svg">
  <!-- Absolute coordinates -->
  <path d="M 50,25
    V 200
    H 200
    L 100,100 
    A 50,25 0 0 1 200,75
    Q 400,75 300,150
    T 410,210
    C 450,50 500,50 550,150
    S 600,250 650,25
    Z"
    fill="none" stroke="black" stroke-width="6"/>
  <!-- Relative coordinates -->
  <!-- These are relative to the last coordinate of -->
  <!-- the previous command. -->
  <path d="m 50,25
    v 175
    h 150
    l -100,-100
    a 50,25 0 0 1 100,-25
    q 200,0 100,75
    t 110,60
    c 40,-160 90,-160 140,-60
    s 50,100 100,-125
    z"
    fill="none" stroke="lime" stroke-width="2"/>
</svg>
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.