Tech and Media Labs
This site uses cookies to improve the user experience.




SVG line element

Jakob Jenkov
Last update: 2014-08-18

The SVG <line> element is used to draw lines inside of SVG images.

Video Version of Tutorial

If you prefer watching this tutorial as a video, here is a screencast for you:

SVG line Example

Here are a few simple SVG line examples:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <line x1="0"  y1="10" x2="0"   y2="100" style="stroke:#006600;"/>
        <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"/>
        <line x1="20" y1="10" x2="100" y2="50"  style="stroke:#006600;"/>
        <line x1="30" y1="10" x2="110" y2="10"  style="stroke:#006600;"/>
</svg>

Here is the resulting SVG image when rendered:

The line begins at the point set by the x1 and y1 attributes.

The line ends at the point set by the x2 and y2 attributes.

The style attribute sets the color and thickness of the stroke (the line). Style attributes are covered in more detail in a different text.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC