- From: Erik Dahlstrvm via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 07 Jan 2011 13:09:14 +0000
- To: public-fx-editors@w3.org
Update of /sources/public/Graphics-FX/modules/filters/publish/examples
In directory hutz:/tmp/cvs-serv18802
Added Files:
enable-background-01.png enable-background-01.svg feBlend.png
feBlend.svg feColorMatrix.png feColorMatrix.svg
feComponentTransfer.png feComponentTransfer.svg
feComposite.png feComposite.svg feDropShadow.svg
feGaussianBlur-stdDeviation-00.png
feGaussianBlur-stdDeviation-00.svg feMorphology.png
feMorphology.svg feTurbulence.png feTurbulence.svg
filters00.png filters00.svg filters01-0.png filters01-0.svg
filters01-1.png filters01-1.svg filters01-2.png
filters01-2.svg filters01-3.png filters01-3.svg
filters01-4.png filters01-4.svg filters01-5.png
filters01-5.svg filters01-6.png filters01-6.svg filters01.png
filters01.svg filtersubregion00.png filtersubregion00.svg
Forque.svg
Log Message:
Moved filters spec from dev.w3.org/SVG/modules/filters.
--- NEW FILE: feComponentTransfer.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: feColorMatrix.svg ---
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="5cm" viewBox="0 0 800 500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example feColorMatrix - Examples of feColorMatrix operations</title>
<desc>Five text strings showing the effects of feColorMatrix:
an unfiltered text string acting as a reference,
use of the feColorMatrix matrix option to convert to grayscale,
use of the feColorMatrix saturate option,
use of the feColorMatrix hueRotate option,
and use of the feColorMatrix luminanceToAlpha option.</desc>
<defs>
<linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
x1="100" y1="0" x2="500" y2="0">
<stop offset="0" stop-color="#ff00ff" />
<stop offset=".33" stop-color="#88ff88" />
<stop offset=".67" stop-color="#2020ff" />
<stop offset="1" stop-color="#d00000" />
</linearGradient>
<filter id="Matrix" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feColorMatrix type="matrix" in="SourceGraphic"
values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0"/>
</filter>
<filter id="Saturate40" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feColorMatrix type="saturate" in="SourceGraphic" values="40%"/>
</filter>
<filter id="HueRotate90" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/>
</filter>
<filter id="LuminanceToAlpha" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a"/>
<feComposite in="SourceGraphic" in2="a" operator="in" />
</filter>
</defs>
<rect fill="none" stroke="blue"
x="1" y="1" width="798" height="498"/>
<g font-family="Verdana" font-size="75"
font-weight="bold" fill="url(#MyGradient)" >
<rect x="100" y="0" width="500" height="20" />
<text x="100" y="90">Unfiltered</text>
<text x="100" y="190" filter="url(#Matrix)" >Matrix</text>
<text x="100" y="290" filter="url(#Saturate40)" >Saturate</text>
<text x="100" y="390" filter="url(#HueRotate90)" >HueRotate</text>
<text x="100" y="490" filter="url(#LuminanceToAlpha)" >Luminance</text>
</g>
</svg>
--- NEW FILE: feBlend.svg ---
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="5cm" viewBox="0 0 500 500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example feBlend - Examples of feBlend modes</title>
<desc>Five text strings blended into a gradient,
with one text string for each of the five feBlend modes.</desc>
<defs>
<linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
x1="100" y1="0" x2="300" y2="0">
<stop offset="0" stop-color="#000000" />
<stop offset=".33" stop-color="#ffffff" />
<stop offset=".67" stop-color="#ff0000" />
<stop offset="1" stop-color="#808080" />
</linearGradient>
<filter id="Normal">
<feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
<filter id="Multiply">
<feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
<filter id="Screen">
<feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
<filter id="Darken">
<feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
<filter id="Lighten">
<feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
</defs>
<rect fill="none" stroke="blue"
x="1" y="1" width="498" height="498"/>
<g enable-background="new" >
<rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)" />
<g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" >
<text x="50" y="90" filter="url(#Normal)" >Normal</text>
<text x="50" y="180" filter="url(#Multiply)" >Multiply</text>
<text x="50" y="270" filter="url(#Screen)" >Screen</text>
<text x="50" y="360" filter="url(#Darken)" >Darken</text>
<text x="50" y="450" filter="url(#Lighten)" >Lighten</text>
</g>
</g>
</svg>
--- NEW FILE: feMorphology.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: feMorphology.svg ---
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="7cm" viewBox="0 0 700 500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example feMorphology - Examples of erode and dilate</title>
<desc>Five text strings drawn as outlines.
The first is unfiltered. The second and third use 'erode'.
The fourth and fifth use 'dilate'.</desc>
<defs>
<filter id="Erode3">
<feMorphology operator="erode" in="SourceGraphic" radius="3" />
</filter>
<filter id="Erode6">
<feMorphology operator="erode" in="SourceGraphic" radius="6" />
</filter>
<filter id="Dilate3">
<feMorphology operator="dilate" in="SourceGraphic" radius="3" />
</filter>
<filter id="Dilate6">
<feMorphology operator="dilate" in="SourceGraphic" radius="6" />
</filter>
</defs>
<rect fill="none" stroke="blue" stroke-width="2"
x="1" y="1" width="698" height="498"/>
<g enable-background="new" >
<g font-family="Verdana" font-size="75"
fill="none" stroke="black" stroke-width="6" >
<text x="50" y="90">Unfiltered</text>
<text x="50" y="180" filter="url(#Erode3)" >Erode radius 3</text>
<text x="50" y="270" filter="url(#Erode6)" >Erode radius 6</text>
<text x="50" y="360" filter="url(#Dilate3)" >Dilate radius 3</text>
<text x="50" y="450" filter="url(#Dilate6)" >Dilate radius 6</text>
</g>
</g>
</svg>
--- NEW FILE: filters01-6.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: filters01-5.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: filters01-4.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: filters01.svg ---
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="7.5cm" height="5cm" viewBox="0 0 200 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example filters01.svg - introducing filter effects</title>
<desc>An example which combines multiple filter primitives
to produce a 3D lighting effect on a graphic consisting
of the string "SVG" sitting on top of oval filled in red
and surrounded by an oval outlined in red.</desc>
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#MyFilter)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
</svg>
--- NEW FILE: feDropShadow.svg ---
<?xml version="1.0"?>
<svg viewBox="0 0 800 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example feDropShadow - Examples of feDropShadow operations</title>
<desc>Four text strings showing the effects of feComponentTransfer:
an identity function acting as a reference,
use of the feComponentTransfer table option,
use of the feComponentTransfer linear option,
and use of the feComponentTransfer gamma option.</desc>
<defs>
<filter id="feDropShadowEquiv1">
<feGaussianBlur stdDeviation="3"/>
<feOffset dx="3" dy="3" result="offsetblur"/>
<feFlood flood-color="#720"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="feDropShadowEquiv2">
<feGaussianBlur stdDeviation="2"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feFlood/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="feDropShadow1">
<feDropShadow stdDeviation="3" flood-color="#720"/>
</filter>
<filter id="feDropShadow2">
<feDropShadow/>
</filter>
</defs>
<rect fill="none" stroke="blue"
x="1" y="1" width="798" height="398"/>
<g font-family="Verdana" font-size="30">
<text x="100" y="90" filter="url(#feDropShadow1)">feDropShadow</text>
<text x="100" y="140" filter="url(#feDropShadowEquiv1)" >feDropShadow</text>
<text x="100" y="190" filter="url(#feDropShadow2)">feDropShadow</text>
<text x="100" y="240" filter="url(#feDropShadowEquiv2)" >feDropShadow</text>
</g>
</svg>
--- NEW FILE: feComponentTransfer.svg ---
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="4cm" viewBox="0 0 800 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example feComponentTransfer - Examples of feComponentTransfer operations</title>
<desc>Four text strings showing the effects of feComponentTransfer:
an identity function acting as a reference,
use of the feComponentTransfer table option,
use of the feComponentTransfer linear option,
and use of the feComponentTransfer gamma option.</desc>
<defs>
<linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
x1="100" y1="0" x2="600" y2="0">
<stop offset="0" stop-color="#ff0000" />
<stop offset=".33" stop-color="#00ff00" />
<stop offset=".67" stop-color="#0000ff" />
<stop offset="1" stop-color="#000000" />
</linearGradient>
<filter id="Identity" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="identity"/>
<feFuncG type="identity"/>
<feFuncB type="identity"/>
<feFuncA type="identity"/>
</feComponentTransfer>
</filter>
<filter id="Table" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="table" tableValues="0 0 1 1"/>
<feFuncG type="table" tableValues="1 1 0 0"/>
<feFuncB type="table" tableValues="0 1 1 0"/>
</feComponentTransfer>
</filter>
<filter id="Linear" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="linear" slope=".5" intercept=".25"/>
<feFuncG type="linear" slope=".5" intercept="0"/>
<feFuncB type="linear" slope=".5" intercept=".5"/>
</feComponentTransfer>
</filter>
<filter id="Gamma" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/>
<feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/>
<feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/>
</feComponentTransfer>
</filter>
</defs>
<rect fill="none" stroke="blue"
x="1" y="1" width="798" height="398"/>
<g font-family="Verdana" font-size="75"
font-weight="bold" fill="url(#MyGradient)" >
<rect x="100" y="0" width="600" height="20" />
<text x="100" y="90">Identity</text>
<text x="100" y="190" filter="url(#Table)" >TableLookup</text>
<text x="100" y="290" filter="url(#Linear)" >LinearFunc</text>
<text x="100" y="390" filter="url(#Gamma)" >GammaFunc</text>
</g>
</svg>
--- NEW FILE: Forque.svg ---
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<desc>
Free font by Tup Wanders, http://www.tupwanders.nl, Licensed with a Creative Commons attribution license.
</desc>
<font id="FORQUE" horiz-adv-x="815" >
<font-face font-family="FORQUE" font-weight="400" font-stretch="normal" units-per-em="2048" panose-1="2 0 5 0 0 0 0 0 0 0" ascent="1638" descent="-410" x-height="1233" cap-height="1434" bbox="-80 -418 1521 1579" underline-thickness="150" underline-position="-142" unicode-range="U+0020-U+20AC"/>
<missing-glyph horiz-adv-x="389" />
<glyph glyph-name=".notdef" horiz-adv-x="389" />
<glyph glyph-name=".null" horiz-adv-x="0" />
<glyph glyph-name="nonmarkingreturn" horiz-adv-x="682" />
<glyph glyph-name="space" unicode=" " horiz-adv-x="389" />
<glyph glyph-bame="tab" unicode="	" horiz-adv-x="389" />
<glyph glyph-bame="uni00A0" unicode=" " horiz-adv-x="389" />
<glyph glyph-name="exclam" unicode="!" horiz-adv-x="417" d="M298 392h-287v1042h287v-1042zM258 242q-42 42 -102 42q-59 0 -101 -42q-43 -42 -43 -101q0 -60 43 -102q42 -42 101 -42q60 0 102 42t42 102q0 59 -42 101z" />
<glyph glyph-name="quotedbl" unicode=""" horiz-adv-x="706" d="M257 1392q-42 42 -101 42q-60 0 -102 -42t-42 -101q0 -51 32 -91q32 -39 81 -50q-38 -77 -112 -121q39 1 76 12q77 22 132 80q54 57 73 132q5 19 5 38q0 59 -42 101zM597 1392q-42 42 -101 42q-60 0 -102 -42t-42 -101q0 -51 32 -91q32 -39 81 -50q-38 -77 -112 -121 q39 1 76 12q77 22 132 80q54 57 73 132q5 19 5 38q0 59 -42 101z" />
<glyph glyph-name="numbersign" unicode="#" horiz-adv-x="1336" d="M596 859l-85 -290h242l86 290h-243zM673 1434h93l-141 -477h242l142 477h92l-141 -477h259l-29 -97h-259l-83 -290h279l-30 -98h-280l-140 -472h-92l139 472h-240l-142 -472h-92l140 472h-273l30 98h271l86 290h-295l29 97h295z" />
<glyph glyph-name="dollar" unicode="$" horiz-adv-x="1014" d="M577 1552v-102q68 -8 141 -35q10 -6 19 -6q25 0 41 45h50l103 -282h-49q-60 134 -168 179q-74 30 -137 39v-540q241 -93 322.5 -183t81.5 -264q0 -197 -119.5 -300t-284.5 -120v-239h-73v237q-188 3 -266 38q-10 6 -19 6q-25 0 -41 -45h-50v331h49q50 -183 152.5 -226 t174.5 -43v635q-214 67 -299 153q-92 91 -92 249q0 166 125 271q105 88 266 102v100h73zM577 655v-610q125 17 211.5 96t86.5 219q0 116 -69 183q-62 59 -229 112zM504 873v520q-119 -5 -199 -72q-86 -73 -86 -182q0 -98 55 -153q52 -54 230 -113z" />
<glyph glyph-name="percent" unicode="%" horiz-adv-x="1610" d="M1026 230q-54 53 -54 128q0 76 54 129q53 53 129 53q75 0 128 -53q54 -53 54 -129q0 -75 -54 -128q-53 -54 -128 -54q-76 0 -129 54zM901 612q-106 -105 -106 -254q0 -148 106 -254q105 -105 254 -105q148 0 253 105q106 106 106 254q0 149 -106 254q-105 105 -253 105 q-149 0 -254 -105zM235 939q-53 53 -53 129q0 75 53 128q54 54 129 54q76 0 129 -54q53 -53 53 -128q0 -76 -53 -129t-129 -53q-75 0 -129 53zM110 1322q-105 -106 -105 -254q0 -149 105 -254t254 -105t254 105t105 254q0 148 -105 254q-105 105 -254 105t-254 -105zM320 0 h-304l1200 1434h305z" />
<glyph glyph-name="ampersand" unicode="&" horiz-adv-x="1138" d="M672 375h-1v-13q0 -30 -21 -51t-51 -21h-237q-30 0 -51 21t-21 51t21 51q21 22 51 22h310v-60zM1041 430v287h-90v214h-286v-214h-307q-29 0 -50 21t-21 51v286q0 30 21 51t50 21q26 0 46 -16l5 -5v0v0l5 -5q-2 2 0 -1q2 -2 4 -5q-1 2 0 0q2 -3 4 -5q-2 2 0 -1q1 -3 3 -6 q-1 0 1 -3l1 -3q0 -1 1 -4q1 -4 1 -3v-5q1 -3 1 -2v-8v-14v-16h287v32q-1 147 -105 252q-104 104 -252 105h-14v0q-145 -6 -245 -109q-101 -105 -101 -250v-288q1 -119 72 -213q-72 -96 -72 -216q0 -148 105 -253t253 -105h236q119 1 214 72q95 -71 214 -72h14v287h-13 q-30 0 -51 21t-21 50v72h90z" />
<glyph glyph-name="asterisk" unicode="*" horiz-adv-x="1024" d="M498 1294q-4 71 -37 130q-37 66 -37 84q0 32 23.5 51.5t62.5 19.5q37 0 61.5 -18t24.5 -47q0 -21 -36 -89q-33 -61 -37 -130q66 25 113 75q51 55 69 61q11 3 21 3q18 0 35 -10q26 -17 38 -53q6 -19 6 -36q0 -15 -4 -28q-10 -30 -38 -38q-6 -2 -19 -2q-25 0 -76 9 q-28 5 -55 5q-41 0 -81 -11q44 -55 105 -83q68 -32 79 -47q13 -18 13 -38q0 -9 -2 -17q-8 -30 -39 -53q-29 -22 -59 -22q-1 0 -1 1q-31 0 -48 23q-12 17 -22 94q-10 67 -47 125q-38 -58 -46 -124q-9 -75 -20 -90q-19 -25 -49 -27h-5q-28 0 -57 21q-30 21 -39 51q-4 10 -4 20 q0 17 11 32q13 17 83 51q61 29 105 82q-41 11 -80 11q-27 0 -53 -5q-54 -11 -78 -11q-9 0 -14 2q-30 9 -41 38q-6 13 -6 29q0 17 6 36q11 35 36 53q17 12 34 12q9 0 18 -3q20 -6 74 -62q47 -49 112 -75z" />
<glyph glyph-name="plus" unicode="+" horiz-adv-x="836" d="M731 573h-215v213h-288v-213h-215v-287h215v-218h288v218h215v287z" />
<glyph glyph-name="comma" unicode="," horiz-adv-x="420" d="M267 242q-42 42 -101 42q-60 0 -102 -42t-42 -101q0 -51 32 -91q32 -39 81 -50q-38 -77 -112 -121q39 1 76 12q77 22 132 80q54 57 73 132q5 19 5 38q0 59 -42 101z" />
<glyph glyph-name="uni00AD" unicode="-" horiz-adv-x="824" d="M10 573h718v-287h-718v287z" />
<glyph glyph-name="uni00AD" unicode="­" horiz-adv-x="824" d="M10 573h718v-287h-718v287z" />
<glyph glyph-name="period" unicode="." horiz-adv-x="414" d="M251 242q-42 42 -101 42q-60 0 -102 -42t-42 -101q0 -60 42 -102t102 -42q59 0 101 42t42 102q0 59 -42 101z" />
<glyph glyph-name="slash" unicode="/" horiz-adv-x="569" d="M93 -50h-80l541 1484h80z" />
<glyph glyph-name="zero" unicode="0" horiz-adv-x="821" d="M440 329q0 -30 -21 -51t-51 -21q-29 0 -50 21t-21 50v778q0 29 21 50t50 21q30 0 51 -21t21 -50v-777zM727 1107q-1 148 -106 253q-105 104 -253 104q-147 0 -252 -104t-106 -251v-784q1 -147 106 -251t252 -104q148 0 253 104q105 105 106 253v0v780v0z" />
<glyph glyph-name="one" unicode="1" horiz-adv-x="476" d="M385 1107q0 148 -105 252q-104 104 -252 105h-14v-287h13q30 0 51 -21t21 -50v-1106h286v1107z" />
<glyph glyph-name="two" unicode="2" horiz-adv-x="818" d="M108 1359q-105 -105 -105 -253v-146h287v146q0 29 21 50t50 21q30 0 51 -21t21 -50v-317q0 -30 -21 -51t-50 -21h-13v0q-144 -5 -245 -109q-100 -104 -101 -248v-360h717v287h-430v72q0 29 21 50t50 21h13v1q144 5 245 108q100 104 101 248v319q0 148 -105 253t-254 105 q-148 0 -253 -105z" />
<glyph glyph-name="three" unicode="3" horiz-adv-x="818" d="M375 1464h-14q-148 -1 -252 -105t-105 -252v0v-8v-140h287v132v0v15v7q0 -1 1 2v5q0 -1 1 3q1 3 1 4l1 3q2 4 1 3q2 3 3 6q1 1 0 1q2 2 4 5q1 2 0 1q1 2 4 4q1 2 0 1q2 3 5 5v0q2 3 5 5v0q20 16 45 16h1q29 0 50 -21t21 -50v-317q0 -30 -21 -51t-50 -21h-172v-287h172 q29 0 50 -21t21 -50q0 -30 -21 -51t-50 -21h-359v-287h359q148 0 253 105t105 254q0 119 -72 215q72 94 72 213v319q0 145 -101 249q-100 104 -245 109v0z" />
<glyph glyph-name="four" unicode="4" horiz-adv-x="877" d="M323 575l113 244v-244h-113zM836 575h-113v859h-287l-430 -859v0v-286h430v-289h287v289h113v286z" />
<glyph glyph-name="five" unicode="5" horiz-adv-x="818" d="M727 1147v287h-717v-717h358q30 0 51 -21t21 -51v-316q0 -30 -21 -51t-51 -21q-29 0 -50 21t-21 51v151h-287v-151q0 -149 105 -254t253 -105q149 0 254 105t105 254v318q-1 147 -105 252q-104 104 -252 105h-73v143h430z" />
<glyph glyph-name="six" unicode="6" d="M369 717q30 0 51 -21t21 -51v-316q0 -30 -21 -51t-51 -21q-29 0 -50 21t-21 51v388h71zM298 1076q0 29 21 50t50 21h359v287h-360q-148 -1 -252 -105t-105 -252v-748q0 -149 105 -254t253 -105q149 0 254 105t105 254v318q-1 147 -105 252q-104 104 -252 105h-73v72z" />
<glyph glyph-name="seven" unicode="7" horiz-adv-x="762" d="M23 1434v-287h335l-351 -1147h297l438 1434h-719z" />
<glyph glyph-name="eight" unicode="8" d="M298 1106q0 29 21 50t50 21q30 0 51 -21t21 -50v-317q0 -30 -21 -51t-50 -21h-1q-29 0 -50 21t-21 51v317zM319 278q-21 21 -21 80q0 30 21 51t50 21h1q29 0 50 -21t21 -50q0 -60 -21 -81t-51 -21q-29 0 -50 21zM11 314q6 -144 110 -244t248 -100q145 0 249 100t110 244 v0v59v0q-5 112 -72 201q72 95 72 215v317q0 148 -105 253t-254 105q-148 0 -253 -105t-105 -253v-317q0 -120 72 -215q-67 -89 -72 -201v0v-59v0z" />
<glyph glyph-name="nine" unicode="9" d="M366 717q-30 0 -51 21t-21 51v317q0 29 21 50t50 21q30 0 51 -21t21 -50v-389h-71zM437 359q0 -30 -21 -51t-50 -21h-359v-287h360q148 1 252 105t105 252v749q0 148 -105 253t-254 105q-148 0 -253 -105t-105 -253v-319q1 -147 105 -252q104 -104 252 -105h73v-71z" />
<glyph glyph-name="colon" unicode=":" horiz-adv-x="407" d="M251 881q-42 42 -101 42q-60 0 -102 -42t-42 -102q0 -59 42 -101t102 -42q59 0 101 42t42 101q0 60 -42 102zM251 242q-42 42 -101 42q-60 0 -102 -42t-42 -101q0 -60 42 -102t102 -42q59 0 101 42t42 102q0 59 -42 101z" />
<glyph glyph-name="uni037E" unicode=";" horiz-adv-x="404" d="M257 242q42 -42 42 -101q0 -19 -5 -38q-20 -76 -73 -132q-55 -58 -132 -80q-37 -11 -76 -12q74 44 112 121q-49 11 -81 50q-32 40 -32 91q0 59 42 101t102 42q59 0 101 -42zM257 881q42 -42 42 -102q0 -59 -42 -101t-101 -42q-60 0 -102 42t-42 101q0 60 42 102t102 42 q59 0 101 -42z" />
<glyph glyph-name="equal" unicode="=" horiz-adv-x="833" d="M10 353h718v-287h-718v287zM10 763h718v-287h-718v287z" />
<glyph glyph-name="question" unicode="?" horiz-adv-x="748" d="M264 242q-42 -42 -42 -101q0 -60 42 -102t102 -42q59 0 101 42t42 102q0 59 -42 101t-101 42q-60 0 -102 -42zM377 1464l-14 -1q-148 0 -253 -105q-104 -104 -105 -252v-148h287v146q0 4 1 8q0 -1 0 2q1 4 1 5q0 -1 0 3q1 3 1 4l2 3l1 3q1 3 3 6q1 2 0 1q1 2 3 5v0l1 1 q1 2 3 4q1 2 1 1q2 3 4 5v0l5 5q20 16 46 16v0q30 0 51 -21t21 -51v-221q0 -29 -21 -50t-51 -21h-144v-420h288v162q96 42 155 130q60 90 60 198v222q0 146 -101 250t-245 109v1z" />
<glyph glyph-name="A" unicode="A" d="M287 574v531q0 30 21 51t51 21q29 0 50 -21t21 -51v-531h-143zM105 1359q-105 -105 -105 -254v-1105h287v287h143v-287h287v1105q0 149 -105 254t-253 105q-149 0 -254 -105z" />
<glyph glyph-name="B" unicode="B" d="M409 308q-21 -21 -50 -21h-72v143h72q29 0 50 -21t21 -50q0 -30 -21 -51zM287 1147h71h2q29 0 50 -21q20 -21 20 -50v-287q0 -30 -21 -51t-50 -21h-72v430zM717 784v9v0v285q-1 148 -106 252t-252 104h-359v-1434h361q146 1 250 104q104 104 106 250v0v9v0 q-2 117 -72 211q70 93 72 210v0z" />
<glyph glyph-name="C" unicode="C" horiz-adv-x="796" d="M430 472v-143q0 -30 -21 -51t-50 -21q-30 0 -51 21t-21 51v777q0 29 21 50t51 21q29 0 50 -21t21 -50v-144h287v145q-1 148 -106 253q-105 104 -252 104q-148 0 -253 -104t-106 -251v0v-784v0q1 -147 106 -251t253 -104q147 0 252 104q105 105 106 253v145h-287z" />
<glyph glyph-name="D" unicode="D" d="M430 359q0 -30 -21 -51t-50 -21h-72v860h72q29 0 50 -21t21 -50v-717zM717 1077q-1 148 -105 252t-252 105h-360v-1434h360q148 1 252 105t105 252v720z" />
<glyph glyph-name="E" unicode="E" horiz-adv-x="721" d="M632 1147v287h-631v-1435h631v287h-344v144h287v287h-287v430h344z" />
<glyph glyph-name="F" unicode="F" horiz-adv-x="712" d="M634 1147v287h-631v-1435h287v431h287v287h-287v430h344z" />
<glyph glyph-name="G" unicode="G" horiz-adv-x="818" d="M376 1464h-15q-148 -1 -252 -105q-104 -105 -105 -252v-770q1 -148 105 -253q104 -104 252 -105h15l345 16v702h-355v-287h68v-144h-71q-30 0 -51 21t-21 51v767v8q0 -1 1 2v5q0 -1 1 3q1 3 1 4l1 3q2 4 2 3l2 6l1 1q1 2 3 4v1l4 6l3.5 3.5l1.5 1.5q2 3 5 5q20 16 46 16 q29 0 50 -21t21 -51v-146h287v146q0 145 -101 250q-100 104 -244 109v0z" />
<glyph glyph-name="H" unicode="H" horiz-adv-x="818" d="M428 1434v-869h-143v869h-287v-1435h287v279h143v-279h287v1435h-287z" />
<glyph glyph-name="I" unicode="I" horiz-adv-x="389" d="M285 -1h-287v1435h287v-1435z" />
<glyph glyph-name="J" unicode="J" horiz-adv-x="398" d="M5 1434v-1440q0 -30 -21 -51t-51 -21h-13v-287h14q148 1 252 105q105 105 106 252v1442h-287z" />
<glyph glyph-name="K" unicode="K" horiz-adv-x="855" d="M717 359v0q-18 127 -112 226q76 91 92 202l91 647h-287l-91 -646q-4 -29 -28 -50t-54 -21h-41v717h-287v-1435h287v431h62q29 0 53 -21t28 -51l2 -13l49 -346h287l-50 353z" />
<glyph glyph-name="L" unicode="L" horiz-adv-x="700" d="M294 286v1148h-287v-1435h631v287h-344z" />
<glyph glyph-name="M" unicode="M" horiz-adv-x="1253" d="M1152 1105q0 148 -105 253t-253 105q-120 0 -215 -72q-90 68 -202 72v0h-14q-148 -1 -252 -105t-105 -252v-1105h286v1104q0 4 1 7v3q1 3 1 4l1 3q0 4 1 4l1 4l1 3q1 2 3 5q0 2 0 1q1 2 3 5q3 4 1 1q1 2 3 5h1v1l4 4v1q3 2 5 4q20 17 46 17v0q30 0 51 -21t21 -51v-1104 h286v1104q0 30 21 51t51 21q29 0 50 -21t21 -51v-1104h287v1104z" />
<glyph glyph-name="N" unicode="N" horiz-adv-x="818" d="M438 1433v-343l-144 336v7h-286v-1432h286v841l144 -336v-505h286v1432h-286z" />
<glyph glyph-name="O" unicode="O" d="M442 329q0 -30 -21 -51t-51 -21t-51 21t-21 51v776q0 30 21 51t51 21t51 -21q20 -21 21 -51v-776zM728 1107q-1 148 -106 252q-104 104 -252 104q-147 0 -252 -104q-105 -103 -106 -251v-783q1 -147 106 -250q105 -104 252 -104q148 0 252 104q105 104 106 252v780z" />
<glyph glyph-name="P" unicode="P" horiz-adv-x="805" d="M440 789q0 -30 -21 -51t-51 -21h-72v430h72q30 0 51 -21t21 -51v-286zM726 1076q-1 148 -105 252t-252 105h-359v-1432h286v430h73q148 0 252 104q104 105 105 252v289z" />
<glyph glyph-name="Q" unicode="Q" horiz-adv-x="812" d="M289 1105q0 30 21 51t51 21t51 -21t21 -51v-776q0 -30 -21 -51t-51 -21t-51 21t-21 51v776zM719 1107q-1 148 -105 252q-105 104 -253 104q-147 0 -252 -104q-105 -103 -106 -251v0v-783v0q1 -108 62 -198q60 -87 157 -128q8 -142 111 -240q103 -99 245 -99h15v286h-13 q-26 0 -46 17q-19 16 -24 40q93 43 150 129q58 89 59 195v780z" />
<glyph glyph-name="R" unicode="R" horiz-adv-x="812" d="M291 716v430h71q30 0 51 -21t21 -50v-287q0 -30 -21 -51q-21 -20 -51 -21h-71zM720 352l-1 8q-15 106 -86 194q87 100 87 233v289q0 148 -104 252q-105 104 -252 105h-360v-1433h287v430h60q29 0 53 -21t29 -51l1 -13l49 -345h286z" />
<glyph glyph-name="S" unicode="S" horiz-adv-x="799" d="M379 1463h-14q-148 -1 -252 -105t-105 -252v-319q1 -144 101 -248q100 -103 243 -109v0h14q30 0 51 -21t21 -51q0 -29 -21 -50t-51 -21h-358v-287h358q149 0 254 105q104 105 104 253q0 145 -100 249q-101 104 -245 109v0l-13 1q-29 0 -50 20q-21 21 -21 51v317v7v3 q1 3 1 4l1 3l1 4l1 4l1 3q1 2 3 5q1 2 0 1q1 2 3 5h1v1q1 2 3 5h1v0q2 3 4 5h1q2 3 5 5q19 16 45 16v0q30 0 51 -21t21 -50v-147h286v147q0 145 -100 249q-101 104 -245 109v0z" />
<glyph glyph-name="T" unicode="T" horiz-adv-x="724" d="M693 1433h-716v-287h213v-1146h286v1146h217v287z" />
<glyph glyph-name="U" unicode="U" horiz-adv-x="821" d="M436 1433v-1105q0 -29 -21 -50t-51 -21q-29 0 -50 21t-21 50v1105h-287v-1105q0 -148 105 -253t253 -105q149 0 254 105q104 105 104 253v1105h-286z" />
<glyph glyph-name="V" unicode="V" horiz-adv-x="939" d="M575 1433l-125 -944l-164 944h-287l276 -1433h333l279 1433h-312z" />
<glyph glyph-name="W" unicode="W" horiz-adv-x="1256" d="M9 328q0 -148 105 -253t253 -105q120 0 215 72q90 -68 202 -72v0h15q147 1 251 105q105 104 105 252v1106h-286v-1105q0 -3 -1 -7q1 1 0 -3q0 -3 -1 -4q1 1 0 -3l-1 -4l-2 -4l-1 -3q-1 -2 -3 -5q0 -2 0 -1q-1 -2 -3 -5q-1 -2 0 -1q-2 -2 -4 -5q-2 -2 -1 0q-2 -3 -4 -5v0 l-5 -5q-20 -16 -46 -16v0q-30 0 -51 21q-20 21 -21 50v1105h-286v-1105q0 -29 -21 -50t-51 -21q-29 0 -50 21t-21 50v1105h-287v-1105z" />
<glyph glyph-name="X" unicode="X" horiz-adv-x="958" d="M818 360q-18 126 -112 224q76 92 92 203l91 646h-286l-91 -645q-8 -55 -63 -69q-56 14 -64 69l-90 645h-287l91 -646v0q16 -111 92 -203q-94 -98 -112 -224v0l-1 -8l-50 -352h287l48 345l2 13q4 30 28 51t54 21h3q30 0 54 -21t28 -51l2 -13l48 -345h287l-50 352z" />
<glyph glyph-name="Y" unicode="Y" horiz-adv-x="812" d="M443 1433v-645q0 -30 -21 -51t-51 -21q-29 0 -50 21t-21 51v645h-287v-645q0 -109 61 -200q59 -88 157 -129v-459h286v461q96 43 153 130q59 89 59 197v645h-286z" />
<glyph glyph-name="Z" unicode="Z" horiz-adv-x="793" d="M735 1433h-728v-287h354l-350 -1146h716v287h-342z" />
<glyph glyph-name="a" unicode="a" d="M287 574v331q0 30 21 51t51 21q29 0 50 -21t21 -51v-331h-143zM105 1159q-105 -105 -105 -254v-905h287v287h143v-287h287v905q0 149 -105 254t-253 105q-149 0 -254 -105z" />
<glyph glyph-name="b" unicode="b" d="M409 308q-21 -21 -50 -21h-72v143h72q29 0 50 -21t21 -50q0 -30 -21 -51zM287 947h71h2q29 0 50 -21q20 -21 20 -50v-87q0 -30 -21 -51t-50 -21h-72v230zM717 784v9v0v85q-1 148 -106 252t-252 104h-359v-1234h361q146 1 250 104q104 104 106 250v0v9v0q-2 117 -72 211 q70 93 72 210v0z" />
<glyph glyph-name="c" unicode="c" horiz-adv-x="796" d="M430 462v-143q0 -30 -21 -51t-50 -21q-30 0 -51 21t-21 51v597q0 29 21 50t51 21q29 0 50 -21t21 -50v-144h287v145q-1 148 -106 253q-105 104 -252 104q-148 0 -253 -104t-106 -251v0v-604v0q1 -147 106 -251t253 -104q147 0 252 104q105 105 106 253v145h-287z" />
<glyph glyph-name="d" unicode="d" d="M430 359q0 -30 -21 -51t-50 -21h-72v660h72q29 0 50 -21t21 -50v-517zM717 877q-1 148 -105 252t-252 105h-360v-1234h360q148 1 252 105t105 252v520z" />
<glyph glyph-name="e" unicode="e" horiz-adv-x="721" d="M632 947v287h-631v-1235h631v287h-344v144h287v287h-287v230h344z" />
<glyph glyph-name="f" unicode="f" horiz-adv-x="712" d="M634 947v287h-631v-1235h287v431h287v287h-287v230h344z" />
<glyph glyph-name="g" unicode="g" horiz-adv-x="818" d="M376 1264h-15q-148 -1 -252 -105q-104 -105 -105 -252v-580q1 -148 105 -253q104 -104 252 -105h15l345 16v672h-355v-287h68v-114h-71q-30 0 -51 21t-21 51v577v8q0 -1 1 2v5q0 -1 1 3q1 3 1 4l1 3q2 4 2 3l2 6l1 1q1 2 3 4v1l4 6l3.5 3.5l1.5 1.5q2 3 5 5q20 16 46 16 q29 0 50 -21t21 -51v-146h287v146q0 145 -101 250q-100 104 -244 109v0z" />
<glyph glyph-name="h" unicode="h" horiz-adv-x="818" d="M428 1234v-669h-143v669h-287v-1235h287v279h143v-279h287v1235h-287z" />
<glyph glyph-name="i" unicode="i" horiz-adv-x="389" d="M285 -1h-287v1235h287v-1235z" />
<glyph glyph-name="j" unicode="j" horiz-adv-x="398" d="M5 1234v-1240q0 -30 -21 -51t-51 -21h-13v-287h14q148 1 252 105q105 105 106 252v1242h-287z" />
<glyph glyph-name="k" unicode="k" horiz-adv-x="855" d="M717 359v0q-18 127 -112 226q76 91 92 202l91 447h-287l-91 -446q-4 -29 -28 -50t-54 -21h-41v517h-287v-1235h287v431h62q29 0 53 -21t28 -51l2 -13l49 -346h287l-50 353z" />
<glyph glyph-name="l" unicode="l" horiz-adv-x="700" d="M294 286v948h-287v-1235h631v287h-344z" />
<glyph glyph-name="m" unicode="m" horiz-adv-x="1253" d="M1152 905q0 148 -105 253t-253 105q-120 0 -215 -72q-90 68 -202 72v0h-14q-148 -1 -252 -105t-105 -252v-905h286v904q0 4 1 7v3q1 3 1 4l1 3q0 4 1 4l1 4l1 3q1 2 3 5q0 2 0 1q1 2 3 5q3 4 1 1q1 2 3 5h1v1l4 4v1q3 2 5 4q20 17 46 17v0q30 0 51 -21t21 -51v-904h286 v904q0 30 21 51t51 21q29 0 50 -21t21 -51v-904h287v904z" />
<glyph glyph-name="n" unicode="n" horiz-adv-x="818" d="M438 1233v-343l-144 336v7h-286v-1232h286v641l144 -336v-305h286v1232h-286z" />
<glyph glyph-name="o" unicode="o" d="M442 329q0 -30 -21 -51t-51 -21t-51 21t-21 51v576q0 30 21 51t51 21t51 -21q20 -21 21 -51v-576zM728 907q-1 148 -106 252q-104 104 -252 104q-147 0 -252 -104q-105 -103 -106 -251v-583q1 -147 106 -250q105 -104 252 -104q148 0 252 104q105 104 106 252v580z" />
<glyph glyph-name="p" unicode="p" horiz-adv-x="805" d="M440 789q0 -30 -21 -51t-51 -21h-72v230h72q30 0 51 -21t21 -51v-86zM726 876q-1 148 -105 252t-252 105h-359v-1232h286v430h73q148 0 252 104q104 105 105 252v89z" />
<glyph glyph-name="q" unicode="q" horiz-adv-x="812" d="M289 905q0 30 21 51t51 21t51 -21t21 -51v-576q0 -30 -21 -51t-51 -21t-51 21t-21 51v576zM719 907q-1 148 -105 252q-105 104 -253 104q-147 0 -252 -104q-105 -103 -106 -251v0v-583v0q1 -108 62 -198q60 -87 157 -128q8 -142 111 -240q103 -99 245 -99h15v286h-13 q-26 0 -46 17q-19 16 -24 40q93 43 150 129q58 89 59 195v580z" />
<glyph glyph-name="r" unicode="r" horiz-adv-x="812" d="M291 716v230h71q30 0 51 -21t21 -50v-87q0 -30 -21 -51q-21 -20 -51 -21h-71zM720 352l-1 8q-15 106 -86 194q87 100 87 233v89q0 148 -104 252q-105 104 -252 105h-360v-1233h287v430h60q29 0 53 -21t29 -51l1 -13l49 -345h286z" />
<glyph glyph-name="s" unicode="s" horiz-adv-x="799" d="M379 1263h-14q-148 -1 -252 -105t-105 -252v-119q1 -144 101 -248q100 -103 243 -109v0h14q30 0 51 -21t21 -51q0 -29 -21 -50t-51 -21h-358v-287h358q149 0 254 105q104 105 104 253q0 145 -100 249q-101 104 -245 109v0l-13 1q-29 0 -50 20q-21 21 -21 51v117v7v3 q1 3 1 4l1 3l1 4l1 4l1 3q1 2 3 5q1 2 0 1q1 2 3 5h1v1q1 2 3 5h1v0q2 3 4 5h1q2 3 5 5q19 16 45 16v0q30 0 51 -21t21 -50v-147h286v147q0 145 -100 249q-101 104 -245 109v0z" />
<glyph glyph-name="t" unicode="t" horiz-adv-x="724" d="M693 1233h-716v-287h213v-946h286v946h217v287z" />
<glyph glyph-name="u" unicode="u" horiz-adv-x="821" d="M436 1233v-905q0 -29 -21 -50t-51 -21q-29 0 -50 21t-21 50v905h-287v-905q0 -148 105 -253t253 -105q149 0 254 105q104 105 104 253v905h-286z" />
<glyph glyph-name="v" unicode="v" horiz-adv-x="939" d="M575 1233l-125 -744l-164 744h-287l276 -1233h333l279 1233h-312z" />
<glyph glyph-name="w" unicode="w" horiz-adv-x="1256" d="M9 328q0 -148 105 -253t253 -105q120 0 215 72q90 -68 202 -72v0h15q147 1 251 105q105 104 105 252v906h-286v-905q0 -3 -1 -7q1 1 0 -3q0 -3 -1 -4q1 1 0 -3l-1 -4l-2 -4l-1 -3q-1 -2 -3 -5q0 -2 0 -1q-1 -2 -3 -5q-1 -2 0 -1q-2 -2 -4 -5q-2 -2 -1 0q-2 -3 -4 -5v0 l-5 -5q-20 -16 -46 -16v0q-30 0 -51 21q-20 21 -21 50v905h-286v-905q0 -29 -21 -50t-51 -21q-29 0 -50 21t-21 50v905h-287v-905z" />
<glyph glyph-name="x" unicode="x" horiz-adv-x="958" d="M818 360q-18 126 -112 224q76 92 92 203l91 446h-286l-91 -445q-8 -55 -63 -69q-56 14 -64 69l-90 445h-287l91 -446v0q16 -111 92 -203q-94 -98 -112 -224v0l-1 -8l-50 -352h287l48 345l2 13q4 30 28 51t54 21h3q30 0 54 -21t28 -51l2 -13l48 -345h287l-50 352z" />
<glyph glyph-name="y" unicode="y" horiz-adv-x="812" d="M443 1233v-445q0 -30 -21 -51t-51 -21q-29 0 -50 21t-21 51v445h-287v-445q0 -109 61 -200q59 -88 157 -129v-459h286v461q96 43 153 130q59 89 59 197v445h-286z" />
<glyph glyph-name="z" unicode="z" horiz-adv-x="793" d="M735 1233h-728v-287h314l-310 -946h716v287h-302z" />
<glyph glyph-name="bar" unicode="|" horiz-adv-x="1014" d="M427 1577h160v-1995h-160v1995z" />
<glyph glyph-name="brokenbar" unicode="¦" horiz-adv-x="1014" d="M427 371h160v-789h-160v789zM427 1578h160v-789h-160v789z" />
<glyph glyph-name="multiply" unicode="×" horiz-adv-x="908" d="M810 324l-167 167l165 165l-222 222l-165 -165l-167 167l-222 -222l167 -167l-169 -169l222 -222l169 169l167 -167z" />
<glyph glyph-name="quoteleft" unicode="‘" horiz-adv-x="401" d="M52 1198q42 -42 102 -42q59 0 101 42t42 101q0 51 -32 91q-32 39 -81 50q39 77 112 121q-39 -1 -76 -12q-77 -22 -132 -80q-54 -57 -73 -132q-5 -19 -5 -38q0 -59 42 -101z" />
<glyph glyph-name="quoteright" unicode="’" horiz-adv-x="404" d="M257 1392q-42 42 -101 42q-60 0 -102 -42t-42 -101q0 -51 32 -91q32 -39 81 -50q-38 -77 -112 -121q39 1 76 12q77 22 132 80q54 57 73 132q5 19 5 38q0 59 -42 101z" />
<glyph glyph-name="quotesinglbase" unicode="‚" horiz-adv-x="420" d="M267 242q-42 42 -101 42q-60 0 -102 -42t-42 -101q0 -51 32 -91q32 -39 81 -50q-38 -77 -112 -121q39 1 76 12q77 22 132 80q54 57 73 132q5 19 5 38q0 59 -42 101z" />
<glyph glyph-name="quotedblleft" unicode="“" horiz-adv-x="734" d="M392 1198q42 -42 101 -42q60 0 102 42t42 101q0 51 -32 91q-32 39 -81 50q38 77 112 121q-39 -1 -76 -12q-77 -22 -132 -80q-54 -57 -73 -132q-5 -19 -5 -38q0 -59 42 -101zM52 1198q42 -42 101 -42q60 0 102 42t42 101q0 51 -32 91q-32 39 -81 50q38 77 112 121 q-39 -1 -76 -12q-77 -22 -132 -80q-54 -57 -73 -132q-5 -19 -5 -38q0 -59 42 -101z" />
<glyph glyph-name="quotedblright" unicode="”" horiz-adv-x="706" d="M257 1392q-42 42 -101 42q-60 0 -102 -42t-42 -101q0 -51 32 -91q32 -39 81 -50q-38 -77 -112 -121q39 1 76 12q77 22 132 80q54 57 73 132q5 19 5 38q0 59 -42 101zM597 1392q-42 42 -101 42q-60 0 -102 -42t-42 -101q0 -51 32 -91q32 -39 81 -50q-38 -77 -112 -121 q39 1 76 12q77 22 132 80q54 57 73 132q5 19 5 38q0 59 -42 101z" />
<glyph glyph-name="quotedblbase" unicode="„" horiz-adv-x="737" d="M267 242q-42 42 -101 42q-60 0 -102 -42t-42 -101q0 -51 32 -91q32 -39 81 -50q-38 -77 -112 -121q39 1 76 12q77 22 132 80q54 57 73 132q5 19 5 38q0 59 -42 101zM597 242q-42 42 -101 42q-60 0 -102 -42t-42 -101q0 -51 32 -91q32 -39 81 -50q-38 -77 -112 -121 q39 1 76 12q77 22 132 80q54 57 73 132q5 19 5 38q0 59 -42 101z" />
<glyph glyph-name="bullet" unicode="•" horiz-adv-x="1024" d="M216 718q0 123 87 209t210 86q122 0 208.5 -86.5t86.5 -208.5t-87.5 -209.5t-209.5 -87.5q-123 0 -209 87t-86 210z" />
<glyph glyph-name="ellipsis" unicode="…" horiz-adv-x="1213" d="M251 242q-42 42 -101 42q-60 0 -102 -42t-42 -101q0 -60 42 -102t102 -42q59 0 101 42t42 102q0 59 -42 101zM651 242q-42 42 -101 42q-60 0 -102 -42t-42 -101q0 -60 42 -102t102 -42q59 0 101 42t42 102q0 59 -42 101zM1051 242q-42 42 -101 42q-60 0 -102 -42 t-42 -101q0 -60 42 -102t102 -42q59 0 101 42t42 102q0 59 -42 101z" />
<glyph glyph-name="Euro" unicode="€" horiz-adv-x="939" d="M833 574v287h-445v214q0 30 21 51t51 21q29 0 50 -21t21 -51v-143h287v145q-1 148 -106 252q-105 105 -252 105q-148 0 -253 -104q-104 -104 -106 -251v-218h-101v-287h101v-219q2 -147 106 -251q105 -104 253 -104q147 0 252 104q105 105 106 252v146h-287v-144 q0 -29 -21 -50t-50 -21q-30 0 -51 21t-21 50v216h445z" />
</font>
</defs></svg>
--- NEW FILE: feTurbulence.svg ---
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="450px" height="325px" viewBox="0 0 450 325"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example feTurbulence - Examples of feTurbulence operations</title>
<desc>Six rectangular areas showing the effects of
various parameter settings for feTurbulence.</desc>
<g font-family="Verdana" text-anchor="middle" font-size="10" >
<defs>
<filter id="Turb1" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/>
</filter>
<filter id="Turb2" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="2"/>
</filter>
<filter id="Turb3" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="8"/>
</filter>
<filter id="Turb4" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="4"/>
</filter>
<filter id="Turb5" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="4"/>
</filter>
<filter id="Turb6" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1"/>
</filter>
</defs>
<rect x="1" y="1" width="448" height="323"
fill="none" stroke="blue" stroke-width="1" />
<rect x="25" y="25" width="100" height="75" filter="url(#Turb1)" />
<text x="75" y="117">type=turbulence</text>
<text x="75" y="129">baseFrequency=0.05</text>
<text x="75" y="141">numOctaves=2</text>
<rect x="175" y="25" width="100" height="75" filter="url(#Turb2)" />
<text x="225" y="117">type=turbulence</text>
<text x="225" y="129">baseFrequency=0.1</text>
<text x="225" y="141">numOctaves=2</text>
<rect x="325" y="25" width="100" height="75" filter="url(#Turb3)" />
<text x="375" y="117">type=turbulence</text>
<text x="375" y="129">baseFrequency=0.05</text>
<text x="375" y="141">numOctaves=8</text>
<rect x="25" y="180" width="100" height="75" filter="url(#Turb4)" />
<text x="75" y="272">type=fractalNoise</text>
<text x="75" y="284">baseFrequency=0.1</text>
<text x="75" y="296">numOctaves=4</text>
<rect x="175" y="180" width="100" height="75" filter="url(#Turb5)" />
<text x="225" y="272">type=fractalNoise</text>
<text x="225" y="284">baseFrequency=0.4</text>
<text x="225" y="296">numOctaves=4</text>
<rect x="325" y="180" width="100" height="75" filter="url(#Turb6)" />
<text x="375" y="272">type=fractalNoise</text>
<text x="375" y="284">baseFrequency=0.1</text>
<text x="375" y="296">numOctaves=1</text>
</g>
</svg>
--- NEW FILE: filters01-5.svg ---
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="115px" height="70px" viewBox="0 0 200 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example filters01-5.svg - after fifth step</title>
<desc>Shows intermediate result for filters01.svg after applying
the fifth filter element, feComposite.</desc>
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#MyFilter)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
</svg>
--- NEW FILE: filters01-2.svg ---
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="115px" height="70px" viewBox="0 0 200 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example filters01-2.svg - after second step</title>
<desc>Shows intermediate result for filters01.svg after applying
the second filter element, feOffset.</desc>
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#MyFilter)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
</svg>
--- NEW FILE: filters01-6.svg ---
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="115px" height="70px" viewBox="0 0 200 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example filters01.svg - introducing filter effects</title>
<desc>An example which combines multiple filter primitives
to produce a 3D lighting effect on a graphic consisting
of the string "SVG" sitting on top of oval filled in red
and surrounded by an oval outlined in red.</desc>
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#MyFilter)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
</svg>
--- NEW FILE: filters01.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: feComposite.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: filters01-2.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: filters01-1.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: filters01-0.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: enable-background-01.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: feBlend.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: feComposite.svg ---
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="330" height="195" viewBox="0 0 1100 650" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Example feComposite - Examples of feComposite operations</title>
<desc>Four rows of six pairs of overlapping triangles depicting
the six different feComposite operators under different
opacity values and different clearing of the background.</desc>
<defs>
<desc>Define two sets of six filters for each of the six compositing operators.
The first set wipes out the background image by flooding with opaque white.
The second set does not wipe out the background, with the result
that the background sometimes shines through and is other cases
is blended into itself (i.e., "double-counting").</desc>
<filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
<feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
</filter>
<filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
<feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
</filter>
<filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
<feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
</filter>
<filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
<feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
</filter>
<filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
<feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
</filter>
<filter id="arithmeticFlood" filterUnits="objectBoundingBox"
x="-5%" y="-5%" width="110%" height="110%">
<feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
<feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
<feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
</filter>
<filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
</filter>
<filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
</filter>
<filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
</filter>
<filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
</filter>
<filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
</filter>
<filter id="arithmeticNoFlood" filterUnits="objectBoundingBox"
x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
</filter>
<path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" />
<path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" />
<path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" />
<path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" />
<g id="TwoBlueTriangles">
<use xlink:href="#Blue100"/>
<use xlink:href="#Blue50"/>
</g>
<g id="BlueTriangles">
<use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/>
<use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/>
<use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/>
<use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/>
<use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/>
<use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/>
</g>
</defs>
<rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/>
<g font-family="Verdana" font-size="40" shape-rendering="crispEdges">
<desc>Render the examples using the filters that draw on top of
an opaque white surface, thus obliterating the background.</desc>
<g enable-background="new">
<text x="15" y="75">opacity 1.0</text>
<text x="15" y="115" font-size="27">(with feFlood)</text>
<text x="15" y="200">opacity 0.5</text>
<text x="15" y="240" font-size="27">(with feFlood)</text>
<use xlink:href="#BlueTriangles"/>
<g transform="translate(275,25)">
<use xlink:href="#Red100" filter="url(#overFlood)" />
<use xlink:href="#Red50" filter="url(#overFlood)" />
<text x="5" y="275">over</text>
</g>
<g transform="translate(400,25)">
<use xlink:href="#Red100" filter="url(#inFlood)" />
<use xlink:href="#Red50" filter="url(#inFlood)" />
<text x="35" y="275">in</text>
</g>
<g transform="translate(525,25)">
<use xlink:href="#Red100" filter="url(#outFlood)" />
<use xlink:href="#Red50" filter="url(#outFlood)" />
<text x="15" y="275">out</text>
</g>
<g transform="translate(650,25)">
<use xlink:href="#Red100" filter="url(#atopFlood)" />
<use xlink:href="#Red50" filter="url(#atopFlood)" />
<text x="10" y="275">atop</text>
</g>
<g transform="translate(775,25)">
<use xlink:href="#Red100" filter="url(#xorFlood)" />
<use xlink:href="#Red50" filter="url(#xorFlood)" />
<text x="15" y="275">xor</text>
</g>
<g transform="translate(900,25)">
<use xlink:href="#Red100" filter="url(#arithmeticFlood)" />
<use xlink:href="#Red50" filter="url(#arithmeticFlood)" />
<text x="-25" y="275">arithmetic</text>
</g>
</g>
<g transform="translate(0,325)" enable-background="new">
<desc>Render the examples using the filters that do not obliterate
the background, thus sometimes causing the background to continue
to appear in some cases, and in other cases the background
image blends into itself ("double-counting").</desc>
<text x="15" y="75">opacity 1.0</text>
<text x="15" y="115" font-size="27">(without feFlood)</text>
<text x="15" y="200">opacity 0.5</text>
<text x="15" y="240" font-size="27">(without feFlood)</text>
<use xlink:href="#BlueTriangles"/>
<g transform="translate(275,25)">
<use xlink:href="#Red100" filter="url(#overNoFlood)" />
<use xlink:href="#Red50" filter="url(#overNoFlood)" />
<text x="5" y="275">over</text>
</g>
<g transform="translate(400,25)">
<use xlink:href="#Red100" filter="url(#inNoFlood)" />
<use xlink:href="#Red50" filter="url(#inNoFlood)" />
<text x="35" y="275">in</text>
</g>
<g transform="translate(525,25)">
<use xlink:href="#Red100" filter="url(#outNoFlood)" />
<use xlink:href="#Red50" filter="url(#outNoFlood)" />
<text x="15" y="275">out</text>
</g>
<g transform="translate(650,25)">
<use xlink:href="#Red100" filter="url(#atopNoFlood)" />
<use xlink:href="#Red50" filter="url(#atopNoFlood)" />
<text x="10" y="275">atop</text>
</g>
<g transform="translate(775,25)">
<use xlink:href="#Red100" filter="url(#xorNoFlood)" />
<use xlink:href="#Red50" filter="url(#xorNoFlood)" />
<text x="15" y="275">xor</text>
</g>
<g transform="translate(900,25)">
<use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" />
<use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" />
<text x="-25" y="275">arithmetic</text>
</g>
</g>
</g>
</svg>
--- NEW FILE: feColorMatrix.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: filtersubregion00.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: filters01-0.svg ---
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="115px" height="70px" viewBox="0 0 200 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<title>Example filters01-0.svg - source graphic with no filters</title>
<desc>Shows what filters01.svg looks like without any
filters.</desc>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g>
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
</svg>
--- NEW FILE: filters00.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: filters01-3.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: feTurbulence.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: filters01-4.svg ---
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="115px" height="70px" viewBox="0 0 200 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example filters01-4.svg - after fourth step</title>
<desc>Shows intermediate result for filters01.svg after applying
the fourth filter element, feComposite.</desc>
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#MyFilter)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
</svg>
--- NEW FILE: feGaussianBlur-stdDeviation-00.png ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: feGaussianBlur-stdDeviation-00.svg ---
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 480 360">
<defs>
<font-face font-family="FORQUE">
<font-face-src>
<font-face-uri xlink:href="Forque.svg#FORQUE"/>
</font-face-src>
</font-face>
<style>
/* Free font by Tup Wanders, http://www.tupwanders.nl, Licensed with a Creative Commons attribution license. */
text { text-anchor: middle; font: 70px FORQUE, sans-serif; }
#bx { filter: url(#blurX) }
#by { filter: url(#blurY) }
#header { filter: url(#ds); fill: white; text-decoration: underline }
#attribution { font-size: 6px }
:root { background: green; fill: white }
</style>
<filter id="blurX" x="0" y="20%" width="100%" height="1.5em" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="4 0">
<animate attributeName="stdDeviation" values="8 0;20 0;0 0" keySplines="0.25 0.1 0.25 1" keyTimes="0;0.5;1" calcMode="spline" dur="4s" begin="bx.click" fill="freeze"/>
</feGaussianBlur>
</filter>
<filter id="blurY" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="0 4"/>
</filter>
<filter id="ds" x="-0.1" y="-0.1" width="1.2" height="1.2">
<feGaussianBlur stdDeviation="3"/>
<feOffset dx="2" dy="2"/>
<feComposite in2="SourceGraphic" operator="in"/>
</filter>
</defs>
<text id="bx" x="40%" y="50%">BlurX</text>
<text id="by" x="60%" y="70%">BlurY</text>
<text id="header" y="1em" x="50%">Unidirectional blur</text>
<text id="attribution" x="100%" y="355">Forque font by Tup Wanders</text>
</svg>
--- NEW FILE: filters01-3.svg ---
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="115px" height="70px" viewBox="0 0 200 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example filters01-3.svg - after third step</title>
<desc>Shows intermediate result for filters01.svg after applying
the third filter element, feSpecularLighting.</desc>
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#MyFilter)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
</svg>
--- NEW FILE: filters00.svg ---
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="11.3cm" height="2.2cm" viewBox="0 0 1130 220" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Example filters00.svg - filter effects before and after</title>
<desc>Picture of the before and after affects of filtering.</desc>
<defs>
<filter id="MyFilter">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1"
specularExponent="10" lighting-color="white"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
<g id="CircleRectTriangle">
<g>
<circle cx="85" cy="80" r="40" fill="yellow" />
<g>
<rect x="145" y="45" width="90" height="70" fill="red" />
</g>
<path d="M260,40 L335,80 L260,120 z" fill="#4444ff" />
</g>
</g>
<path id="LineWithArrow"
d="M0,-15 h80 v-10 l40,25 l-40,25 v-10 h-80 z" />
</defs>
<g font-family="Verdana" font-size="30" >
<rect x="1" y="1" width="1128" height="218"
fill="#cccccc" stroke="blue" />
<use x="0" y="0" xlink:href="#CircleRectTriangle"/>
<text x="20" y="180">Original source graphic</text>
<use x="380" y="80" xlink:href="#LineWithArrow"/>
<text x="520" y="70">Filter</text>
<text x="520" y="120">Effect</text>
<use x="630" y="80" xlink:href="#LineWithArrow"/>
<text x="790" y="180">Result of filter effect</text>
</g>
<g filter="url(#MyFilter)" >
<use x="750" y="0" xlink:href="#CircleRectTriangle"/>
</g>
</svg>
--- NEW FILE: filtersubregion00.svg ---
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="flood" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox">
<feFlood x="25%" y="25%" width="50%" height="50%"
flood-color="green" flood-opacity="0.75"/>
</filter>
<filter id="blend" primitiveUnits="objectBoundingBox">
<feBlend x="25%" y="25%" width="50%" height="50%"
in2="SourceGraphic" mode="multiply"/>
</filter>
<filter id="merge" primitiveUnits="objectBoundingBox">
<feMerge x="25%" y="25%" width="50%" height="50%">
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="FillPaint"/>
</feMerge>
</filter>
</defs>
<g fill="none" stroke="blue" stroke-width="4">
<rect width="200" height="200"/>
<line x2="200" y2="200"/>
<line x1="200" y2="200"/>
</g>
<circle fill="green" filter="url(#flood)" cx="100" cy="100" r="90"/>
<g transform="translate(200 0)">
<g fill="none" stroke="blue" stroke-width="4">
<rect width="200" height="200"/>
<line x2="200" y2="200"/>
<line x1="200" y2="200"/>
</g>
<circle fill="green" filter="url(#blend)" cx="100" cy="100" r="90"/>
</g>
<g transform="translate(0 200)">
<g fill="none" stroke="blue" stroke-width="4">
<rect width="200" height="200"/>
<line x2="200" y2="200"/>
<line x1="200" y2="200"/>
</g>
<circle fill="green" fill-opacity="0.5" filter="url(#merge)" cx="100" cy="100" r="90"/>
</g>
</svg>
--- NEW FILE: enable-background-01.svg ---
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="13.5cm" height="2.7cm" viewBox="0 0 1350 270"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example enable-background01</title>
<desc>This test case shows five pictures which illustrate the rules
for background image processing.</desc>
<defs>
<filter id="ShiftBGAndBlur"
filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
<desc>
This filter discards the SourceGraphic, if any, and just produces
a result consisting of the BackgroundImage shifted down 125 units
and then blurred.
</desc>
<feOffset in="BackgroundImage" dx="0" dy="125" />
<feGaussianBlur stdDeviation="8" />
</filter>
<filter id="ShiftBGAndBlur_WithSourceGraphic"
filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
<desc>
This filter takes the BackgroundImage, shifts it down 125 units, blurs it,
and then renders the SourceGraphic on top of the shifted/blurred background.
</desc>
<feOffset in="BackgroundImage" dx="0" dy="125" />
<feGaussianBlur stdDeviation="8" result="blur" />
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g transform="translate(0,0)">
<desc>The first picture is our reference graphic without filters.</desc>
<rect x="25" y="25" width="100" height="100" fill="red"/>
<g opacity=".5">
<circle cx="125" cy="75" r="45" fill="green"/>
<polygon points="160,25 160,125 240,75" fill="blue"/>
</g>
<rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
</g>
<g enable-background="new" transform="translate(270,0)">
<desc>The second adds an empty 'g' element which invokes ShiftBGAndBlur.</desc>
<rect x="25" y="25" width="100" height="100" fill="red"/>
<g opacity=".5">
<circle cx="125" cy="75" r="45" fill="green"/>
<polygon points="160,25 160,125 240,75" fill="blue"/>
</g>
<g filter="url(#ShiftBGAndBlur)"/>
<rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
</g>
<g enable-background="new" transform="translate(540,0)">
<desc>The third invokes ShiftBGAndBlur on the inner group.</desc>
<rect x="25" y="25" width="100" height="100" fill="red"/>
<g filter="url(#ShiftBGAndBlur)" opacity=".5">
<circle cx="125" cy="75" r="45" fill="green"/>
<polygon points="160,25 160,125 240,75" fill="blue"/>
</g>
<rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
</g>
<g enable-background="new" transform="translate(810,0)">
<desc>The fourth invokes ShiftBGAndBlur on the triangle.</desc>
<rect x="25" y="25" width="100" height="100" fill="red"/>
<g opacity=".5">
<circle cx="125" cy="75" r="45" fill="green"/>
<polygon points="160,25 160,125 240,75" fill="blue"
filter="url(#ShiftBGAndBlur)"/>
</g>
<rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
</g>
<g enable-background="new" transform="translate(1080,0)">
<desc>The fifth invokes ShiftBGAndBlur_WithSourceGraphic on the triangle.</desc>
<rect x="25" y="25" width="100" height="100" fill="red"/>
<g opacity=".5">
<circle cx="125" cy="75" r="45" fill="green"/>
<polygon points="160,25 160,125 240,75" fill="blue"
filter="url(#ShiftBGAndBlur_WithSourceGraphic)"/>
</g>
<rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
</g>
</svg>
--- NEW FILE: filters01-1.svg ---
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="115px" height="70px" viewBox="0 0 200 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example filters01-1.svg - after first step</title>
<desc>Shows intermediate result for filters01.svg after applying
the first filter element, feGaussianBlur.</desc>
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#MyFilter)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
</svg>
Received on Friday, 7 January 2011 13:09:17 UTC