SVG Tutorial

SVG Tutorial
SVG stands for Scalable Vector Graphics.

SVG defines graphics in XML format.
Introduction to SVG
SVG is a language for describing 2D-graphics and graphical applications in XML.
What you should already know

Before you continue, you should have some basic understanding of the following:
• HTML
• Basic XML
What is SVG?
• SVG stands for Scalable Vector Graphics
• SVG is used to define vector-based graphics for the Web
• SVG defines the graphics in XML format
• SVG graphics do NOT lose any quality if they are zoomed or resized
• Every element and every attribute in SVG files can be animated
• SVG is a W3C recommendation
• SVG integrates with other W3C standards such as the DOM and XSL
• SVG is a W3C Recommendation
SVG became a W3C Recommendation 14. January 2003.
SVG History & Advantages

Sun Microsystems, Adobe, Apple, IBM, and Kodak are some of the organizations that have been involved in
defining SVG.
Advantages of using SVG over other image formats (like JPEG and GIF) are:
• SVG files can be read and modified by a large range of tools (e.g. notepad)
• SVG files are smaller and more compressible than JPEG and GIF images
• SVG images are scalable
• SVG images can be printed with high quality at any resolution
• SVG images are zoomable (and the image can be zoomed without degradation)
• Text in SVG is selectable and searchable (excellent for making maps)
• SVG works with Java technology
• SVG is an open standard
• SVG files are pure XML
The main competitor to SVG is Flash.

The biggest advantage SVG has over Flash is the compliance with other standards (e.g. XSL and the DOM).
Flash relies on proprietary technology that is not open source.
Look at a directory of SVG enabled software and services.
Viewing SVG Files

All browsers support SVG files nowadays, except for Internet Explorer, which needs a plug-in. Those are
available for free, as for example the Adobe SVG Viewer.
SVG Example
SVG is written in XML.
SVG Example
The following example is an example of a simple SVG file. SVG files must be saved with an .svg
extension:<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
1
"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">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
View example (only for SVG-enabled browsers)

(To view the SVG source, open the example and right-click in the example window. Select "View Source".)
Code explanation:
The first line contains the XML declaration. Notice the standalone attribute! This attribute specifies whether
the SVG file "stands alone", or contains a reference to an external file.
standalone="no" means that the SVG document has a reference to an external file - in this case, the DTD.
The second and the third line refer to the external SVG DTD. The DTD is located at
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". The DTD resides at the W3C and it contains all
allowable SVG elements.
The SVG code begins with the <svg> element, which consists of the opening <svg> tag and the closing
</svg> tag. This is the root element. The width and height attributes set the width and height of the SVG
document. The version attribute defines the SVG version to be used and the xmlns attribute defines the
SVG namespace.
The SVG <circle> element is used to create a circle. The cx and cy attributes define the x and y coordinates
of the center of the circle. If cx and cy are omitted, the circle's center is set to (0, 0). The r attribute defines
the radius of the circle.
The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the
circle to a 2px wide, black "border".
The fill attribute refers to the color inside a shape. We set the fill color to red.
The closing </svg> tag closes the root SVG element and the document.
Note: All opening tags must have closing tags!
SVG in HTML Pages

SVG files can be embedded into HTML documents with the <embed> tag, the <object> tag, or the <iframe>
tag.
Below you should see three different methods on how to embed SVG files into HTML pages.
Using the <embed> Tag

The <embed> tag is supported in all major browsers, and allows scripting.
Note: The Adobe SVG Viewer recommends that you use the EMBED tag when embedding SVG in HTML
pages! However, if you want to create valid XHTML, you cannot use <embed> - The <embed> tag is not
listed in any HTML specification.
Syntax:
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
Note: The pluginspage attribute points to an URL for the plugin download.
Tip: Internet Explorer supports an additional attribute, wmode="transparent", that let the HTML page
background shine through.
Using the <object> Tag
The <object> tag is an HTML4 standard tag and is supported in all newer browsers. The disadvantage is
that it does not allow scripting.
Note: If you have installed the latest version of Adobe SVG Viewer, SVG files will not work when using the
<object> tag (at least not in Internet Explorer)!
Syntax:
2
<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
Note: The codebase attribute points to an URL for the plugin download.
Using the <iframe> Tag

