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.

    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>.
    Previous Tutorial Next Tutorial