html

SVG in HTML | Tutorial with Examples

HTML5 provides SVG (acronym of scalable vector graphics) technology to draw two-dimensional vector-based graphics on websites. Unlike other image formats (such as png, jpg, etc.) SVG doesn’t rely on the pixels instead it utilizes vector data.

World Wide Web Consortium (W3C) recommends SVG technology to draw graphics on a website. In HTML <svg> tag is used as a container for SVG graphics and using SVG we can draw paths, circles, rectangles, etc. This write-up will guide you on how to work with SVG images and present a detailed overview in the following aspects:

  • Basics of SVG
  • How to Draw SVG Line in HTML
  • How to Draw SVG Circle in HTML
  • How to Draw SVG Rectangle in HTML
  • How to Draw SVG Rounded Rectangle in HTML
  • How to Draw SVG Polygon in HTML
  • How to Draw SVG Eclipse HTML

So, let’s start!

Basics of SVG

Scalable Vector Graphics determine XML-based vector graphics/image formats for the web technologies. SVG files can be animated and we can integrate them with other W3C standards like DOM and XSL. SVG provides high-quality images i.e. if someone zooms in an SVG image, the quality of the image would not be affected.

How to Draw SVG Line in HTML

HTML <line> tag can be used within the <svg> tag to draw a line. The below-given example will let you understand how to draw an SVG line in HTML.

Example

The following piece of code draws a simple line:

<svg height="250" width="250">
  <line x1="20" y1="30" x2="100" y2="100" style="stroke: rgb(0, 0, 255)" />
SVG line not supported!
</svg>

Here in the above snippet, x1, y1 are the starting points of the line, and x2, y2 are the ending points of the line. While we specify the line’s color in the style attribute:

The output verifies that a blue-colored line is drawn according to the positions set by its attributes.

How to Draw SVG Circle in HTML

HTML <circle> tag can be used within the <svg> tag to draw a circle.

Example
The below-given snippet will let you guide to create an SVG circle:

<svg width="250" height="250">
        <circle cx="40" cy="50" r="30" stroke="blue" fill="grey" />
  SVG Circle not supported!
</svg>

We specified the value of the x-axis and y-axis as 40 and 50 respectively along with the radius of 30 pixels. Following will be the output:

Output verifies that the circle is drawn in blue color and filled with grey color.

How to Draw SVG Rectangle in HTML

The <rect> tag can be used within the <svg> tag to draw a rectangle.

Example

The following code snippet sets the width, height of the SVG rectangle as 250, 100 respectively and the rectangle will be filled with the grey color.

<svg width="250" height="100">
    <rect width="250" height="100" style="fill: grey; stroke-width: 5px; stroke: blue" />
</svg>

We specified the stroke color and stroke width as blue, and 5 respectively. Following will be the output:

How to Draw SVG Rounded Rectangle in HTML

We have to specify the rx, ry attributes in tag to draw rounded corners SVG rectangle.

Example

Let’s extend the previous example a little bit and set the value of rx, ry as 10px to draw the rounded corners of the SVG rectangle:

<svg width="300" height="300">
 <rect x="30" y="30" rx="30" ry="30" width="250" height="100" style="fill: grey; stroke-width: 5; stroke: blue" />
</svg>

The above code snippet displays the following output:

How to Draw SVG Polygon in HTML

HTML provides a <polygon> tag to draw a shape that has at least 3 sides. An attribute named “points” can be used to specify the x-axis and y-axis of all the sides.

Example

Let’s consider the following code snippet to understand how to set the x-axis and y-axis of a shape:

<svg height="210" width="500">
 <polygon points="40,20 80,40 50,60" style="fill: grey; stroke: blue; stroke: width 2px;" />
</svg>

<polygon> tag can be used to draw different shapes like an SVG star, or any other closed shape.

How to Draw SVG Eclipse HTML

<eclipse> tag is used to draw an eclipse shape, it is very much similar to the circle. The SVG circle has an equal horizontal and vertical radius but in the eclipse, the horizontal and vertical radius is different from each other.

Example

The below-given snippet demonstrates how to draw an eclipse in HTML where rx=“150” is the horizontal radius and ry=“75” is the vertical radius of eclipse:

<svg height="200" width="400">
 <ellipse cx="175" cy="100" rx="150" ry="75" style="fill: grey; stroke: blue; stroke-width:3" />
</svg>

The above code snippet shows the following result:

The blue-colored border/stroke and grey-filled eclipse shape verified that the <eclipse> tag worked properly.

Conclusion

This write-up demonstrated how to draw basic SVG images in HTML. Inside the <svg> tag various tags can be utilized to draw different SVG images like <line>, <circle>, <rect>, <polygon>, and <eclipse> tags can be used to draw the SVG lines, circles, rectangles, polygons, and eclipse shape respectively. Within these tags, different attributes like stroke and stroke-width can be used to set the shape’s border and width respectively.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.