SVG Line

–

• Home
• HTML
• JavaScript
• CSS
• Vue
• React
• Python3
• Java
• C
• C++
• C#
• AI
• Go
• SQL
• Linux
• VS Code
• Bootstrap
• Git
• Local Bookmarks

• Home
• HTML
• CSS
• JS
• Local Bookmarks
• Search

• Vue3 Tutorial
• Vue2 Tutorial

• Bootstrap3
• Bootstrap4
• Bootstrap5

• Machine Learning
• PyTorch
• TensorFlow
• Sklearn
• NLP
• AI Agent
• Ollama
• Coding Plan

SVG Tutorial

SVG TutorialSVG IntroductionSVG VSCodeSVG Basic SyntaxSVG in HTMLSVG RectangleSVG CircleSVG EllipseSVG LineSVG PolygonSVG PolylineSVG PathSVG TextSVG Stroke AttributesSVG FiltersSVG Blur Effect – Gaussian BlurSVG ShadowSVG Gradient – LinearSVG Gradient – RadialSVG ExamplesSVG Reference Manual

SVG Ellipse

SVG Polygon

SVG Line <line>

The <line> element in SVG is used to draw straight lines and is one of the commonly used basic shapes in SVG.

Using the <line> element, you can create a straight line between two points and control the line's position, length, and style by setting attributes.

Basic Syntax

<line x1="x1-coordinate" y1="y1-coordinate" x2="x2-coordinate" y2="y2-coordinate" stroke="stroke-color" stroke-width="width" />

Attribute Explanation:

• The x1 and y1 attributes define the starting coordinates of the line.
• The x2 and y2 attributes define the ending coordinates of the line.
• The stroke attribute defines the color of the line.
• The stroke-width attribute defines the width of the line.

The following code draws a black line with a stroke width of 2 pixels, starting at coordinate (50, 50) and ending at (150, 150).

Example

Below is the SVG code:

Example

Try it yourself »

Click to view: View SVG File.

• The x1 attribute defines the start of the line on the x-axis
• The y1 attribute defines the start of the line on the y-axis
• The x2 attribute defines the end of the line on the x-axis
• The y2 attribute defines the end of the line on the y-axis