Tutorials About

SVG line element

Last updated: 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=""

    <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;"/>

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.

Connect with me: Newsletter - Get all my free tips!

Close TOC
This website uses cookies to improve the user experience and gather statistics. Our advertisers use cookies too (3rd party cookies), to provide more relevant ads. Continued use of this website implies that you accept the use of cookies on this website. We do not share our cookies with our advertisers, and our advertisers do not share cookies with us.