Introduction

In this article, we are going to learn about the SVG Tag in HTML 5. SVG stands for Scalable Vector Graphics and is used to define vector-based graphics for the Web. It defines the graphics in XML format and the XML is then rendered by an SVG viewer. SVG is a W3C recommendation. SVG files can be embedded into HTML pages with <embed>, <object>, or <iframe>.

Browser Support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support inline SVG.
The complete list of predefined shapes in SVG:
But, here we take a look at SVG Filters. SVG Filters: In this tutorial, we will only demonstrate a fraction of the effects that are possible. The <filter> element is used to define an SVG filter.
The <filter> element has a required id attribute that identifies the filter and all internet SVG filters are defined within an <defs> element.

feGaussianBlur

Example 1
The <feGaussianBlur> element is used to create blur effects:
Here is the SVG code
  1. <html>
  2. <body>
  3. <p> This is the Example of blur Effect </p>
  4. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  5. <defs>
  6. <filter id="f1" x="0" y="0">
  7. <feGaussianBlur in="SourceGraphic" stdDeviation="14" />
  8. </filter>
  9. </defs>
  10. <circle cx="100" cy="100" r="100" stroke="black"
  11. stroke-width="1" fill="red" filter="url(#f1)" />
  12. </svg>
  13. </body>
  14. </html>
Output:
image 1.jpg
Example 2 In this, we will apply a blur effect to an SVG element. Here is the Code
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #svg-el-blur { height: 60px; width: 100%; }
  5. #svg-el-blur text { fill: green; filter:url(#blur-effect-1); font: 50px sans-serif; }
  6. #svg-el-blur text:hover { filter:url(#blur-effect-2); }
  7. .lt-ie9 #svg-el-blur text { color: green; }
  8. </style>
  9. </head>
  10. <body>
  11. <svg id="svg-el-blur">
  12. <text x="0" y="50">
  13. SVG Blur
  14. </text>
  15. </svg>
  16. <svg id="svg-effects">
  17. <filter id="blur-effect-1">
  18. <feGaussianBlur stdDeviation="0.9" />
  19. </filter>
  20. <filter id="blur-effect-2">
  21. <feGaussianBlur stdDeviation="2" />
  22. </filter>
  23. </svg>
  24. </body>
  25. </html>
image 2.jpg
After the mouse hover
image 3.jpg

feOffset

The <feOffset> element is used to create drop shadow effects. The idea is to take an SVG graphic (image or element) and move it a little bit in the xy plane.

feBlend

The <feBlend> element is used tofilter for combining images.
Example - 1 Here is the SVG code:
  1. <html>
  2. <body>
  3. <p> offsets a rectangle (with <feOffset>), then blend the original on top of the offset image (with <feBlend>): Effect </p>
  4. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  5. <defs>
  6. <filter id="f1" x="0" y="0" width="200%" height="200%">
  7. <feOffset result="offOut" in="SourceGraphic" dx="25" dy="20" />
  8. <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
  9. </filter>
  10. </defs>
  11. <polygon points="220,10 300,210 170,250 123,234"
  12. style="fill:lime;stroke:purple;stroke-width:1" filter="url(#f1)" />
  13. </svg>
  14. </body>
  15. </html>
image 4.jpg
Example 3 In this example we will blur the offset image (with <feGaussianBlur>): Here is the SVG code:
  1. <html>
  2. <body>
  3. <p></b> the offset image blurred (with <feGaussianBlur>):</p>
  4. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  5. <defs>
  6. <filter id="f1" x="0" y="0" width="200%" height="200%">
  7. <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
  8. <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
  9. <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
  10. </filter>
  11. </defs>
  12. <rect width="90" height="90" stroke="yellow" stroke-width="3" fill="red" filter="url(#f1)" />
  13. </svg>
  14. </body>
  15. </html>
image 5.jpg