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

Java ForkJoinPool

P2P Networks Introduction




















Advertisements

High-Performance
Java Persistence
Close TOC
All Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Previous
Next tutorial in this tutorial trail
Next