HTML5 SVG

Ashwani Tyagi
Feb 27, 2013
5.5k
0
0
Article

"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>

<head>

<title>text arched path</title>

</head>

<body>

<h3>Implementation of text on arched path using SVG</h3>

xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>

</defs>

<textPath xlink:href="#path1">I am an employee of MCN Solutions</textPath>

</text>

</svg>

</body>

</html>

Output

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>

<head>

<title>SVG Shadow</title>

</head>

<body>

<h3>Implementation of Drop Shadow Effect using SVG</h3>

<defs>

</filter>

</defs>

</svg>

</body>

</html>

Output

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:

Linear
Radial

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.