"SVG" stands for "Scalable Vector Graphics".
SVG is a part of the vector based family of graphics. It is completely different from raster based graphics. The most common raster-based formats used on the web today are JPEG, GIF, and PNG. SVG is a W3C recommendation. SVG graphics do NOT lose any quality if they are zoomed or resized.
Generally SVG contains the following set of basic shapes:
- rectangles (including optional rounded corners)
- circles
- ellipses
- straight lines
- polylines
- polygons
Comparison Of SVG and Canvas
| SVG |
Canvas |
| Object Model-based (SVG elements are similar to HTML elements) |
Pixel-based (the canvas is essentially an image element with a drawing API) |
| Multiple graphical elements that become part of the Document Object Model (DOM) |
Single HTML element similar to <img> in behavior |
| Visual presentation created with markup and modified by CSS or programmatically through script |
Visual presentation created and modified programmatically through script |
| Event model/user interaction is object-based at the level of primitive graphic elements, suchg as lines, rectangles and paths |
Event model/user interaction is coarse, at the canvas element only; interactions must be manually programmed from mouse coordinates |
| SVG markup and object model directly support accessibility |
The API does not support accessibility; markup-based techniques must be used in addition to canvas |
Syntax
The SVG uses the following Syntax:
<svg xmlns="http://www.w3.org/2000/svg">
.....................
.....................
</svg>
Browsers Support
It is supported in all major browsers.
HTML5 Text on the arched path
When you use the textpath element, the actual text to be displayed is between an opening and a closing textpath element displaying text along an arched path.
Example
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>text arched path</title>
</head>
<body>
<h3>Implementation of text on arched path using SVG</h3>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 150,0"/>
</defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">I am an employee of MCN Solutions</textPath>
</text>
</svg>
</body>
</html>
Output
![svg1.jpg]()
HTML5 Filters in SVG
SVG Filters add special effects to SVG graphics. SVG graphics also support the use of filters and gradients.
Filters
SVG Filters add special effects to SVG graphics. SVG supports the following filters:
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
Drop Shadow Effect using SVG
Filters are defined within the def (for definitions) element. The filter in this example is assigned an id of "f1". The filter tag itself has attributes for defining the x and y coordinates and the width and height of the filter.
Example
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>SVG Shadow</title>
</head>
<body>
<h3>Implementation of Drop Shadow Effect using SVG</h3>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20"/>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"/>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
</filter>
</defs>
<rect width="120" height="90" stroke="purple" stroke-width="3" fill="orange" filter="url(#f1)"/>
</svg>
</body>
</html>
Output
![shadow.jpg]()
HTML5 Gradients in SVG
Gradients, like filters, are defined within the def element. Each gradient is assigned an id. Gradient attributes, such as the colors, are set inside of the gradient tag using stop elements.
To apply a gradient to a drawing, set the URL value for the fill attribute to the id of the desired gradient.
Gradients
A gradient is a smooth transition from one color to another. In addition, several color transitions can be applied to the same element.
There are two main types of gradients in SVG:
SVG Gradient Ellipse
The following is the HTML5 version of an SVG example that would draw a ellipse using an <ellipse> tag and would use the <radialGradient> tag to define an SVG radial gradient.
The text element is used to add the text.
Example
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>SVG Gradient</title>
</head>
<body>
<h3>Implementation of SVG Gradient Ellipse</h3>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />
<text fill="Black" font-size="45" font-family="Verdana" x="50" y="60">MCN</text>
</svg>
</body>
</html>
Output
![gradient.jpg]()