SVG
filter
Sök…
Syntax
- Filterdeklaration:
<filter id="filter-id"> ... lista över primitiva barn ...</filter> - Använd filter via SVG-attribut:
<elementname filter="url(#filter-id)" ... /> - Använd filter via CSS-egenskap: (-prefix- ) filter: url ("# filter-id");
parametrar
| Elementattribut | detaljer |
|---|---|
| Filtrera region | Filterelementet kan valfritt definiera position, dimensioner, upplösning och enheter för utgången från en filtereffekt. Positionen och måtten på ett filter kan anges med följande parametrar: x, y, bredd, höjd. Standardvärdena är inte intuitiva och är: x: -10% y: -10% bredd: 120% höjd: 120% |
| Filterupplösning | filterRes attributet är ett valfritt attribut i SVG 1.1 som kan användas för att specificera upplösningen där filtret behandlas. Detta attribut hade ojämnt stöd och avskrivs nu i nuvarande webbläsare. |
| Filtrera enheter | Som standard ställs enheterna och koordinatsystemet för filtereffektregionen (x, y, bredd, höjd) för ett filterelement i förhållande till avgränsningsrutan för det element som refererar till filtret. I SVG-termer kallas detta "objectBoundingBox". När vi skriver x = "50%" betyder det "ställa in startpositionen för filterområdet på vänster sida av avgränsningsboxens referenselement + 50% av elementets bredd". Men du kan också specificera enheterna och koordinaterna uttryckligen genom att ställa in egenskapen filterUnits. De två alternativen är "objectBoundingBox" (det standard som vi just beskrev) eller "userSpaceOnUse". userSpaceOnUse ställer in filterenheterna och koordinatsystemet på duken för referenselementet, eller i SVG-termer, "userSpaceOnUse". |
| Primitiva enheter | Förutom enhetssystemet för själva filtret kan du också specificera enhetssystemet som filterets primärfilter ska använda via attributet primitiva enheter. Återigen är valet mellan userSpaceOnUse och objectBoundingBox. Dessa påverkar 0,0-koordinaterna och enhetsvärdena för filterprimitiven på samma sätt som för filterenheter. |
| Färg rymd | Standardfärgutrymmet för SVG-filter är linearRGB. Attributet för color-interpolation-filters tillval) kan ställas in på sRGB att ändra färgutrymmet till det mer konventionella sRGB-utrymmet. |
Anmärkningar
De flesta filterattribut kan animeras via <animate> -elementet, även om du måste använda "fakeSMIL" -biblioteket på IE för att uppnå samma resultat. SMIL-animering (elementet <animate> ) kommer att avskrivas till förmån för den nya Web Animations-specifikationen - som har mycket begränsat stöd i mitten av 2016.
Barnelement i filterelementet - filterprimitiv - har två valfria attribut som anger det färgutrymme inom vilket beräkningar av färginterpolering utförs: färginterpolering och färginterpoleringsfilter. Standarden för den förstnämnda är sRGB, och standard för den sistnämnda är linearRGB. Manipulationer som inverterar färgutrymmet (genom feColorMatrix eller feComponentTransfer) kan resultera i icke-intuitiva resultat - för de som används i CSS sRGB-färgutrymmet. Till exempel kommer en färginversion av en gråskalabild i linearRGB att resultera i en uttalad förskjutning mot vitare toner. Detta kan korrigeras genom att ställa in primitvärdet till sRGB. Dessa attribut kan ställas in på de enskilda filterprimitiven eller ärvas från själva filterelementet.
Om ingen annan ingång anges, men en krävs, kommer den första filterprimitiven i ett filter att ta en rasteriserad (bitmappad) version av det hänvisande elementet som dess ingång. Efterföljande filterprimitiv som förväntar sig en ingång tar resultatet av den omedelbart föregående filterprimitiv som input.
I komplexa filter kan det bli svårt att hålla reda på (och felsöka) in- och utgångar om de lämnas implicita; och det är god praxis att uttryckligen förklara input och output för varje primitiv.
SVG-filterprimitiv kan delas upp i samtal i ingångar, transformationer, belysningseffekter och kombinationer.
ingångar:
feFlood: genererar ett färgfält
feTurbulence: genererar en mängd olika ljudeffekter
feImage: genererar en bild från en extern bildreferens, data URI eller objektreferens (objektreferenser stöds inte i Firefox från mitten av december '12)
Transformations:
feColorMatrix: omvandlar ingångsvärdena för en RBGA-pixel till utgångsvärden
feComponentTransfer: justerar färgkurvan för en enskild färgkanal
feConvolveMatrix: ersätter varje pixel med en ny pixel beräknad utifrån pixelvärden i ett område relativt den aktuella pixeln)
feGaussianBlur: ersätter den aktuella pixeln med ett viktat genomsnitt av pixlar i ett område runt pixeln
feDisplacementMap: flyttar varje pixel från sin nuvarande position baserad på R-, G- eller B-värdena från en annan ingångsgrafik.
feMorphology: ersätter varje pixel med en ny pixel beräknad utifrån det maximala eller lägsta värdet för alla pixlar i ett rektangulärt område runt den pixeln.
feOffset: flyttar ingången från dess nuvarande position
Ljuseffekter:
feSpecularLighting: ger en "blank" 2D- eller pseudo-3D-belysningseffekt
feDiffuseLighting: ger en "matt" 2D- eller pseudo-3D-belysningseffekt
feDistantLight: ger en avlägsen ljuskälla för speciell eller diffus belysning
feSpotLight: tillhandahåller en ljuskälla i konisk sektion för speciell eller diffus belysning
fePointLight: tillhandahåller en punktljuskälla för speciell eller diffus belysning
kombinationer:
feMerge: skapar en enkel överkomposit från flera ingångar (inklusive tidigare filteringångar)
feBlend: blandar flera ingångar med blandningsregler
feComposite: kombinerar flera ingångar med angivna kombinationsregler med hänsyn till alfavärden.
feTile: brickor inmatar för att skapa ett upprepande mönster
Andra anteckningar
Även om SVG är en vektorgrafikteknik är det viktigt att betona att SVG-filter utför pixelnivåoperationer på alla ingångar (inklusive SVG-former) och producerar rasteriserade (bitmappade) utgångar med en specifik upplösningsnivå. Att tillämpa en 10x-skalaomvandling (till exempel) på en vanlig SVG-kurva som har filtrerats med normal skärmupplösning kommer att bilda pixelade kanter eftersom anti-aliasing av originalgrafiken har konverterats till pixlar av filtret och skalats upp. (Det är oklart om detta är speciellt kompatibelt eller bara en begränsning av nuvarande implementeringar)
Kom ihåg att SVG är XML när du skriver filter, så alla taggar måste vara stängda och många egenskaper och attribut krävs för att anges uttryckligen eller så kommer filtret inte att köras.
Ett filterelement återges aldrig direkt. Det hänvisas endast till med filteregenskapen på det element som filtret appliceras på. Observera att visningsegenskapen inte gäller filterelementet och att element inte direkt återges även om displayegenskapen är inställd på ett annat värde än "inget". Omvänt är filterelement tillgängliga för referenser även när thedisplayegenskapen i filterelementet eller någon av dess förfäder är inställd på "ingen".
Det kan hänvisas till SVG-filter via ett CSS-filter, men från och med mitten av 2016 stöds endast en delmängd primitiv via denna mekanism, och den här mekanismen stöds inte i Microsoft-webbläsare.
Oskärpa filter: feGaussian oskärpa (grundläggande)
<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>
( Källa bild av Daderot vid filbeskrivningssida)
Oskärpa filter: feGaussianBlur (x-axel och y-axel oskärpa inställd separat)
<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>
( Källa bild av Daderot vid filbeskrivningssida)
Oskärpa filter: feGaussianBlur med hårda kanter och 100% opacitet
<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>
( Källa bild av Daderot vid filbeskrivningssida)
Oskärpa filter: Box oskärpa
<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>
( Källa bild av Daderot vid filbeskrivningssida)
Oskärpa filter: Bokeh oskärpa (3 lager, klippt)
<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>
( Källa bild av Daderot vid filbeskrivningssida)
Shadow Filters: Basic Dropshadow
<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>
Shadow Filters: Inner Glow
<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>
Shadow Filters: Complex Dropshadow (konturerad, bullrig, formad)
<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>
Färgmanipuleringsfilter: Grundläggande gråskala
<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>
( Källa bild av Daderot vid filbeskrivningssida)
Färgmanipuleringsfilter: gråskala (endast grön kanal)
<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>
( Källa bild av Daderot vid filbeskrivningssida)
Färgmanipuleringsfilter: monoton
<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>
( Källa bild av Daderot vid filbeskrivningssida)
Oskärpa filter: Fokus oskärpa (Gaussian)
<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>
( Källa bild av Daderot vid filbeskrivningssida)
Färgmanipuleringsfilter: Posterizing
<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>
Oskärpa filter: Markera oskärpa
Detta filter väljer endast områden med hög ljusstyrka i en källgrafik, suddar innehållet och kompositerar det suddiga innehållet ovanpå originalet.
<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>