<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>

You can use multiple filters on each SVG element!

SVG Gaussian Blur

An SVG Filter must be defined within a <defs> tag.

Gaussian Blur

The <filter> tag is used to define an SVG filter. The <filter> tag has a required id attribute which identifies which filter will be applied to the graphic.
The <filter> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as filter.
Copy the following code into Notepad and save the file as "filter1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Code explanation

• The id attribute of the <filter> tag defines a unique name for the filter (the same filter can be
  used by many elements in the document)
• The filter:url(#Gaussian_Blur) property is used to link an element to a filter. The # character must be used when linking to the filters id
• The filter effect is defined with the <feGaussianBlur> tag. The fe prefix is used for all filters
• The stdDeviation attribute of the <feGaussianBlur> tag defines the amount of the blur
• The in="SourceGraphic" part defines that the effect is created from the whole image

View example
Another example with a different stdDeviation:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

View example

SVG Gradients - Linear

An SVG Gradient must be defined within a <defs> tag.

SVG 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 Gradients
• Radial Gradients

Linear Gradients

The <linearGradient> tag is used to define an SVG linear gradient.
The <linearGradient> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as gradients.
Linear gradients can be defined as horizontal, vertical or angular gradients:

• Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ
• Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ
• Angular gradients are created when x1 and x2 differ and y1 and y2 differ

Copy the following code into Notepad and save the file as "linear1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg> 

Code explanation:

• The id attribute of the <linearGradient> tag defines a unique name for the gradient
• The fill:url(#orange_red) property links the ellipse element to the gradient
• The x1, x2, y1,y2 attributes of the <linearGradient> tag define the starting and ending position of the gradient
• The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end

View example (Horizontal gradient)
Another example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg> 

View example (Vertical gradient)

SVG Gradients - Radial

An SVG Gradient must be defined within a <defs> tag.

Radial Gradients

The <radialGradient> tag is used to define an SVG radial gradient.
The <radialGradient> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as gradients.
Copy the following code into Notepad and save the file as "radial1.svg". Place the file in your Web directory:

Code explanation:

• The id attribute of the <radialGradient> tag defines a unique name for the gradient
• The fill:url(#grey_blue) property links the ellipse element to the gradient
• The cx, cy and r attributes define the outermost circle and the fx and fy define the innermost circle
• The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end

View example
Another example:

View example