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 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
<!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
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
<svg width="300" height="200"> <line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" /> </svg>
y2 of the
<line> element draw a line from
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>
<rect> element defines the co-ordinates of the top-left corner of the rectangle. The attributes
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>
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
cy are omitted or not specified, the center of the circle is set to
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>
y of the
<text> element defines the location of the top-left corner in absolute terms whereas the attributes
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.
|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
|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|