revision:
The <feBlend> SVG filter primitive composes two objects together ruled by a certain blending mode. This is similar to what is known from image editing software when blending two layers. The mode is defined by the mode attribute.
Specific attributes include:
the in attribute identifies input for the given filter primitive. The value can be either one of the following six keywords (SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | "filter-primitive-reference"), or a string which matches a previous "result" attribute value within the same "filter" element. If no value is provided and this is the first filter primitive, then this filter primitive will use "SourceGraphic" as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input. If the value for result appears multiple times within a given "filter" element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute result.
the in2 attribute identifies the second input for the given filter primitive. It works exactly like the "in" attribute.
the mode attribute defines the blending mode on the "feBlend" filter primitive.
codes:
<div style="margin-left:4vw;">
<svg width="400" height="400">
<defs>
<filter id="spotlight">
<feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
flood-color="green" flood-opacity="1"/>
<feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/>
</filter>
</defs>
<image xlink:href="../pics/cartoon.jpg" x="10%" y="10%" width="80%" height=
"80%" style="filter:url(#spotlight);"/>
</svg>
</div>
The "feColorMatrix" SVG filter element changes colors based on a transformation matrix. Every pixel's color value [R,G,B,A] is matrix multiplied by a 5 by 5 color matrix to create new color [R',G',B',A'].
Specific attributes include:
the in attribute identifies input for the given filter primitive. The value can be either one of the following six keywords (SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | "filter-primitive-reference"), or a string which matches a previous "result" attribute value within the same "filter" element. If no value is provided and this is the first filter primitive, then this filter primitive will use "SourceGraphic" as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input. If the value for result appears multiple times within a given "filter" element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute result.
the type attribute indicates the type of matrix operation. The keyword "matrix" indicates that a full 5x4 matrix of values will be provided. The other keywords represent convenience shortcuts to allow commonly used color operations to be performed without specifying a complete matrix.
values is a list of numbers interpreted differently depending on the value of the "type" attribute: 1/ for type="matrix", values is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 ... a34), separated by whitespace and/or a comma; 2/ for type="saturate", values is a single real number value (0 to 1); 3/ for type="hueRotate", values is a single one real number value (degrees); 4/ for type="luminanceToAlpha", values is not applicable.
codes:
<div style="margin-left: 5vw;">
<svg width="100%" height="100%" viewBox="0 0 150 400"
preserveAspectRatio="xMidYMid meet">
<!-- ref -->
<defs>
<g id="circles">
<circle cx="16" cy="16" r="12" fill="blue" fill-opacity="0.5" />
<circle cx="21" cy="12" r="12" fill="green" fill-opacity="0.5" />
<circle cx="18" cy="25" r="14" fill="red" fill-opacity="0.5" />
</g>
</defs>
<use href="#circles" />
<text x="70" y="50">Reference</text>
<!-- identity matrix -->
<filter id="colorMeTheSame">
<feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0" />
</filter>
<use href="#circles" transform="translate(0 70)"
filter="url(#colorMeTheSame)" />
<text x="70" y="120">Identity matrix</text>
<!-- Combine RGB into green matrix -->
<filter id="colorMeGreen">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0
1 1 1 1 0
0 0 0 0 0
0 0 0 1 0" />
</filter>
<use href="#circles" transform="translate(0 140)"
filter="url(#colorMeGreen)" />
<text x="70" y="190">rgbToGreen</text>
<!-- saturate -->
<filter id="colorMeSaturate">
<feColorMatrix in="SourceGraphic" type="saturate" values="0.2" />
</filter>
<use href="#circles" transform="translate(0 210)"
filter="url(#colorMeSaturate)" />
<text x="70" y="260">saturate</text>
<!-- hueRotate -->
<filter id="colorMeHueRotate">
<feColorMatrix in="SourceGraphic" type="hueRotate" values="180" />
</filter>
<use href="#circles" transform="translate(0 280)"
filter="url(#colorMeHueRotate)" />
<text x="70" y="330">hueRotate</text>
<!-- luminanceToAlpha -->
<filter id="colorMeLTA">
<feColorMatrix in="SourceGraphic" type="luminanceToAlpha" />
</filter>
<use href="#circles" transform="translate(0 350)"
filter="url(#colorMeLTA)" />
<text x="70" y="400">luminanceToAlpha</text>
</svg>
</div>
The <feComponentTransfer> SVG filter primitive performs color-component-wise remapping of data for each pixel. It allows operations like brightness adjustment, contrast adjustment, color balance or thresholding. The calculations are performed on non-premultiplied color values. The colors are modified by changing each channel (R, G, B, and A) to the result of what the children "feFuncR", "feFuncB", "feFuncG", and "feFuncA" return.
Specific attributes include:
the in attribute identifies input for the given filter primitive. The value can be either one of the following six keywords (SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | "filter-primitive-reference"), or a string which matches a previous "result" attribute value within the same "filter" element. If no value is provided and this is the first filter primitive, then this filter primitive will use "SourceGraphic" as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input. If the value for result appears multiple times within a given "filter" element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute result.
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 400 300">
<defs>
<linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0"
y1="0" x2="100%" y2="0">
<stop offset="0" stop-color="#ff0000"></stop>
<stop offset="0.2" stop-color="#ffff00"></stop>
<stop offset="0.4" stop-color="#00ff00"></stop>
<stop offset="0.6" stop-color="#00ffff"></stop>
<stop offset="0.8" stop-color="#0000ff"></stop>
<stop offset="1" stop-color="#800080"></stop>
</linearGradient>
<filter id="identity" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="identity"></feFuncR>
<feFuncG type="identity"></feFuncG>
<feFuncB type="identity"></feFuncB>
<feFuncA type="identity"></feFuncA>
</feComponentTransfer>
</filter>
<filter id="table" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="table" tableValues="0 0 1 1"></feFuncR>
<feFuncG type="table" tableValues="1 1 0 0"></feFuncG>
<feFuncB type="table" tableValues="0 1 1 0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="discrete" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 0 1 1"></feFuncR>
<feFuncG type="discrete" tableValues="1 1 0 0"></feFuncG>
<feFuncB type="discrete" tableValues="0 1 1 0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="linear" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="linear" slope="0.5" intercept="0"></feFuncR>
<feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG>
<feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="gamma" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="gamma" amplitude="4" exponent="7"
offset="0"></feFuncR>
<feFuncG type="gamma" amplitude="4" exponent="4"
offset="0"></feFuncG>
<feFuncB type="gamma" amplitude="4" exponent="1"
offset="0"></feFuncB>
</feComponentTransfer>
</filter>
</defs>
<g font-weight="bold">
<text x="0" y="20">Default</text>
<rect x="0" y="30" width="100%" height="20"></rect>
<text x="0" y="70">Identity</text>
<rect x="0" y="80" width="100%" height="20" style="filter:url(#identity)">
</rect>
<text x="0" y="120">Table lookup</text>
<rect x="0" y="130" width="100%" height="20" style="filter:url(#table)">
</rect>
<text x="0" y="170">Discrete table lookup</text>
<rect x="0" y="180" width="100%" height="20" style="filter:url(#discrete)">
</rect>
<text x="0" y="220">Linear function</text>
<rect x="0" y="230" width="100%" height="20" style="filter:url(#linear)">
</rect>
<text x="0" y="270">Gamma function</text>
<rect x="0" y="280" width="100%" height="20" style="filter:url(#gamma)">
</rect>
</g>
</svg>
</div>
<style>
rect {fill: url(#rainbow);}
</style>
The <feComposite> SVG filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor, lighter, or arithmetic.
Specific attributes include:
the in attribute identifies input for the given filter primitive. The value can be either one of the following six keywords (SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | "filter-primitive-reference"), or a string which matches a previous "result" attribute value within the same "filter" element. If no value is provided and this is the first filter primitive, then this filter primitive will use "SourceGraphic" as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input. If the value for result appears multiple times within a given "filter" element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute result.
the in2 attribute identifies the second input for the given filter primitive. It works exactly like the in attribute. Value: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | "filter-primitive-reference"; default value: SourceGraphic for first filter primitive, otherwise result of previous filter primitive; animatable: yes
the operator attribute has two meanings based on the context it's used in. Either it defines the compositing or morphing operation to be performed. Values:
over (indicates that the source graphic defined in the in attribute is placed over the destination graphic defined in the in2 attribute) |
in (indicates that the parts of the source graphic defined in the in attribute that overlap the destination graphic defined in the in2 attribute, replace the destination graphic.) |
out (indicates that the parts of the source graphic defined in the in attribute that fall outside the destination graphic defined in the in2 attribute, are displayed) |
atop ( indicates that the parts of the source graphic defined in the in attribute, which overlap the destination graphic defined in the in2 attribute, replace the destination graphic. The parts of the destination graphic that do not overlap with the source graphic stay untouched)|
xor ( indicates that the non-overlapping regions of the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute are combined)|
lighter (indicates that the sum of the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute is displayed)|
arithmetic (indicates that the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute are combined using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4, where: i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively, and k1,k2,k3,and k4 indicate the values of the attributes with the same name).
k1, k2, k3, k4: values used for calculating the result pixel in arithmetic operator filter primitives. Value: numver; default value: 0, animatable: yes.
codes:
<div style="margin-left: 4vw;">
<svg style="width:85vw; height:30vw; display: inline;">
<filter id="imageOver">
<feImage xlink:href="../pics/smiley.png" x="0vw" y="0vw" width="10vw" />
<feComposite in2="SourceGraphic" operator="over"/>
</filter>
<filter id="imageIn">
<feImage xlink:href="../pics/smiley.png" x="0vw" y="0vw" width="10vw" />
<feComposite in2="SourceGraphic" operator="in"/>
</filter>
<filter id="imageOut">
<feImage xlink:href="../pics/smiley.png" x="0vw" y="0vw" width="10vw" />
<feComposite in2="SourceGraphic" operator="out"/>
</filter>
<filter id="imageAtop">
<feImage xlink:href="../pics/smiley.png" x="0vw" y="0vw" width="10vw" />
<feComposite in2="SourceGraphic" operator="atop"/>
</filter>
<filter id="imageXor">
<feImage xlink:href="../pics/smiley.png" x="0vw" y="0vw" width="10vw" />
<feComposite in2="SourceGraphic" operator="xor"/>
</filter>
<filter id="imageArithmetic">
<feImage xlink:href="../pics/smiley.png" x="0vw" y="0vw" width="10vw" />
<feComposite in2="SourceGraphic" operator="arithmetic" k1="0.1"
k2="0.2" k3="0.3" k4="0.4" />
</filter>
<filter id="imageLighter">
<feImage xlink:href="../pics/smiley.png" x="0vw" y="0vw" width="10vw" />
<feComposite in2="SourceGraphic" operator="lighter"/>
</filter>
</defs>
<g transform="translate(0,25)">
<circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageOver)"/>
<text x="80" y="-5">over</text>
</g>
<g transform="translate(200,25)">
<circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageIn)"/>
<text x="80" y="-5">in</text>
</g>
<g transform="translate(400,25)">
<circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageOut)"/>
<text x="80" y="-5">out</text>
</g>
<g transform="translate(600,25)">
<circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageAtop)"/>
<text x="80" y="-5">atop</text>
</g>
<g transform="translate(0,240)">
<circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageXor)"/>
<text x="80" y="-5">xor</text>
</g>
<g transform="translate(200,240)">
<circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageArithmetic)"/>
<text x="70" y="-5">arithmetic</text>
</g>
<g transform="translate(400,240)">
<circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageLighter)"/>
<text x="80" y="-5">lighter</text>
</g>
</svg>
</div>
The <feConvolveMatrix> SVG filter primitive applies a matrix convolution filter effect. A convolution combines pixels in the input image with neighboring pixels to produce a resulting image. A wide variety of imaging operations can be achieved through convolutions, including blurring, edge detection, sharpening, embossing and beveling.
Specific attributes include:
the in attribute identifies input for the given filter primitive. The value can be either one of the following six keywords (SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | "filter-primitive-reference"), or a string which matches a previous "result" attribute value within the same "filter" element. If no value is provided and this is the first filter primitive, then this filter primitive will use "SourceGraphic" as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input. If the value for result appears multiple times within a given "filter" element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute result.
the order attribute indicates the size of the matrix to be used by a "feConvolveMatrix" element.
Value: "number-optional-number":this value indicates the number of cells in each dimension for the kernel matrix.
The values provided must be "integers" greater than zero; values that are not integers will be truncated, i.e. rounded to the closest integer value towards zero.
The first number, indicates the number of columns in the matrix; the second number, indicates the number of rows in the matrix. If no second number is provided, it defaults to the first number.
It is recommended that only small values (e.g., 3) be used; higher values may result in very high CPU overhead and usually do not produce results that justify the impact on performance.
Default value: 3; animatable; yes.
the kernelMatrix attribute defines the list of numbers that make up the kernel matrix for the "feConvolveMatrix" element. Values are separated by space characters and/or a comma. The number of entries in the list must equal to "orderX" by "orderY" as defined in the "order" attribute.
Value: list of numbers; the list of numbers that make up the kernel matrix for the convolution. Values are separated by space characters and/or a comma. The number of entries in the list must equal "orderX" times "orderY". If the result of orderX * orderY is not equal to the number of entries in the value list, the filter primitive acts as a pass through filter. Default value: none; animatable: yes.
the divisor attribute pecifies the value by which the resulting number of applying the kernelMatrix of a "feConvolveMatrix' element to the input image color value is divided to yield the destination color value. A divisor that is the sum of all the matrix values tends to have an evening effect on the overall color intensity of the result. Value: number; default value: sum of all values in kernelMatrix or 1 if sum is 0; animatable: yes.
the bias attribute shifts the range of the filter. After applying the kernelMatrix of the "feConvolveMatrix" element to the input image to yield a number and applied the divisor attribute, the bias attribute is added to each component. This allows representation of values that would otherwise be clamped to 0 or 1. Value: number; default value: 0; animatable: yes.
the targetX attribute determines the positioning in horizontal direction of the convolution matrix relative to a given target pixel in the input image. The leftmost column of the matrix is column number zero. The value must be such that: 0 <= targetX < orderX.Value: integer; default value: floor(oderX/2); animatable;yes
the targetY attribute determines the positioning in vertical direction of the convolution matrix relative to a given target pixel in the input image. The topmost column of the matrix is row number zero. The value must be such that: 0 <= targetX < orderX.Value: integer; default value: floor(oderX/2); animatable;yes
the edgeMode attribute
the kernelUnitlength attribute has two meanings based on the context it's used in. For lighting filter primitives, it indicates the intended distance for the x and y coordinates, for "feConvolveMatrix>, it indicates the intended distance between successive columns and rows in the kernel matrix. (deprecated).
the preserveAlpha attribute indicates how a "feConvolveMatrix" element handled alpha transparency. Value: true | false; default value: false; animatable: yes. The "true" value indicates that the convolution will only apply to the color channels. In this case, the filter will temporarily unpremultiply the color component values and apply the kernel. The "false" value indicates that the convolution will apply to all channels, including the alpha channel.
codes:
<svg viewBox="0 0 420 200">
<filter id="convolveMatrix1" x="0" y="0" width="100%" height="100%">
<feConvolveMatrix kernelMatrix="1 2 0 0 0 0 0 0 -1" divisor="1"/>
</filter>
<filter id="convolveMatrix2" x="0" y="0" width="100%" height="100%">
<feConvolveMatrix kernelMatrix="1 2 0 0 0 0 0 0 -1" divisor="8"/>
</filter>
<image xlink:href="../pics/smiley.png" width="200" height="200"
style="filter:url(#convolveMatrix1);"/>
<image xlink:href="../pics/smiley.png" width="200" height="200"
style="filter:url(#convolveMatrix2); transform:translateX(220px);"/>
</svg>
The <feDiffuseLighting> SVG filter primitive lights an image using the alpha channel as a bump map. The resulting image, which is an RGBA opaque image, depends on the light color, light position and surface geometry of the input bump map. The light map produced by this filter primitive can be combined with a texture image using the multiply term of the arithmetic operator of the "feComposite" filter primitive. Multiple light sources can be simulated by adding several of these light maps together before applying it to the texture image.
Specific attributes include:
the in attribute identifies input for the given filter primitive. The value can be either one of the following six keywords (SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | "filter-primitive-reference"), or a string which matches a previous "result" attribute value within the same "filter" element. If no value is provided and this is the first filter primitive, then this filter primitive will use "SourceGraphic" as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input. If the value for result appears multiple times within a given "filter" element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute result.
the surfaceScale attribute represents the height of the surface for a light filter primitive.Value: number; default value: 1; animatable; yes.
the diffuseConstant attribute represents the "kd" value in the Phong lighting model. In SVG, this can be any non-negative number. It’s used to determine the final RGB value of a given pixel. The brighter the lighting-color, the smaller this number should be. Value: number; default value: 1; animatable: yes.
the kernelUnitlength attribute has two meanings based on the context it's used in. For lighting filter primitives, it indicates the intended distance for the x and y coordinates, for "feConvolveMatrix>, it indicates the intended distance between successive columns and rows in the kernel matrix. (deprecated).
codes:
<div style="margin-left:4vw;">
<svg width="480" height="140">
<!-- No light is applied -->
<text text-anchor="middle" x="60" y="22">No Light</text>
<circle cx="60" cy="80" r="50" fill="green" />
<!-- the light source is a fePointLight element -->
<text text-anchor="middle" x="190" y="22">fePointLight</text>
<filter id="lightMe1">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color=
"white">
<fePointLight x="150" y="60" z="20" />
>/ feDiffuseLighting>
<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1"
k2="0" k3="0" k4="0"/>
</filter>
<circle cx="180" cy="80" r="50" fill="green" filter="url(#lightMe1)" />
<!-- the light source is a feDistantLight element -->
<text text-anchor="middle" x="300" y="22">feDistantLight</text>
<filter id="lightMe2">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color=
"white">
<feDistantLight azimuth="240" elevation="20"/>
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="light" operator="arithmetic"
k1="1" k2="0" k3="0" k4="0"/>
</filter>
<circle cx="300" cy="80" r="50" fill="green" filter="url(#lightMe2)" />
<!-- the light source is a feSpotLight source -->
<text text-anchor="middle" x="410" y="22">feSpotLight</text>
<filter id="lightMe3">
<feDiffuseLighting in="SourceGraphic" result="light"
lighting-color="white">
<feSpotLight x="360" y="5" z="30" limitingConeAngle="20"
pointsAtX="390" pointsAtY="80" pointsAtZ="0"/>
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="light" operator="arithmetic"
k1="1" k2="0" k3="0" k4="0"/>
>/ filter>
<circle cx="410" cy="80" r="50" fill="green" filter="url(#lightMe3)" />
</svg>
</div>
The <feDisplacementMap> SVG filter primitive uses the pixel values from the image from "in2' to spatially displace the image from "in". The formula for the transformation looks like this: "P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))", where P(x,y) is the input image, "in", and P'(x,y) is the destination. XC(x,y) and YC(x,y) are the component values of the channel designated by "xChannelSelector" and "yChannelSelector".
Specific attributes include:
the in attribute identifies input for the given filter primitive. The value can be either one of the following six keywords (SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | "filter-primitive-reference"), or a string which matches a previous "result" attribute value within the same "filter" element. If no value is provided and this is the first filter primitive, then this filter primitive will use "SourceGraphic" as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input. If the value for result appears multiple times within a given "filter" element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute result.
the in2 attribute identifies the second input for the given filter primitive. It works exactly like the in attribute. Value: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | "filter-primitive-reference"; default value: SourceGraphic for first filter primitive, otherwise result of previous filter primitive; animatable: yes
the scale attribute defines the displacement scale factor to be used on a "feDisplacementMap" filter primitive. The amount is expressed in the coordinate system established by the primitiveUnits attribute on the "filter" element. Value: number, default value: none; animatable:yes.
the xChannelSelector attribute indicates which color channel from in2 to use to displace the pixels in in along the x-axis. Value: R |G |B |A; default value: A; animatable: yes.
the yChannelSelector attribute indicates which color channel from in2 to use to displace the pixels in in along the y-axis. Value: R |G |B |A; default value: A; animatable: yes
codes:
<div style="margin-left:4vw;">
<svg width="200" height="200" viewBox="0 0 220 220">
<filter id="displacementFilter">
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"
result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50"
xChannelSelector="R"
yChannelSelector="G"/>
</filter>
<circle cx="100" cy="100" r="100" style="filter: url(#displacementFilter)"/>
</svg>
</div>
The <feDistantLight> filter primitive defines a distant light source that can be used within a lighting filter primitive: "feDiffuseLighting" or "feSpecularLighting".
Specific attributes include:
the azimuth attribute specifies the direction angle for the light source on the XY plane (clockwise), in degrees from the x axis. Value: number; default value: 0; animatable:yes.
the elevation attribute specifies the direction angle for the light source from the XY plane towards the Z-axis, in degrees. Note that the positive Z-axis points towards the viewer of the content. Value: number; default value: 0; animatable:yes.
codes:
<div>
<svg viewBox="0 0 440 200">
<filter id="distantLight1">
<feDiffuseLighting>
<feDistantLight azimuth="0" />
</feDiffuseLighting>
</filter>
<filter id="distantLight2">
<feDiffuseLighting>
<feDistantLight azimuth="240" />
</feDiffuseLighting>
</filter>
<circle cx="100" cy="100" r="80" style="filter: url(#distantLight1);" />
<circle cx="100" cy="100" r="80" style="filter: url(#distantLight2);
transform: translateX(240px);" />
</svg>
The SVG <feDropShadow> filter primitive creates a drop shadow of the input image. It can only be used inside a "filter" element.
Specifc attributes include:
the dx attribute defines the x offset of the drop shadow. Value type: "number"; default value: 2; animatable: yes
the dy attribute defines the y offset of the drop shadow. Value type: "number"; default value: 2; animatable: yes
the stdDeviation attribute defines the standard deviation for the blur operation in the drop shadow. Value type: "number"; default value: 2; animatable: yes
codes:
<div style="margin-left:4vw;">
<svg viewBox="0 0 30 10">
<defs>
<filter id="shadow">
<feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
</filter>
<filter id="shadow2">
<feDropShadow dx="0" dy="0" stdDeviation="0.5" flood-color="cyan"/>
</filter>
<filter id="shadow3">
<feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0" flood-color="pink"
flood-opacity="0.5"/>
</filter>
</defs>
<circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#shadow);"/>
<circle cx="15" cy="50%" r="4" style="fill:green; filter:url(#shadow2);"/>
<circle cx="25" cy="50%" r="4" style="fill:brown; filter:url(#shadow3);"/>
</svg>
The <feFlood> SVG filter primitive fills the filter subregion with the color and opacity defined by flood-color and flood-opacity.
Specific attributes include:
the flood-color attribute indicates what color to use to flood the current filter primitive subregion.Initial value: black; animatable:yes.
the flood-opacity attribute indicates the opacity value to use across the current filter primitive subregion. A number or percentage indicating the opacity value to use across the current filter primitive subregion. A number of 0 or a percentage of 0% represents a fully transparent color, 1 or 100% represents a fully opaque color. Initial value: 1; animatable: yes.
codes:
<div style="margin-left: 4vw;">
<svg width="200" height="200">
<defs>
<filter id="floodFilter" filterUnits="userSpaceOnUse">
<feFlood x="50" y="50" width="100" height="100"
flood-color="green"
flood-opacity="0.5"/>
</filter>
</defs>
<use style="filter: url(#floodFilter);"/>
</svg>
</div>
The <feFuncA> SVG filter primitive defines the transfer function for the alpha component of the input graphic of its parent "feComponentTransfer" element.
No specific attributes
The <feFuncB> SVG filter primitive defines the transfer function for the blue component of the input graphic of its parent "feComponentTransfer" element.
No specific attributes.
The <feFuncG> SVG filter primitive defines the transfer function for the green component of the input graphic of its parent "feComponentTransfer" element.
No specific attributes.
The <feFuncA> SVG filter primitive defines the transfer function for the red component of the input graphic of its parent "feComponentTransfer" element.
No specific attributes
The <feGaussianBlur>> SVG filter primitive blurs the input image by the amount specified in stdDeviation, which defines the bell-curve.
Specific attributes include:
the in attribute identifies input for the given filter primitive. The value can be either one of the following six keywords (SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | "filter-primitive-reference"), or a string which matches a previous "result" attribute value within the same "filter" element. If no value is provided and this is the first filter primitive, then this filter primitive will use "SourceGraphic" as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input. If the value for result appears multiple times within a given "filter" element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute result.
the stdDeviation attribute defines the standard deviation for the blur operation. If two numbers are provided, the first number represents a standard deviation value along the x-axis. The second value represents a standard deviation along the y-axis. If one number is provided, then that value is used for both X and Y. A negative value is forbidden. A value of zero disables the effect of the given filter primitive (i.e., the result is the filter input image). If stdDeviation is 0 in only one of X or Y, then the effect is that the blur is only applied in the direction that has a non-zero value.
the edgeMode attribute determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image. Values: duplicate ( indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image), wrap (indicates that the input image is extended by taking the color values from the opposite edge of the image), none ( indicates that the input image is extended with pixel values of zero for R, G, B and A).
codes:
<div style="margin-left: 4vw;">
<svg width="230" height="120">
<filter id="blurMe">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<circle cx="60" cy="60" r="50" fill="green" />
<circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
</svg>
</div>
The <feImage> SVG filter primitive fetches image data from an external source and provides the pixel data as output (meaning if the external source is an SVG image, it is rasterized.)
Specific attributes include:
the preserveAspectRatio attribute indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio. Because the aspect ratio of an SVG image is defined by the viewBox attribute, if this attribute isn't set, the "preserveAspectRatio" attribute has no effect (with one exception, the "image" element).
the xlink:href attribute defines a reference to a resource as a reference IRI. The exact meaning of that link depends on the context of each element using it. (depreciated; use "href").
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 100 50">
<defs>
<filter id="image">
<feImage xlink:href="../pics/smiley.png"/>
</filter>
</defs>
<rect x="10%" y="10%" width="80%" height="80%"
style="filter:url(#image);"/>
</svg>
</div>
The <feMerge> SVG element allows filter effects to be applied concurrently instead of sequentially. This is achieved by other filters storing their output via the "result" attribute and then accessing it in a "feMergeNode" child.
No specific attributes.
codes:
<div style="margin-left: 4vw;">
<svg width="200" height="200">
<filter id="feOffset" x="-40" y="-20" width="100" height="200">
<feOffset in="SourceGraphic" dx="60" dy="60" />
<feGaussianBlur stdDeviation="5" result="blur2" />
<feMerge>
<feMergeNode in="blur2" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<rect x="40" y="40" width="100" height="100" style="stroke: #000000;
fill: green; filter: url(#feOffset);" />
</svg>
</div>
The "feMergeNode" takes the result of another filter to be processed by its parent <feMerge>.
Specific attributes include:
the in attribute identifies input for the given filter primitive. The value can be either one of the following six keywords (SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | "filter-primitive-reference"), or a string which matches a previous "result" attribute value within the same "filter" element. If no value is provided and this is the first filter primitive, then this filter primitive will use "SourceGraphic" as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input. If the value for result appears multiple times within a given "filter" element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute result.
codes:
<div style="margin-left: 4vw;">
<svg width="200" height="200">
<filter id="feOffset_1" x="-40" y="-20" width="100" height="200">
<feOffset in="SourceGraphic" dx="60" dy="60" />
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2_1" />
<feMerge>
<feMergeNode in="blur2_1" />
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill:
green; filter: url(#feOffset_1);" />
<rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill:
green;" />
</svg>
</div>
The <feMorphology> SVG filter primitive is used to erode or dilate the input image. Its usefulness lies especially in fattening or thinning effects.
Specific attributes include:
the in attribute identifies input for the given filter primitive. The value can be either one of the following six keywords (SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | "filter-primitive-reference"), or a string which matches a previous "result" attribute value within the same "filter" element. If no value is provided and this is the first filter primitive, then this filter primitive will use "SourceGraphic" as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input. If the value for result appears multiple times within a given "filter" element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute result.
the operator attribute has two meanings based on the context it's used in. Either it defines the compositing or morphing operation to be performed.
the radius attribute represents the radius (or radii) for the operation on a given "feMorphology" filter primitive. If two numbers are provided, the first number represents the x-radius and the second one the y-radius. If one number is provided, then that value is used for both x and y. The values are in the coordinate system established by the primitiveUnits attribute on the "filter" element. A negative or zero value disables the effect of the given filter primitive (i.e., the result is the filter input image).
codes:
<div style="margin-left: 4vw;">
<svg width="300" height="180">
<filter id="erode">
<feMorphology operator="erode" radius="1"/>
</filter>
<filter id="dilate">
<feMorphology operator="dilate" radius="2"/>
</filter>
<text y="1vw">Normal text</text>
<text id="thin" y="1.5vw">Thinned text</text>
<text id="thick" y="2vw">Fattened text</text>
</svg>
</div>
<style>
text {font-family: Arial, Helvetica, sans-serif; font-size: 3vw;}
#thin {filter: url(#erode);}
#thick { filter: url(#dilate);}
</style>
The <feOffset> SVG filter primitive allows to offset the input image. The input image as a whole is offset by the values specified in the dx and dy attributes.
Specific attributes include:
the dx attribute indicates a shift along the x-axis on the position of an element or its content.
the dy attribute indicates a shift along the y-axis on the position of an element or its content.
the in attribute identifies input for the given filter primitive..
codes:
<div style="margin-left: 4vw;">
<svg width="200" height="200">
<defs>
<filter id="offset_aa" width="180" height="180">
<feOffset in="SourceGraphic" dx="60" dy="60" />
</filter>
</defs>
<rect x="0" y="0" width="100" height="100" stroke="black"
fill="green"/>
<rect x="0" y="0" width="100" height="100" stroke="black"
fill="green"
filter="url(#offset_aa)"/>
</svg>
</div>
The <fePointLight> filter primitive defines a light source which allows to create a point light effect. It can be used within a lighting filter primitive: "feDiffuseLighting" or "feSpecularLighting".
Specific attributes include:
the x attribute defines a x-axis coordinate in the user coordinate system.
the y attribute defines a y-axis coordinate in the user coordinate system.
the z attribute defines the location along the z-axis for a light source in the coordinate system established by the primitiveUnits attribute on the "filter" element.
codes:
<div style="margin-left: 4vw;">
<svg width="200" height="200" >
<defs>
<filter id="spotlight">
<feSpecularLighting result="spotlight" specularConstant="1.5"
specularExponent="80" lighting-color="#FFF">
<fePointLight x="50" y="50" z="220"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="spotlight" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0"/>
</filter>
</defs>
<image xlink:href="cartoon.jpg" x="10%" y="10%" width="80%" height="80%"
style="filter:url(#spotlight);"/>
</svg>
</div>
The <feSpecularLighting> SVG filter primitive lights a source graphic using the alpha channel as a bump map. The resulting image is an RGBA image based on the light color. The lighting calculation follows the standard specular component of the Phong lighting model. The resulting image depends on the light color, light position and surface geometry of the input bump map. The result of the lighting calculation is added. The filter primitive assumes that the viewer is at infinity in the z direction.
This filter primitive produces an image which contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic "feComposite" method. Multiple light sources can be simulated by adding several of these light maps before applying it to the texture image.
Specific attributes include:
the in attribute identifies input for the given filter primitive.
the surfaceScale attribute represents the height of the surface for a light filter primitive.
the specularConstant attribute controls the ratio of reflection of the specular lighting. It represents the ks value in the Phong lighting model. The bigger the value the stronger the reflection.
the specularExponent attribute controls the focus for the light source. The bigger the value the brighter the light.
the kernelUnitLength attribute has two meanings based on the context it's used in. For lighting filter primitives, it indicates the intended distance for the x and y coordinates, for "feConvolveMatrix", it indicates the intended distance between successive columns and rows in the kernel matrix. (depreciated)
codes:
<div style="margin-left: 4vw;">
<svg height="200" width="200" viewBox="0 0 220 220">
<filter id = "filter">
<feSpecularLighting result="specOut" specularExponent="20"
lighting-color="#bbbbbb">
<fePointLight x="50" y="75" z="200"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0"/>
</filter>
<circle cx="110" cy="110" r="100" style="filter:url(#filter)"/>
</svg>
</div>
The <feSpotLight> SVG filter primitive defines a light source which allows to create a spotlight effect. It can be used within a lighting filter primitive: "feDiffuseLighting" or "feSpecularLighting".
Specific attributes include:
the x attribute defines a x-axis coordinate in the user coordinate system.
the y attribute defines a y-axis coordinate in the user coordinate system.
the z attribute defines the location along the z-axis for a light source in the coordinate system established by the primitiveUnits attribute on the "filter" element.
the pointsAtX attribute represents the x location in the coordinate system established by attribute primitiveUnits on the "filter" element of the point at which the light source is pointing.
the pointsAtY attribute represents the y location in the coordinate system established by attribute primitiveUnits on the "filter" element of the point at which the light source is pointing.
the pointsAtZ represents the y location in the coordinate system established by attribute primitiveUnits on the "filter" element of the point at which the light source is pointing, assuming that, in the initial local coordinate system, the positive z-axis comes out towards the person viewing the content and assuming that one unit along the z-axis equals one unit in x and y.
the specularExponent attribute ontrols the focus for the light source. The bigger the value the brighter the light.
the limitingConeAngle attribute represents the angle in degrees between the spot light axis (i.e. the axis between the light source and the point to which it is pointing at) and the spot light cone. So it defines a limiting cone which restricts the region where the light is projected. No light is projected outside the cone.
codes:
<div style="margin-left: 4vw;">
<svg width="200" height="200">
<defs>
<filter id="spotlight">
<feSpecularLighting result="spotlight" specularConstant="1.5"
specularExponent="4" lighting-color="#FFF">
<feSpotLight x="600" y="600" z="400" limitingConeAngle="5.5" />
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="spotlight" operator="out"
k1="0" k2="1" k3="1" k4="0"/>
</filter>
</defs>
<image xlink:href="../pics/cartoon.jpg" x="10%" y="10%" width="80%" height="80%"
style="filter:url(#spotlight);"/>
</svg>
</div>
The <feTile> SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image. The effect is similar to the one of a "pattern".
Specific attributes include:
the in attribute identifies input for the given filter primitive. The value can be either one of the following six keywords (SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | "filter-primitive-reference"), or a string which matches a previous "result" attribute value within the same "filter" element. If no value is provided and this is the first filter primitive, then this filter primitive will use "SourceGraphic" as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input. If the value for result appears multiple times within a given "filter" element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute result.
codes:
<div style="margin-left: 4vw;">
<svg width="200" height="200">
<defs>
<filter id="tile" x="0" y="0" width="100%" height="100%">
<feTile in="SourceGraphic" x="50" y="50" width="100" height="100"/>
<feTile/>
</filter>
</defs>
<image xlink:href="../pics/smiley.png" x="10%" y="10%" width="80%" height="80%"
style="filter:url(#tile);"/>
</svg>
</div>
The <feTurbulence> SVG filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble. The resulting image will fill the entire filter primitive subregion.
Specific attributes include:
the baseFrequency attribute represents the base frequency parameter for the noise function of the "feTurbulence" filter primitive.
the numOctaves attribute defines the number of octaves for the noise function of the "feTurbulence" primitive. An octave is a noise function defined by its frequency and amplitude. A turbulence is built by accumulating several octaves with increasing frequencies and decreasing amplitudes. The higher the number of octaves, the more natural the noise looks. Though more octaves also require more calculations, resulting in a negative impact on performance.
the seed attribute represents the starting number for the pseudo random number generator of the "feTurbulence" filter primitive.
the stitchTiles attribute defines how the Perlin Noise tiles behave at the border.
the type attribute indicates whether the filter primitive should perform a noise or turbulence function.
codes:
<div style="margin-left: 4vw;">
<svg width="200" height="200" viewBox="0 0 220 220">
<filter id="displacementFilter">
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"
result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50"
xChannelSelector="R" yChannelSelector="G"/>
</filter>
<circle cx="100" cy="100" r="100" style="filter: url(#displacementFilter)"/>
</svg>
</div>
The <filter> SVG element defines a custom filter effect by grouping atomic filter primitives. It is never rendered itself, but must be used by the "filter" attribute on SVG elements, or the filter CSS property for SVG/HTML elements.
Specific attributes includce:
the x attribute defines a x-axis coordinate in the user coordinate system.
the y attribute defines a y-axis coordinate in the user coordinate system.
the width attribute defines the horizontal length of an element in the user coordinate system.
the height attribute defines the vertical length of an element in the user coordinate system.
the filterRes attribute indicates the width and height of the intermediate images in pixels of a filter primitive. (depreciated)
the filterUnits attribute defines the coordinate system for the attributes "x", "y", "width" and "height".
the primitiveUnits attribute specifies the coordinate system for the various length values within the filter primitives and for the attributes that define the filter primitive subregion.
the xlink:href attribute defines a reference to a resource as a reference IRI. The exact meaning of that link depends on the context of each element using it. (depreciated)
codes:
<div style="margin-left: 4vw;">
<svg width="230" height="120">
<filter id="blurMe">
<feGaussianBlur stdDeviation="5"/>
</filter>
<circle cx="60" cy="60" r="50" fill="green"/>
<circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)"/>
</svg>
</div>
The <foreignObject> SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML.
Specific attributes include:
height: the height of the foreignObject. Value type: "length"|"percentage' ; default value: auto; animatable: yes
width: the width of the foreignObject. Value type: "length"|"percentage" ; default value: auto; animatable: yes
x: the x coordinate of the foreignObject. Value type: "length"|"percentage" ; default value: 0; snimatable: yes
y: the y coordinate of the foreignObject. Value type: "length"|"percentage" ; default value: 0; snimatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 200 200">
<style>
div.one { color: white; font: 1.5vw serif; height: 100%; overflow: auto; }
</style>
<polygon points="5,5 195,10 185,185 10,195" />
<!-- Common use case: embed HTML text into SVG -->
<foreignObject x="20" y="20" width="160" height="160">
<!-- In the context of SVG embedded in an HTML document, the XHTML
namespace could be omitted, but it is mandatory in the
context of an SVG document -->
<div class="one">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
porta vel dui convallis, rutrum imperdiet eros. Aliquam
erat volutpat.</div>
</foreignObject>
</svg>
</div>