The <iframe> tag works in most browsers.
Syntax:
<iframe src="rect.svg" width="300" height="100">
</iframe>
I Wish....
It would be great if we could add SVG elements directly into the HTML code, only by referring to the SVG
namespace, like this:<html
xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>
SVG <rect>
SVG has some predefined shape elements that can be used and manipulated by developers.
SVG Shapes
SVG has some predefined shape elements that can be used and manipulated by developers:
Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>
The following chapters will explain each element, starting with the rect element.
The <rect> Tag
The <rect> tag is used to create a rectangle and variations of a rectangle shape.
To understand how this works, copy the following code into Notepad and save the file as "rect1.svg". Place
the file in your Web directory:<?xml version="1.0" standalone="no"?>
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>
Code explanation:
• The width and height attributes of the rect element define the height and the width of the rectangle
• The style attribute is used to define CSS properties
• The CSS fill property defines the fill color of the rectangle (either an rgb value, a color name, or a
hexadecimal value)
3
• The CSS stroke-width property defines the width of the border of the rectangle
• The CSS stroke property defines the color of the border of the rectangle
Let's look at another example that contains some new attributes:<?xml version="1.0" standalone="no"?>
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>
Code explanation:
The x attribute defines the left position of the rectangle (e.g. x="0" places the rectangle 0 pixels from the left
of the browser window)
The y attribute defines the top position of the rectangle (e.g. y="0" places the rectangle 0 pixels from the top
of the browser window)
The CSS fill-opacity property defines the opacity of the fill color (legal range: 0 to 1)
The CSS stroke-opacity property defines the opacity of the stroke color (legal range: 0 to 1)
Define the opacity for the whole element:<?xml version="1.0" standalone="no"?>


<rect x="20" y="20" width="250" height="250"

style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>
Code explanation:
The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)
Last example, create a rectangle with rounded corners:

<?xml version="1.0" standalone="no"?>
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>
Code explanation:
The rx and the ry attributes rounds the corners of the rectangle
SVG <circle>
• The <circle> tag is used to create a circle.
• The <circle> Tag
• The <circle> tag is used to create a circle.
Copy the following code into Notepad and save the file as "circle1.svg". Place the file in your Web
directory:<?xml version="1.0" standalone="no"?>
4
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
Code explanation:
The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted,
the circle's center is set to (0, 0)
The r attribute defines the radius of the circle
SVG <ellipse>
The <ellipse> tag is used to create an ellipse.
The <ellipse> Tag

The <ellipse> tag is used to create an ellipse. An ellipse is closely related to a circle. The difference is that
an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
Copy the following code into Notepad and save the file as "ellipse1.svg". Place the file in your Web
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
</svg>
Code explanation:
• The cx attribute defines the x coordinate of the center of the ellipse
• The cy attribute defines the y coordinate of the center of the ellipse
• The rx attribute defines the horizontal radius
• The ry attribute defines the vertical radius
The following example creates three ellipses on top of each other:

style="fill:purple"/>
style="fill:lime"/>
style="fill:yellow"/>
</svg>
The following example combines two ellipses (one yellow and one white):
style="fill:yellow"/>
style="fill:white"/>
</svg>
5
SVG <line>
The <line> tag is used to create a line.
The <line> Tag

The <line> tag is used to create a line.
Copy the following code into Notepad and save the file as "line1.svg". Place the file in your Web directory:<?
xml version="1.0" standalone="no"?>
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
Code explanation:
• The x1 attribute defines the start of the line on the x-axis
• The y1 attribute defines the start of the line on the y-axis
• The x2 attribute defines the end of the line on the x-axis
• The y2 attribute defines the end of the line on the y-axis
SVG <polygon>
The <polygon> tag is used to create a graphic that contains at least three sides.
The <polygon> Tag

The <polygon> tag is used to create a graphic that contains at least three sides.
Copy the following code into Notepad and save the file as "polygon1.svg". Place the file in your Web
directory:

<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>
Code explanation:
The points attribute defines the x and y coordinates for each corner of the polygon
The following example creates a polygon with four sides:

<polygon points="220,100 300,210 170,250 123,234"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>
SVG <polyline>
The <polyline> tag is used to create any shape that consists of only straight lines.
The <polyline> Tag
6
The <polyline> tag is used to create any shape that consists of only straight lines.
Copy the following code into Notepad and save the file as "polyline1.svg". Place the file in your Web
directory:
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
SVG <path>
The <path> tag is used to define a path.
The <path> Tag

