• Have Any Question?
  • contact@eitworld.com

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”.



Real Time Web Analytics