HTML5 SVG

The SVG stands for Scalable Vector Graphics.

What is SVG

The Scalable Vector Graphics (SVG) is an XML-based image format that is used to define two-dimensional vector based graphics for the Web. A vector image can be scaled up or down to any extent without losing the image quality.

SVG images and their behaviors are defined in XML files — that means SVG images can be created and edited with any text editor. There are several other advantages of using SVG over other image formats like JPEG, PNG, GIF etc.

  • SVG images can be searched, indexed, scripted, and compressed.
  • SVG images can be created and modifed using JavaScript in real time.
  • SVG images can be printed with high quality at any resolution.
  • SVG content can be animated using the built-in animation elements.
  • SVG images can contain hyperlinks to other documents.
 

Tip:The vector images are composed of a fixed set of shapes defined by math, while the bitmap or raster images are composed of a fixed set of dots called pixels.


Embedding SVG Into HTML Pages

You can embed SVG graphics directly into your document using the HTML5 <svg> element.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  •     <meta charset="UTF-8">
  •     <title>HTML5 SVG</title>
  • </head>
  • <body>
  •     <svg width="300" height="200">
  •         <text x="10" y="20" style="font-size:14px;">
  •             Your browser support SVG.
  •         </text>
  •         Sorry, your browser does not support SVG.
  •     </svg>
  • </body>
  • </html>
 

Note:All the major modern web browsers like Firefox, Chrome, Safari, Opera, and Internet Explorer 9+ support inline SVG rendering.


Drawing Path and Shapes with SVG

The following section will explain you how to draw basic vector-based paths and shapes on the web pages using the HTML5 <svg> element.

Drawing a Line

Line is the most basic path you can draw with SVG. The following example will show you how to create a straight line using the SVG <line> element:

  • <svg width="300" height="200">
  •     <line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" />
  • </svg>

The attributes x1, x2, y1 and y2 of the <line> element draw a line from (x1,y1) to (x2,y2).


Drawing a Rectangle

You can create simple rectangle and square shapes using the SVG <rect> element. The following example will show you how to create and style a rectactangular shape with SVG:

  • <svg width="300" height="200">
  •     <rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" />
  • </svg>

The attributes x and y of <rect> element defines the co-ordinates of the top-left corner of the rectangle. The attributes width and height specifies the width and height of the shape.


Drawing a Circle

You can create circle shapes using the SVG <circle> element. The following example will show you how to create and style a circular shape with SVG:

  • <svg width="300" height="200">
  •     <circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" />
  • </svg>

The attributes cx and cy of the <circle> element defines the co-ordinates of the center of the circle and the attribute r specifies the radius of the circle. If the attributes cx and cy are omitted or not specified, the center of the circle is set to (0,0).


Drawing Text with SVG

You can also draw text on web pages with SVG. The text in SVG is rendered as a graphic so you can apply all the graphic transformation to it but it is still acts like text — that means it can be selected and copied as text by the user.

  • <svg width="300" height="200">
  •     <text x="20" y="30" style="fill:purple; font-size:22px;">
  •         Welcome to Our Website!
  •     </text>
  •     <text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">
  •         Here you will find lots of useful information.
  •     </text>
  • </svg>

The attributes x and y of the <text> element defines the location of the top-left corner in absolute terms whereas the attributes dx and dy specifies the relative location.

You can also use the <tspan> element to reformat or reposition the span of text contained within a <text> element. Text contained in separate tspans, but inside the same text element can all be selected at once — when you click and drag to select the text. However the text in separate text elements can't be selected at the same time.

  • <svg width="300" height="200">
  •     <text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg);">
  •         <tspan style="fill:purple; font-size:22px;">
  •             Welcome to Our Website!
  •         </tspan>
  •         <tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">
  •             Here you will find lots of useful information.
  •         </tspan>
  •     </text>
  • </svg>

Differences Between SVG and Canvas

The HTML5 introduced the two graphical elements Canvas and SVG for creating rich graphics on the web, but they are fundamentally different. The following table summarizes some of the basic differences between these two elements, which will help you to understand how to use the Canvas and SVG elements effectively and appropriately.

SVG Canvas
Vector based (composed of shapes) Raster based (composed of pixel)
Multiple graphical elements, which become the part of the DOM Single HTML element similar to <img> in behavior
Modified through script and CSS Modified through script only
Give better performance with smaller number of objects or larger surface, or both Give better performance with smaller surface or larger number of objects, or both
Better scalability — can be printed with high quality at any resolution Poor scalability — not suitable for printing on higher resolution
 
Close

Your Feedback:

 

We would love to hear from you! Please say something.