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

Featured Videos




















Advertisements

High-Performance
Java Persistence
Close TOC

All Trails

Trail TOC

Page TOC

Previous

Next