SVG
Filtry
Szukaj…
Składnia
- Deklaracja filtru:
<filter id="filter-id"> ... lista prymitywów potomnych ...</filter> - Zastosuj filtr za pomocą atrybutu SVG:
<elementname filter="url(#filter-id)" ... /> - Zastosuj filtr za pomocą właściwości CSS: (-prefix- ) filter: url ("# filter-id");
Parametry
| Atrybuty elementu | Detale |
|---|---|
| Filtruj region | Element filtrujący może opcjonalnie określać pozycję, wymiary, rozdzielczość i jednostki wyjściowe efektu filtra. Położenie i wymiary filtra można określić za pomocą następujących parametrów: x, y, szerokość, wysokość. Domyślne wartości nie są intuicyjne i wynoszą: x: -10% y: -10% szerokość: 120% wysokość: 120% |
| Rozdzielczość filtra | Atrybut filterRes jest opcjonalnym atrybutem w SVG 1.1, którego można użyć do określenia rozdzielczości, przy której filtr jest przetwarzany. Ten atrybut miał nierówną obsługę i jest obecnie nieaktualny w obecnych przeglądarkach. |
| Filtruj jednostki | Domyślnie jednostki i układ współrzędnych dla regionu efektu filtra (x, y, szerokość, wysokość) elementu filtru są ustawione względem ramki granicznej elementu odwołującego się do filtra. W kategoriach SVG nazywa się to „objectBoundingBox”. Kiedy piszemy x = „50%”, oznacza to „ustaw początkową pozycję x obszaru filtru po lewej stronie ramki granicznej elementu odniesienia + 50% szerokości elementu”. Możesz jednak również wyraźnie określić jednostki i współrzędne, ustawiając właściwość filterUnits. Dwie alternatywy to „objectBoundingBox” (wartość domyślna, którą właśnie opisaliśmy) lub „userSpaceOnUse”. userSpaceOnUse ustawia jednostki filtrujące i układ współrzędnych na kanwę elementu odniesienia lub, w kategoriach SVG, „userSpaceOnUse”. |
| Jednostki pierwotne | Oprócz systemu jednostek dla samego filtru można również określić system jednostek, który będą używane przez operacje podstawowe filtrów potomnych filtru za pomocą atrybutu primitiveUnits. Po raz kolejny można wybrać między userSpaceOnUse i objectBoundingBox. Wpływa to na współrzędne 0,0 i wartości jednostek dla prymitywów filtra w taki sam sposób, jak dla filterUnits. |
| Przestrzeń kolorów | Domyślna przestrzeń kolorów dla filtrów SVG to linearRGB. Opcjonalny atrybut color-interpolation-filters można ustawić na sRGB aby zmienić przestrzeń kolorów na bardziej konwencjonalną przestrzeń sRGB. |
Uwagi
Większość atrybutów filtrów można animować za pomocą elementu <animate> , chociaż aby uzyskać te same wyniki, należy użyć biblioteki „fakeSMIL” w przeglądarce IE. Animacja SMIL (element <animate> ) zostanie wycofana na korzyść nowej specyfikacji Web Animations - która w połowie 2016 roku ma bardzo ograniczone wsparcie.
Elementy potomne elementu Filter - prymitywy filtrów - mają dwa opcjonalne atrybuty określające przestrzeń kolorów, w której wykonywane są obliczenia interpolacji kolorów: interpolacja kolorów i filtry interpolacji kolorów. Domyślny dla pierwszego z nich to sRGB, a domyślny dla drugiego to linearRGB. Manipulacje, które odwracają przestrzeń kolorów (poprzez feColorMatrix lub feComponentTransfer) mogą dawać nieintuicyjne wyniki - dla tych używanych w przestrzeni kolorów sRGB CSS. Na przykład odwrócenie kolorów obrazu w skali szarości w linearRGB spowoduje wyraźne przesunięcie w kierunku tonów bielszych. Można to poprawić, ustawiając wartość prymitywu na sRGB. Te atrybuty można ustawić dla poszczególnych operacji podstawowych filtru lub odziedziczyć po samym elemencie filtru.
Jeśli żadne inne dane wejściowe nie są określone, ale jedno jest wymagane, pierwszy element podstawowy filtru w filtrze weźmie zrasteryzowaną (mapowaną bitowo) wersję elementu odsyłającego jako dane wejściowe. Kolejne operacje podstawowe filtru, które oczekują danych wejściowych, przyjmą wynik bezpośrednio poprzedzającej operacji podstawowej filtru.
W złożonych filtrach śledzenie (i debugowanie) danych wejściowych i wyjściowych może być trudne, jeśli są one niejawne; i dobrą praktyką jest jawne deklarowanie danych wejściowych i wyjściowych dla każdej operacji podstawowej.
Prymitywy filtrów SVG można potocznie podzielić na dane wejściowe, transformacje, efekty świetlne i kombinacje.
Wejścia:
feFlood: generuje pole koloru
feTurbulence: generuje szeroki zakres efektów hałasu
feImage: generuje obraz z zewnętrznego odwołania do obrazu, identyfikatora URI danych lub odwołania do obiektu (odwołania do obiektu nie są obsługiwane w Firefoksie od połowy grudnia '12)
Transformacje:
feColorMatrix: przekształca wartości wejściowe piksela RBGA w wartości wyjściowe
feComponentTransfer: dostosowuje krzywą kolorów poszczególnych kanałów kolorów
feConvolveMatrix: zastępuje każdy piksel nowym pikselem obliczonym na podstawie wartości pikseli w obszarze względem bieżącego piksela)
feGaussianBlur: zastępuje bieżący piksel średnią ważoną pikseli w obszarze wokół piksela
feDisplacementMap: przenosi każdy piksel z bieżącej pozycji na podstawie wartości R, G lub B z innej grafiki wejściowej.
feMorphology: zastępuje każdy piksel nowym pikselem obliczonym na podstawie maksymalnej lub minimalnej wartości wszystkich pikseli w prostokątnym obszarze wokół tego piksela.
feOffset: przenosi dane wejściowe z bieżącej pozycji
Efekty świetlne:
feSpecularLighting: zapewnia „błyszczący” efekt świetlny 2D lub pseudo-3D
feDiffuseLighting: zapewnia „matowy” efekt świetlny 2D lub pseudo-3D
feDistantLight: zapewnia odległe źródło światła dla światła zwierciadlanego lub rozproszonego
feSpotLight: zapewnia źródło światła o przekroju stożkowym do oświetlania zwierciadlanego lub rozproszonego
fePointLight: zapewnia punktowe źródło światła do oświetlenia zwierciadlanego lub rozproszonego
Kombinacje:
feMerge: tworzy prosty over-composite na podstawie wielu danych wejściowych (w tym poprzednich danych wejściowych filtrów)
feBlend: łączy wiele danych wejściowych przy użyciu reguł miksowania
feComposite: łączy wiele danych wejściowych przy użyciu ustawionych reguł kombinacji, biorąc pod uwagę wartości alfa.
feTile: płytki wejściowe, aby utworzyć powtarzalny wzór
Inne notatki
Chociaż SVG jest technologią grafiki wektorowej, należy podkreślić, że filtry SVG wykonują operacje na poziomie pikseli na wszystkich wejściach (w tym kształtach SVG) i wytwarzają zrasteryzowane (mapowane bitowo) wyjścia z określonym poziomem rozdzielczości. Zastosowanie transformacji 10-krotnej (na przykład) na zwykłej krzywej SVG, która została przefiltrowana przy normalnej rozdzielczości ekranu, spowoduje utworzenie pikselowanych krawędzi, ponieważ antyaliasing oryginalnej grafiki został przekonwertowany na piksele przez filtr i przeskalowany w górę. (Nie jest jasne, czy jest to zgodne ze specyfikacją, czy tylko ograniczenie obecnych implementacji)
Pamiętaj, że SVG to XML podczas pisania filtrów, więc wszystkie tagi muszą być zamknięte, a wiele właściwości i atrybutów musi być jawnie określonych, inaczej filtr się nie uruchomi.
Element filtrujący nigdy nie jest renderowany bezpośrednio. Odwołuje się do niego tylko przy użyciu właściwości filter na elemencie, do którego zastosowano filtr. Zauważ, że właściwość display nie ma zastosowania do elementu filtru i elementy nie są renderowane bezpośrednio, nawet jeśli właściwość display jest ustawiona na wartość inną niż „none”. I odwrotnie, elementy filtrujące są dostępne do odwoływania się, nawet jeśli właściwość display na filterelement lub którykolwiek z jego przodków jest ustawiona na „none”.
Do filtrów SVG można odwoływać się za pomocą filtra CSS, chociaż od połowy 2016 r. Tylko ten podzbiór prymitywów jest obsługiwany przez ten mechanizm, a ten mechanizm nie jest obsługiwany w przeglądarkach Microsoft.
Filtry rozmycia: feGaussian Blur (podstawowe)
<svg width="900px" height="400px" viewBox="0 0 900 400">
<defs>
<filter id="basicGaussian">
<feGaussianBlur stdDeviation="5"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#basicGaussian)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Zdjęcie źródłowe autorstwa Daderot z Wikimedia Commons)
Filtry rozmycia: feGaussianBlur (rozmycie osi x i osi y ustawione osobno)
<svg width="900px" height="400px" viewBox="0 0 900 400">
<defs>
<filter id="xAxisGaussian">
<feGaussianBlur stdDeviation="5 0"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#xAxisGaussian)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Zdjęcie źródłowe autorstwa Daderot z Wikimedia Commons)
Filtry rozmycia: feGaussianBlur z twardymi krawędziami i 100% kryciem
<svg width="900px" height="400px" viewBox="900 400">
<defs>
<filter id="GaussianHardEdge" x="0%" y="0%" width="100%" height="100%">
<feGaussianBlur stdDeviation="5"/>
<feComponentTransfer>
<feFuncA type="table" tableValues="1 1"/>
</feComponentTransfer>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#GaussianHardEdge)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Zdjęcie źródłowe autorstwa Daderot z Wikimedia Commons)
Filtry rozmycia: Rozmycie pudełka
<svg width="900px" height="400px" viewBox="900 400">
<defs>
<filter id="GaussianHardEdge" >
<feConvolveMatrix order="3" kernelMatrix=" 1 1 1
1 1 1
1 1 1"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#GaussianHardEdge)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Zdjęcie źródłowe autorstwa Daderot z Wikimedia Commons)
Filtry rozmycia: Rozmycie bokeh (3 warstwy, przycięte)
<svg width="900px" height="400px" viewBox="0 0 900 400">
<defs>
<filter id="BokehBlur" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="2" result="blurSource"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer result="brightness-mask" >
<feFuncA type="discrete" tableValues="0 0 0 1 1"/>
</feComponentTransfer>
<!--bokeh Layer 1 -->
<feTurbulence type="fractalNoise" seed="1" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="brightness-mask"/>
<feComposite operator="in" in="blurSource"/>
<feMorphology operator="dilate" radius="5"/>
<feGaussianBlur stdDeviation="8"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
0 0 0 9 0" />
<feComponentTransfer result="bokeh1">
<feFuncA type="linear" slope=".5" />
</feComponentTransfer>
<!--bokeh Layer 2 -->
<feTurbulence type="fractalNoise" seed="49" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="brightness-mask"/>
<feComposite operator="in" in="blurSource"/>
<feMorphology operator="dilate" radius="10"/>
<feGaussianBlur stdDeviation="12"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
0 0 0 15 0" />
<feComponentTransfer result="bokeh2">
<feFuncA type="linear" slope=".3" />
</feComponentTransfer>
<!--bokeh Layer 3 -->
<feTurbulence type="fractalNoise" seed="44" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="brightness-mask"/>
<feComposite operator="in" in="blurSource"/>
<feMorphology operator="dilate" radius="10"/>
<feGaussianBlur stdDeviation="18"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
0 0 0 15 0" />
<feComponentTransfer result="bokeh3">
<feFuncA type="linear" slope=".2" />
</feComponentTransfer>
<!--Merge -->
<feBlend mode="multiply" in="bokeh3" in2="bokeh2"/>
<feBlend mode="lighten" in2="bokeh1"/>
<feMorphology operator="erode" radius="0" result="bokeh"/>
<feGaussianBlur stdDeviation="9" in="SourceGraphic"/>
<feComposite operator="over" in="bokeh"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#BokehBlur)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Zdjęcie źródłowe autorstwa Daderot z Wikimedia Commons)
Filtry cienia: Podstawowy cień
<svg width="800px" height="600px">
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="5" dy="5" result="offsetblur"/>
<feFlood flood-color="red"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text filter="url(#drop-shadow)" x="30" y="100" font-size="80">SVG Filters</text>
</svg>
Filtry cienia: Blask wewnętrzny
<svg width="800px" height="600px">
<defs>
<filter id="inner-glow">
<feFlood flood-color="red"/>
<feComposite in2="SourceAlpha" operator="out"/>
<feGaussianBlur stdDeviation="2" result="blur"/>
<feComposite operator="atop" in2="SourceGraphic"/>
</filter>
</defs>
<text filter="url(#inner-glow)" x="30" y="100" font-size="80" font-family="Sans-Serif" font-weight="bold">SVG Filters</text>
</svg>
Filtry cienia: Złożony cień (konturowy, głośny, w kształcie)
<svg width="800px" height="600px">
<defs>
<filter id="complex-shadow" color-interpolation-filters="sRGB" x="-50%" y="-50%" height="200%" width="200%">
<!-- Take source alpha, offset it by angle/distance and blur it by size -->
<feOffset id="offset" in="SourceAlpha" dx="11" dy="6" result="SA-offset"/>
<feGaussianBlur id="blur" in="SA-offset" stdDeviation="4" result="SA-o-blur"/>
<!-- Apply a contour by using a color curve transform on the alpha and clipping the result to the input -->
<feComponentTransfer in="SA-o-blur" result="SA-o-b-contIN">
<feFuncA id="contour" type="table" tableValues="0 1 .3 .1 0.05 .1 .3 1 "/>
</feComponentTransfer>
<feComposite operator="in" in="SA-o-blur" in2="SA-o-b-contIN" result="SA-o-b-cont"/>
<!-- Adjust the spread by multiplying alpha by a constant factor --> <feComponentTransfer in="SA-o-b-cont" result="SA-o-b-c-sprd">
<feFuncA id="spread-ctrl" type="linear" slope="2.8"/>
</feComponentTransfer>
<!-- Adjust color and opacity by adding fixed offsets and an opacity multiplier -->
<feColorMatrix id="recolor" in="SA-o-b-c-sprd" type="matrix" values="0 0 0 0 0.945 0 0 0 0 0.137 0 0 0 0 0.137 0 0 0 0.49 0" result="SA-o-b-c-s-recolor"/>
<!-- Generate a grainy noise input with baseFrequency between approx .5 to 2.0. And add the noise with k1 and k2 multipliers that sum to 1 -->
<feTurbulence result="fNoise" type="fractalNoise" numOctaves="6" baseFrequency="1.98"/>
<feColorMatrix in="fNoise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 7 -3" result="clipNoise"/>
<feComposite id="noisemix" operator="arithmetic" in="SA-o-b-c-s-recolor" in2="clipNoise" k1="0.67" k2="0.33" result="SA-o-b-c-s-r-mix"/>
<!-- Merge the shadow with the original -->
<feMerge>
<feMergeNode in="SA-o-b-c-s-r-mix"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text filter="url(#complex-shadow)" x="30" y="100" font-size="80" font-family="Sans-Serif" font-weight="bold">SVG Filters</text>
</svg>
Filtry manipulacji kolorami: podstawowa skala szarości
<svg width="800px" height="600px">
<defs>
<filter id="greyscale">
<feColorMatrix type="matrix"
values="0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0 0 0 1 0"/>
</filter>
</defs>
<image
xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Zdjęcie źródłowe autorstwa Daderot z Wikimedia Commons)
Filtry manipulacji kolorami: Skala szarości (tylko kanał zielony)
<svg width="800px" height="600px">
<defs>
<filter id="greyscale">
<feColorMatrix type="matrix"
values="0 1 0 0 0
0 1 0 0 0
0 1 0 0 0
0 0 0 1 0"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Zdjęcie źródłowe autorstwa Daderot z Wikimedia Commons)
Filtry manipulacji kolorami: Monotone
<svg width="800px" height="600px">
<defs>
<filter id="greyscale">
<feColorMatrix type="matrix"
values=".2 .2 .2 0 0
.6 .6 .6 0 0
.2 .2 .2 0 0
0 0 0 1 0"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Zdjęcie źródłowe autorstwa Daderot z Wikimedia Commons)
Filtry rozmycia: Rozmycie ostrości (gaussowskie)
<svg width="800px" height="600px">
<defs>
<filter id="focus-blur" >
<feDiffuseLighting result = "diffOut" diffuseConstant = "1" lighting-color="white">
<feSpotLight id="spotlight" x = "500" y = "100" z = "150" pointsAtX = "500" pointsAtY = "100" pointsAtZ = "0" specularExponent ="12" limitingConeAngle="70"/>
</feDiffuseLighting>
<feColorMatrix in="diffOut" result="alphaMap" type="luminanceToAlpha"/>
<feComponentTransfer in="alphaMap" result="invertlight">
<feFuncA type="table" tableValues="1 0 0"/>
</feComponentTransfer>
<feGaussianBlur in="invertlight" result="featherspot" stdDeviation="5"/>
<feComposite operator="xor" result="infocus" in2="SourceGraphic" in="featherspot"/>
<feGaussianBlur in="SourceGraphic" result="outfocus" stdDeviation="2"/>
<feComposite operator="over" in="infocus" in2="outfocus"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#focus-blur)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Zdjęcie źródłowe autorstwa Daderot z Wikimedia Commons)
Filtry manipulacji kolorami: Posteryzacja
<svg width="800px" height="600px" >
<defs>
<filter id="posterize" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 0.25 0.75 1.0"/>
<feFuncG type="discrete" tableValues="0 0.25 0.75 1.0"/>
<feFuncB type="discrete" tableValues="0 0.25 0.75 1.0"/>
</feComponentTransfer>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/42/Andy_Warhol_1975.jpg" x="20px" y="20px" width="300px" height="600px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#posterize)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/42/Andy_Warhol_1975.jpg" x="340px" y="20px" width="300px" height="600px" preserveAspectRatio="xMinYMin meet"/>
</svg>
Filtry rozmycia: wyróżnij rozmycie
Ten filtr wybiera tylko obszary o wysokiej luminancji grafiki źródłowej, rozmywa zawartość i łączy zamazaną zawartość na oryginale.
<svg width="800px" height="600px">
<defs>
<filter id="highlightblur" color-interpolation-filters="sRGB">
<feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="lumMap"/>
<feComponentTransfer in="lumMap" result="highlightMask">
<feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="SourceGraphic" in2="highlightMask" result="highlights"/>
<feGaussianBlur in="highlights" stdDeviation="3" result="highBlur"/>
<feComposite operator="over" in="highBlur" in2="SourceGraphic" result="final"/>
</filter>
</defs>
<image filter="url(#highlightblur)" x="0" y="-40" width="780" height="600" preserveAspectRatio="true" xlink:href="http://i554.photobucket.com/albums/jj424/allbowerpower/Christmas%202009/ChristmasTablesetting016b.jpg"
/>
</svg>