Skip to main content

SVG Line

SVG (Scalable Vector Graphics) is a markup language used for creating vector graphics. To create a line in SVG, you can use the <line> element.

Here's an example of a basic line in SVG:

<svg viewBox="0 0 100 100">
  <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2" />
</svg>

Let's break down the code:

  • The <svg> element defines the SVG container, and the viewBox attribute sets the size of the container.
  • The <line> element creates the line.
  • The x1 and y1 attributes specify the coordinates of the starting point of the line.
  • The x2 and y2 attributes specify the coordinates of the ending point of the line.
  • The stroke attribute sets the color of the line.
  • The stroke-width attribute sets the width of the line.

You can also add other attributes to the <line> element, such as stroke-dasharray to create a dashed line, or stroke-linecap to change the shape of the line ends.

A <line> element are used to draw a line. In SVG we are draw a line using two points. start point and end point . start point is pair of (x1-coordinate and y1-coordinates). similarly endpoint also have two coordinates (x2 & y2).

Syntax

  <line x1="start-point-x-coordinate" y1="start-point-y-coordinate"
        x1="end-point-x-coordinate" y1="end-point-y-coordinate">
      
  </line>

For example make basic SVG line.

SVG Line example
  <svg height="200" width="200"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
  <line x1="10" y1="130" x2="200" y2="30" stroke="green" stroke-width="5px" ></line>
</svg>

SVG stroke-linecap

SVG Line stroke linecap example
<svg height="170" width="90"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
  <line x1="10" y1="130" x2="10" y2="30" stroke="salmon" stroke-width="12px" stroke-linecap="butt"></line>
    <line x1="30" y1="130" x2="30" y2="30" stroke="#c79892" stroke-width="12px" stroke-linecap="square"></line>
    <line x1="50" y1="130" x2="50" y2="30" stroke="darkgray" stroke-width="12px" stroke-linecap="round"></line>
</svg>

SVG Line animation

Change line color animation.

SVG Line Color
<svg height="200" width="200"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
  <line x1="10" y1="30" x2="200" y2="130" stroke="green" stroke-width="5px" >
  <animate attributeName="stroke"
          values="green;blue;red;pink;orange;" begin="0s" dur="9s" repeatCount="indefinite"></animate>
  </line>
</svg>

Move line animation

SVG Move Line
<svg height="160" width="200"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >

  <line stroke-dasharray='6 2' x1="10" y1="30"  x2="200" y2="30" 
        stroke="#9c27b0" stroke-width="3px" >
  <animate attributeName="x1"
        from="30" to="200"   begin="0s" dur="9s" repeatCount="indefinite"></animate>
  </line>
    <line  x1="10" y1="30" stroke-dasharray='6 2' x2="200" y2="90" stroke="#3f51b58c" stroke-width="3px" >
  <animate attributeName="x2"
        from="200" to="10"   begin="0s" dur="9s" repeatCount="indefinite"></animate>
  <animate attributeName="x1"
        from="30" to="200"   begin="0s" dur="9s" repeatCount="indefinite"></animate>
  </line>
  
  <line stroke-dasharray='6 2'  x1="10" y1="90"  x2="200" y2="90" stroke="#9c27b0" stroke-width="3px" >
<animate attributeName="x2"
        from="200" to="10"   begin="0s" dur="9s" repeatCount="indefinite"></animate>
  </line>   
</svg>

Rotate line arround a circle

SVG rotate line
<svg width="150px" height="130px">
  <!-- center of rotation -->

 <circle cx="50" cy="50" fill="#ffeb3b" stroke="pink" r="40" stroke="blue" ></circle>
    <circle cx="50" cy="50" r="3" stroke="blue" fill="blue"></circle>
  <g>
    <line stroke="blue" x1="50" y1="50" x2="90" y2="50"></line>
    <polygon fill="blue" points="90 50, 85 45, 85 55"></polygon>
    <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 50 50"
            to="360 50 50"
            begin="4s"
            dur="10s"
            repeatCount="indefinite"></animateTransform>
  </g>
   <g transform="rotate(45, 50, 50)">
    <line stroke="blue" x1="50" y1="50" x2="90" y2="50"></line>
    <polygon fill="red" points="90 50, 85 45, 85 55"></polygon>
     <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 50 50"
            to="360 50 50"
            dur="8s"
            repeatCount="indefinite"></animateTransform>
  </g>
</svg>




Comment

Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.

New Comment