The <path> tag is used to define a path.
The following commands are available for path data:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
Note: All of the commands above can also be expressed with lower letters. Capital letters means absolutely
positioned, lower cases means relatively positioned.
Copy the following code into Notepad and save the file as "path1.svg". Place the file in your Web directory:
<path d="M250 150 L150 350 L350 350 Z" />
</svg>
The example above defines a path that starts at position 250 150 with a line to position 150 350 then from
there a line to 350 350 and finally closing the path back to 250 150.
The following example creates a spiral:
<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
7
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
Complex? YES!!!! Because of the complexity involved in drawing paths it is highly recommended to use an
SVG editor to create complex graphics.
SVG Filters
SVG Filters is used to add special effects to shapes and text.
The available filters in SVG are:

• feBlend
• feColorMatrix
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight
• fePointLight
• feSpotLight
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:
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>

style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>
Code explanation:
8
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
Another example with a different stdDeviation:

<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>
SVG Gradients - Linear

An SVG Gradient must be defined within a <defs> tag.
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:
<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-opacity:1"/>
</linearGradient>
</defs>
style="fill:url(#orange_red)"/>
</svg>
9
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"?>
<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-opacity:1"/>
stop-opacity:1"/>
</linearGradient>
</defs>
style="fill:url(#orange_red)"/>
</svg>
VG 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
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
stop-opacity:0"/>
stop-opacity:1"/>
</radialGradient>
</defs>
style="fill:url(#grey_blue)"/>
</svg>
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
10
Another example:<?xml version="1.0" standalone="no"?>
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
stop-opacity:0"/>
stop-opacity:1"/>
</radialGradient>
</defs>
style="fill:url(#grey_blue)"/>
</svg>
SVG Examples
Viewing SVG Files
All browsers support SVG files nowadays, except for Internet Explorer, which needs a plug-in. Those are
available for free, as for example the Adobe SVG Viewer.
Viewing SVG Source

To view the SVG source, open the example and right-click in the example window. Select "View Source".
SVG Examples
SVG Shapes
A rectangle
A rectangle with opacity
A rectangle with opacity 2
A rectangle with rounded corners
A circle
An ellipse
Three ellipses on top of each other
Two ellipses
A line
A polygon with three sides
A polygon with four sides
A polyline
A path
A spiral
SVG Filters
A feGaussianBlur filter
Another feGaussianBlur filter
A feBlend filter
A feColorMatrix filter
A feComponentTransfer filter
A feOffset filter
feOffset, feFlood, feComposite, feMerge, and feMergeNode
A feMorphology filter
Filter 1
Filter 2
Filter 3
Filter 4
Filter 5
Filter 6
11
SVG Gradients
Grad linear (horizontal gradient)

Grad linear (vertical gradient)
Grad radial
Grad radial 2
SVG Misc
Add an <a> element to a rectangle. The rectangle will act as a hyperlink
Use a JavaScript to create an a element when the user clicks on a circle
Rectangle that repeatedly fade away over 5 seconds
Animate the x, y, width, and height attributes of a rectangle and change the color of the rectangle
Three rectangles that will change color

Text that will move along a motion path
Text that will move, rotate and scale along a motion path
Text that will move, rotate and scale along a motion path + a rectangle that will "grow" and change color
SVG Elements Reference

