HTML SVG Graphics

By | March 2, 2021
HTML SVG Graphics

HTML <svg> element stands for Scalable Vector Graphics. And this element allows us to create vector graphic using only HTML element. It uses XML for its graphic designing and easily creates basic graphics like a box, circles, text, and graphic images.

It may be possible that the old version of the browser does not support <svg> so make sure that you have the latest version.

Vamware

SVG Examples

SVG Container

Like the <canvas> element <svg> also define a rectangular or square container and the graphic design in that container.

<svg width="100" height="200" style="border: solid red"> </svg>

Preview

Draw a Circle

To draw a circle, we will use the <circle> element within the <svg> Element.

<svg width="200" height="200" style="border: solid red">
     <circle cx="100" cy="100" r="80" 
     stroke="blue" stroke-width="4" fill="orange" />
</svg>

Draw a Rectangle

To draw a rectangle, we can use the <rect> element. Make sure that the width and height of the box must be equal or less than <svg> height and width.

Example

<svg width="400" height="200" style="border: solid red">
      <rect width="400" height="200" 
       style="fill:red; 
       stroke-width:10;stroke:rgb(0,100,0)" />
</svg>

Draw a Rectangle with Rounded Edges

To make the edges rounded we use the rx and ry attributes within the <rect> element.

Example

<svg width="400" height="180">
   <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
   style="fill:blue;stroke:black;stroke-width:4;" />
</svg>

Similar to this, we can design many other simple graphics using only HTML and CSS.

Canvas Vs SVG

Both canvas and svg can be used to design simple graphics, but both are used in a different scenario. SVG can describe 2d graphic in XML format whereas canvas uses JavaScript.

Canvas SVG
It uses JavaScript for designing graphics. It uses XML format for graphics designing.
It does not support event handler. JavaScript provides event-handler for every SVG DOM element.
It does not provide a good rendering quality. Its rendering quality is very high, and especially udder for large object rendering.
Its graphic output can be saved as an Image. The graphic can not be saved as an image.
It is best suited for online game graphics. Not suited for game graphic because of the slow rendering process.

Summary

  • SVG stand for scalable vector graphics.
  • It uses XML formating for graphic designing.
  • The end graphic result can not be saved as an image.
  • <svg> provide high quality graphics.
  • Google maps use <svg> over <canvas>.

Leave a Reply

Your email address will not be published. Required fields are marked *