Post
Ask Question

HTML5 SVG

Introduction

 
"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 the script Visual presentation created and modified programmatically through the script
Event model/user interaction is object-based at the level of primitive graphic elements, such 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:
  1. <svg xmlns="http://www.w3.org/2000/svg">  
  2. .....................  
  3.   
  4. .....................      
  5. </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
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>text arched path</title>  
  7. </head>  
  8. <body>  
  9.     <h3>Implementation of text on arched path using SVG</h3>  
  10.     <svg xmlns="http://www.w3.org/2000/svg" version="1.1"  
  11.         xmlns:xlink="http://www.w3.org/1999/xlink">  
  12.          <defs>  
  13.               <path id="path1" d="M75,20 a1,1 0 0,0 150,0"/>  
  14.         </defs>  
  15.         <text x="10" y="100" style="fill:red;">  
  16.            <textPath xlink:href="#path1">I am an employee of MCN Solutions</textPath>  
  17.         </text>  
  18.    </svg>  
  19. </body>  
  20. </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. Filter 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
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>SVG Shadow</title>  
  7. </head>  
  8. <body>  
  9.     <h3>Implementation of Drop Shadow Effect using SVG</h3>  
  10.     <svg xmlns="http://www.w3.org/2000/svg" version="1.1">  
  11.          <defs>  
  12.               <filter id="f1" x="0" y="0" width="200%" height="200%">  
  13.                     <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20"/>  
  14.                     <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"/>  
  15.                     <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>  
  16.               </filter>  
  17.          </defs>  
  18.          <rect width="120" height="90" stroke="purple" stroke-width="3" fill="orange" filter="url(#f1)"/>  
  19.     </svg>  
  20. </body>  
  21. </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:
  • Linear
  • Radial

SVG Gradient Ellipse

 
The following is the HTML5 version of an SVG example that would draw an ellipse using a <ellipse> tag and would use the <radialGradient> tag to define an SVG radial gradient.
 
The text element is used to add the text.
 
Example
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>SVG Gradient</title>  
  7. </head>  
  8. <body>  
  9.     <h3>Implementation of SVG Gradient Ellipse</h3>  
  10.     <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">  
  11.        <defs>  
  12.            <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">  
  13.                <stop offset="0%" style="stop-color:#c8c8c8; stop-opacity:0"/>  
  14.                <stop offset="100%" style="stop-color:#0000ff;stop-opacity:1"/>  
  15.            </radialGradient>  
  16.        </defs>  
  17.        <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />  
  18.        <text fill="Black" font-size="45" font-family="Verdana" x="50" y="60">MCN</text>  
  19.     </svg>  
  20. </body>  
  21. </html> 
Output
 
 
gradient.jpg


Similar Articles