svg.filter.js
A plugin for svg.js adding filter functionality.
Svg.filter.js is licensed under the terms of the MIT License.
Usage
Include this plugin after including the svg.js library in your html document.
For a few visual examples look at the svg.js filter page.
Here is how each filter effect on the example page is achieved.
Examples
- gaussian blur
- horizontal blur
- desaturate
- contrast
- sepiatone
- hue rotate 180
- luminance to alpha
- colorize
- posterize
- darken
- lighten
- invert
- gamma correct 1
- gamma correct 2
- drop shadow
- extrude
original
var image = drawsize300 300
gaussian blur
image
horizontal blur
image
desaturate
image
contrast
image
sepiatone
image
hue rotate 180
image
luminance to alpha
image
colorize
image
posterize
image
darken
image
lighten
image
invert
image
gamma correct 1
image
gamma correct 2
image
drop shadow
You will notice that all the effect descriptions have a drop shadow. Here is how this drop shadow can be achieved:
var text = drawtext'SVG text with drop shadow' text
This technique can be achieved on any other shape of course:
var rect = draw rect
If the drop shadow should get the colour of the shape so it appears like coloured glass:
var rect = draw rect
extrude
image
Furthermore
Some more features you should know about.
unfilter
The unfilter
method removes the filter attribute from the node:
image
This will return the element to its original state but will retain the filter in the defs node. If the filter node should be removed as well, simply pass the true
as the first argument:
image
referencing the filter node
An internal reference to the filter node is made in the element:
imagefilterer
This can also be very useful to reuse an existing filter on various elements:
otherImage
Animating filter values
Every filter value can be animated as well:
var hueRotate image hueRotate
Chaining Effects
Method chaining is a programing style where each function retures the object it blongs to, for an example look at JQuery.
its posible to chain the effects on a filter when you are creating them, for example
image
this would create a basic shadow filter where the first input on the composite
effect would be the flood
effect, and the input on the offset effect would be the composite
effect.
same with the merge
effect, its first input would be the offset
effect, and its second input would be add.source
some effects like Merge, Blend, Composite, DisplacementMap have thier arguments changed when they are chained, for example
image
the composite
effects first input is set to the flood
effect and its second input becomes the first argument, this is the same for the merge, blend, composite, and displacmentMap effect.
for more details check out each effects doc below
Effect Classes
- Base Effect Class
- Blend
- ColorMatrix
- ComponentTransfer
- Composite
- ConvolveMatrix
- DiffuseLighting
- DisplacementMap
- Flood
- GaussianBlur
- Image
- Merge
- Morphology
- Offset
- SpecularLighting
- Tile
- Turbulence
Base Effect Class
in(effect)
gets or sets the in
attribute of the effect
some effect like Blend, Composite, DisplacementMap have a in2
function, it works the same as the as
- effect: this can be another effect or a string
if effect is not provided it will look for another effect on the same filter whosresult
is equal to this effectsin
, else it will return the value of thein
attributeimage
result(string)
gets or sets the result
attribute of the effect
- string: if no string if provided it will act as a getter and return the value of the
result
attruibute
Blend
filter//orin1 in2 mode
- in1: an effect or the result of effect
- in2: same as in1
- mode: "normal | multiply | screen | darken | lighten" defaults to "normal"
chaining when this effect is called right after another effect, for example:
filter
the first input is set to the offset
effect and the second input is set to filter.source
or what ever was passed as the first argument, and the second input becomes the mode
ColorMatrix
filter;//ortype values;
- type: "matrix | saturate | hueRotate | luminanceToAlpha"
- values
- type="matrix": values would be a matrix the size of 4x5
- type="saturate": number (0 to 1)
- type="hueRotate": number (0 to 360) deg
- type="luminanceToAlpha": value not needed
ComponentTransfer
filter;//orcomponents;
- components: an object with one
rgb
property for the (r, g and b) chanels orr
,g
,b
,a
properties for each chanelrgb:type: "identity | table | discrete | linear | gamma"//type="table"tableValues: "0 0.5 2 1" //number sperated by spaces//type="linear"slope: 1 //numberintercept: 3//number//type="gamma"amplitude: 0 //numberexponent: 0 //numberoffset: 0 //number
Composite
filter;//orin1 in2 operator;
- in1: an effect or the result of an effect
- in2: same as in1
- operator: "over | in | out | atop | xor | arithmetic" defaults to "over"
chaining when this effect is called right after another effect, for example:
filter
the first input is set to the flood
effect and the second input is set to filter.sourceAlpha
or what ever was passed as the first argument.
also the second argument becomes the operator
ConvolveMatrix
filter;//ormatrix;
- matrix: a square matrix of numbers that will be applied to the image
- exmaple:
100010001
DiffuseLighting
filter;//orsurfaceScale diffuseConstant kernelUnitLength;
very complicated, just check out the W3 doc
DisplacementMap
filter;//orin1 in2 scale xChannelSelector yChannelSelector;
very complicated, just check out the W3 doc
chaining when this effect is called right after another effect, for example:
filter
the first input is set to the offset
effect and the second input is set to filter.source
or what ever was passed as the first argument.
also the second argument becomes the scale, and the third argument is the xChannelSelector and so on
Flood
filter;//orcoloropacity;
- color: a named or hex color in string format
- opacity: number form 0 to 1
GaussianBlur
filter;//orx y;
- x: blur on the X
- y: blur on the y, will default to the x if not provided
Image
filter;//orsrc;
Merge
filter;//or;
- Array: an Array of effects or effect results
filter.merge([effectOne,"result-two",another_effect])
- SVG.Set: a set of effects
- arguments: pass each effect or result in as arguments
filter.merge(effect,"some-result",anotherEffect)
- chianing you can also chian the merge effect
filter.offset(10).merge(anotherEffect)
will result in a merge effect with its first input set to theoffset
effect and its second input set toanotherEffect
Morphology
filter;//oroperator radius;
- operator: "erode | dilate"
- radius: a single number or a string of two number sperated by a space
- the first number is the X
- the second number is the Y, if no provided it will default to the first number
Offset
filter;//orx y;
- x: move on the X
- y: move on the y, will default to the x if not provided
SpecularLighting
filter;//orsurfaceScale diffuseConstant specularExponent kernelUnitLength;
very complicated, just check out the W3 doc
Tile
filter;//or;
no arguments, but if you want to find out what it dose check out the W3 doc
Turbulence
filter;//orbaseFrequency numOctaves seed stitchTiles type;
very complicated, just check out the W3 doc