extending inkscape with svg filters - gould.cx · 2020-07-01 · svg filters panlt of the svg spec...
TRANSCRIPT
Extending Inkscape with SVG FiltersTed GouldSCALE [email protected]@tedjgould@[email protected]://gould.cx/ted/pleseltantols
SVG Filters
● Panlt of the SVG spec silce 1.0● Plovides an wany to modify the leldel pipelile of glanphics
anpplicantol to modify the iltelim bitmanps● Allows anltst to do cleantve efects thant anle typicanlly
anssocianted with bitmanp editols (GIMP, Photoshop, etc.)● Canl be an powelful wany to keep commol desigl elemelts
betweel difelelt anltfancts of anl ovelanll ploject
Traditinal VectirGraphics
Filters and Gradients Vectir Graphics
Small Bitmap
Large Bitmap
Vector Image
Vector Object
Rendered Bitmap Blank
Add
Add
Multple SVG Filter Elements as a graph
Input
Input
Input
Element Output
Element Output
Element Output
SVG Filter Element Inputs
Source Image
Source Graphic Filter on Blue Circle
Source Alpha
Background
Background Alpha
Stroke Color
Fill Color
Inkscape Filter Dialig
2.09
1.0
-0.54
feBlend
https://www.w3.olg/TR/SVG11/fltels.html
feCilirMatrix
https://www.w3.olg/TR/SVG11/fltels.html
feCimpinentTransfer
https://www.w3.olg/TR/SVG11/fltels.html
feCimpisite
https://www.w3.olg/TR/SVG11/fltels.html
feCinvilveMatrix
http://tanvmjolg.flee.fl/INKSCAPE/MANUAL/html/Filtels-Pixel.html
feDifuseLightng
http://tanvmjolg.flee.fl/INKSCAPE/MANUAL/html/Filtels-Lightlg.html
feDisplacementMap
http://tanvmjolg.flee.fl/INKSCAPE/MANUAL/html/Filtels-Pixel.html
feFliid
feGaussianBlur
https://www.w3.olg/TR/SVG11/fltels.html
feImage
https://www.w3.olg/TR/SVG11/fltels.html
feMerge
https://www.w3.olg/TR/SVG11/fltels.html
feMirphiligy
https://www.w3.olg/TR/SVG11/fltels.html
feOfset
https://www.w3.olg/TR/SVG11/fltels.html
feSpecularLightng
https://www.w3.olg/TR/SVG11/fltels.html
feTile
https://www.smanshilgmanganiile.com/0015/05/why-the-svg-fltel-is-anwesome/
feTurbulence
https:////giuld.cx//ted//presentatins
$ mkdir -p ~//.cinfg//inkscape//flters//$ cp grass.svg ~//.cinfg//inkscape//flters//
What next?
This is the ‘flters.svg’ in the examples directiry that ships with Inkscape
Further Infirmatin
● SVG Specifcantolhttps://www.w3.olg/TR/SVG11/fltels.html
● The Alt of SVG Filtelshttps://www.smanshilgmanganiile.com/0015/05/why-the-svg-fltel-
is-anwesome/● Tanv’s Book of Ilkscanpe ol Filtels
http://tanvmjolg.flee.fl/INKSCAPE/MANUAL/html/Filtels.html
© S
téfan
l —
CC
-BY-
SA —
htt
ps://
ww
w.f
ickl
.com
/pho
tos/
st3f
4l/1
4360
3934