HTML SVG

  • SVG is a short form of Scalable Vector Graphics.
  • Like canvas, svg is also used to draw graphics in HTML.
  • <svg> tag is a container for SVG graphics.
  • <svg> tag is an element of HTML5.
  • You can draw circles, lines, rectangles, text and much more by using this html <svg> tag.
  • We will discuss about the whole HTML <svg> element in our upcoming "HTML SVG Tutorial" Here we are going to introduce you with the basics of HTML <svg> tag.
  • Here is the basic syntax of <svg> tag:
<svg width="200" height="200"> <circle cx="0" cy="100" r="30" stroke="blue" stroke-width="4" fill="orange" /> </svg>

HTML SVG : Draw a Circle


  • To draw a circle using html <svg> tag we have to use <circle> element .See the given program:
  • <!DOCTYPE html>
    <html>
    <body>
    <svg width="200" height="200">
    <circle cx="50" cy="100" r="30" stroke="blue" stroke-width="4" fill="orange" />
    </svg>
    </body>
    </html>


    To see live output : Visit Try Yourself Editor

    Output



  • "<svg width="200" height="200">" this statement defines the width and height of the SVG graphics.
  • "<circle cx="50" cy="100" r="30" stroke="blue" stroke-width="4" fill="orange" />" In this statement:
    • <circle> element is used to draw a circle.
    • cx and cy defines the center of the circle. If we remove these elements the circle's center is set to (0, 0).
    • r defines the radius of the circle.
    • The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 4px blue "border".
    • fill element fills the color inside the circle. We set the fill color to orange.

HTML SVG : Draw a Rectangle


  • To draw a rectangle using html <svg> we have to use <rect> element. See the given program:
  • <!DOCTYPE html>
    <html>
    <body>
    <svg width="300" height="200">
    <rect width="200" height="100" style="fill:orange;stroke-width:2;stroke:blue" />
    </svg>
    </body>
    </html>


    To see live output : Visit Try Yourself Editor

    Output





  • In the above program :
  • "<svg width="300" height="200">" this statement defines the width and height of the SVG graphics.
  • The style attribute is used to define CSS properties for the rectangle.
  • The CSS fill property defines the fill color of the rectangle.
  • The CSS stroke-width property defines the width of the border of the rectangle.
  • The CSS stroke property defines the color of the border of the rectangle.
  • HTML SVG : Draw a Line


    • To draw a line using html <svg> we have to use <line> element. See the given program:
    • <!DOCTYPE html>
      <html>
      <body>
      <svg height="310" width="500"> <line x1="100" y1="100" x2="300" y2="300" style="stroke:green;stroke-width:3" /> </svg>
      </body>
      </html>


      To see live output : Visit Try Yourself Editor

      Output





      In the above program :

    • "<svg width="310" height="500">" this statement defines the width and height of the SVG graphics.
    • 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.
    • The style attribute is used to define CSS properties for the line.
    • The CSS stroke-width property defines the width of line.
    • The CSS stroke property defines the color of line.

    HTML SVG : Draw a Ellipse


    • To draw a ellipse using html <svg> we can use <line> element. See the given program:
    • <!DOCTYPE html>
      <html>
      <body>
      <svg height="440" width="500">
      <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:orange;stroke:blue;stroke-width:3" />
      </svg>
      </body>
      </html>


      To see live output : Visit Try Yourself Editor

      Output





      In the above program :
    • "<svg width="440" height="500">" this statement defines the width and height of the SVG graphics.
    • The cx attribute defines the x coordinate of the center of the ellipse.
    • The cy attribute defines the y coordinate of the center of the ellipse.
    • The rx attribute defines the horizontal radius.
    • The ry attribute defines the vertical radius.
    • The style attribute is used to define CSS properties for the ellipse.
    • The CSS fill property defines the fill color of the ellipse.
    • The CSS stroke-width property defines the width of the border of the ellipse.
    • The CSS stroke property defines the color of the border of the ellipse.

    We will discuss about the detail of HTML <svg> element in our upcoming "HTML SVG Tutorial".