Tutorial by Examples

Draw a diagonal blue line using the L path command

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M 10,10 L 100,50" stroke="blue" stroke-width="5" /> </svg> Result:

SVG • Paths

Draw a horizontal orange line using the H drawing command

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M 10,10 H 200" stroke="orange" stroke-width="5" /> </svg> Result:

SVG • Paths

Draw a red cross using l (relative line) path commands

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M 10,10 l 90,90 M 100,10 l -90,90" stroke="red" stroke-width="10" /> </svg> Result:

SVG • Paths

Draw a vertical green line using the V path command

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M 10,10 V 200" stroke="green" stroke-width="5" /> </svg> Result:

SVG • Paths

Page 1 of 1

1

Get monthly updates about new articles, cheatsheets, and tricks.