The SVG elements from the W3C Recommendation (SVG Version 1.1).
SVG Elements
The links in the "Element" column point to attributes and more useful information about the specific element.
Element Description
a Defines a hyperlink
altGlyph Allows control over glyphs used to render particular character data (e.g. for
music symbols or Asian text)
altGlyphDef Defines a set of glyph substitutions (e.g. for music symbols or Asian text)
altGlyphItem Defines a candidate set of glyph substitutions (e.g. for music symbols or
Asian text)
animate Animates an attribute or property over time
animateColor Specifies a color transformation over time
animateMotion Causes an element to move along a motion path
animateTransform Animates a transformation attribute on an element
circle Defines a circle
clipPath
color-profile Specifies a color profile description
cursor Defines a platform-independent cursor
definition-src Defines a separate font definition resource
defs A container for referenced elements
12
desc A text-only description for elements in SVG - not displayed as part of the
graphics. User agents may display the text as a tooltip
ellipse Defines an ellipse
feBlend SVG filter. Composites two objects together using different blending modes
feColorMatrix SVG filter. Applies a matrix transformation
feComponentTransfer SVG filter. Performs component-wise remapping of data
feComposite SVG filter.
feConvolveMatrix SVG filter.
feDiffuseLighting SVG filter.
feDisplacementMap SVG filter.
feDistantLight SVG filter. Defines a light source
feFlood SVG filter.
feFuncA SVG filter. Sub-element to feComponentTransfer
feFuncB SVG filter. Sub-element to feComponentTransfer
feFuncG SVG filter. Sub-element to feComponentTransfer
feFuncR SVG filter. Sub-element to feComponentTransfer
feGaussianBlur SVG filter. Performs a Gaussian blur on the image
feImage SVG filter.
feMerge SVG filter. Creates image layers on top of each other
feMergeNode SVG filter. Sub-element to feMerge
feMorphology SVG filter. Performs a "fattening" or "thinning" on a source graphic
feOffset SVG filter. Moves an image relative to its current position
fePointLight SVG filter.
feSpecularLighting SVG filter.
feSpotLight SVG filter.
feTile SVG filter.
13
feTurbulence SVG filter.
filter Container for filter effects
font Defines a font
font-face Describes the characteristics of a font
font-face-format
font-face-name
font-face-src
font-face-uri
foreignObject
g A container element for grouping together related elements
glyph Defines the graphics for a given glyph
glyphRef Defines a possible glyph to use
hkern
image
line Defines a line
linearGradient Defines a linear gradient
marker
mask
metadata Specifies metadata
missing-glyph
mpath
path Defines a path
pattern
polygon Defines a closed shape that consists of a set of connected straight lines
polyline Defines a set of connected straight lines
14
radialGradient Defines a radial gradient
rect Defines a rectangle
script Container for scripts (e.g., ECMAScript)
set Sets the value of an attribute for a specified duration
stop
style Allows style sheets to be embedded directly within SVG content
svg Defines an SVG document fragment
switch
symbol
text
textPath
title A text-only description for elements in SVG - not displayed as part of the
graphics. User agents may display the text as a tooltip
tref
tspan
use
tspan
use
view
vkern
By: DataIntegratedEntity22592
Source: http://w3schools.com/svg/default.asp
15

SVG Tutorial

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SVG Tutorial

Uploaded by

Copyright:

Available Formats

SVG Tutorial

SVG stands for Scalable Vector Graphics.

What you should already know

SVG became a W3C Recommendation 14. January 2003.

SVG History & Advantages

The main competitor to SVG is Flash.

Viewing SVG Files

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

View example (only for SVG-enabled browsers)

Note: All opening tags must have closing tags!

SVG in HTML Pages

Using the <embed> Tag

Using the <object> Tag

Using the <iframe> Tag

Define the opacity for the whole element:<?xml version="1.0" standalone="no"?>

<svg width="100%" height="100%" version="1.1"

<rect x="20" y="20" width="250" height="250"

Last example, create a rectangle with rounded corners:

The <ellipse> Tag

The following example creates three ellipses on top of each other:

The <line> Tag

The <polygon> Tag

<svg width="100%" height="100%" version="1.1"

The following example creates a polygon with four sides:

The <polyline> Tag

The <path> Tag

<path d="M153 334

The available filters in SVG are:

SVG Gaussian Blur

<ellipse cx="200" cy="150" rx="70" ry="40"

Another example with a different stdDeviation:

SVG Gradients - Linear

There are two main types of gradients in SVG:

The <linearGradient> tag is used to define an SVG linear gradient.

Linear gradients can be defined as horizontal, vertical or angular gradients:

Viewing SVG Source

Grad linear (horizontal gradient)

Three rectangles that will change color

SVG Elements Reference

animateColor Specifies a color transformation over time

animateMotion Causes an element to move along a motion path

animateTransform Animates a transformation attribute on an element

circle Defines a circle

color-profile Specifies a color profile description

cursor Defines a platform-independent cursor

definition-src Defines a separate font definition resource

defs A container for referenced elements

feColorMatrix SVG filter. Applies a matrix transformation

feComponentTransfer SVG filter. Performs component-wise remapping of data

feComposite SVG filter.

feConvolveMatrix SVG filter.

feDiffuseLighting SVG filter.

feDisplacementMap SVG filter.

feDistantLight SVG filter. Defines a light source

feFlood SVG filter.

feFuncA SVG filter. Sub-element to feComponentTransfer

feFuncB SVG filter. Sub-element to feComponentTransfer

feFuncG SVG filter. Sub-element to feComponentTransfer

feFuncR SVG filter. Sub-element to feComponentTransfer

feGaussianBlur SVG filter. Performs a Gaussian blur on the image

feImage SVG filter.

feMerge SVG filter. Creates image layers on top of each other

feMergeNode SVG filter. Sub-element to feMerge