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:
- Rectangle <rect>
- Circle <circle>
- Ellipse <ellipse>
- Line <line>
- Polyline <polyline>
- Polygon <polygon>
- Path <path>
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 which identifies the filter and all internet SVG filters are defined within a <defs> element.
feGaussianBlur:
Example 1
The <feGaussianBlur> element is used to create blur effects:
Here is the SVG code:
<html>
<body>
<p> This is the Example of blur Effect </p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="14" />
</filter>
</defs>
<circle cx="100" cy="100" r="100" stroke="black"
stroke-width="1" fill="red" filter="url(#f1)" />
</svg>
</body>
</html>
Output:
![image 1.jpg]()
Example 2
In this we will apply a blur effect to a SVG element.
Here is the Code:
<html>
<head>
<style type="text/css">
#svg-el-blur { height: 60px; width: 100%; }
#svg-el-blur text { fill: green; filter:url(#blur-effect-1); font: 50px sans-serif; }
#svg-el-blur text:hover { filter:url(#blur-effect-2); }
.lt-ie9 #svg-el-blur text { color: green; }
</style>
</head>
<body>
<svg id="svg-el-blur">
<text x="0" y="50">
SVG Blur
</text>
</svg>
<svg id="svg-effects">
<filter id="blur-effect-1">
<feGaussianBlur stdDeviation="0.9" />
</filter>
<filter id="blur-effect-2">
<feGaussianBlur stdDeviation="2" />
</filter>
</svg>
</body>
</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 to filter for combining images.
Example - 1
Here is the SVG code:
<html>
<body>
<p> offsets a rectangle (with <feOffset>), then blend the original on top of the offset image (with <feBlend>): Effect </p>
<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="SourceGraphic" dx="25" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:1" filter="url(#f1)" />
</svg>
</body>
</html>
![image 4.jpg]()
Example 3
In this example we will blurred the offset image (with <feGaussianBlur>):
Here is the SVG code:
<html>
<body>
<p></b> the offset image blurred (with <feGaussianBlur>):</p>
<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="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="yellow" stroke-width="3" fill="red" filter="url(#f1)" />
</svg>
</body>
</html>
![image 5.jpg]()