I'm trying to get a complex SVG filter to produce results in Webkit. The filter is quite crowded as you will see below, but it renders a nice fractal-generated map, and does it well in Mozilla. I'd like to get Webkit to do the same.
The Wikipedia page on browser support for SVG says that Webkit supports SVG filters on nightly builds, but doesn't say how much it supports on the shipping version. I know filters behave somehow differently on every implementation.
What I'd like to know is;
I found out that Webkit needs a flag to enable SVG filters. Is there a way to switch this on in Safari and Chrome? Can it be done through some meta tag or javascript?
<filter id="elevation" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feFlood flood-color="black" result="bg"/>
<feTurbulence type="turbulence" seed="68" stitchTiles="noStitch" numOctaves="8" baseFrequency="0.0025" result="turbulence"/>
<feBlend in="bg" in2="turbulence" mode="screen"/>
<feColorMatrix type="saturate" values="0"/>
<feComponentTransfer>
<feFuncR type="linear" slope="1.5" intercept=".3"/>
<feFuncG type="linear" slope="1.5" intercept=".3"/>
<feFuncB type="linear" slope="1.5" intercept=".3"/>
<feFuncA type="identity" />
</feComponentTransfer>
<feColorMatrix type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0.2125 0.7154 0.0721 0 0"/>
<feGaussianBlur stdDeviation="10" result="height"/>
<feComponentTransfer result="contour">
<feFuncR type="discrete" tableValues=" 0 0 .3 .4 .6 .8 1 1"/>
<feFuncG type="discrete" tableValues=".1 .2 .2 .3 .5 .7 .9 1"/>
<feFuncB type="discrete" tableValues=".3 .4 .1 .2 .4 .6 .8 1"/>
<feFuncA type="discrete" tableValues=" 1 1 1 1 1 1 1 1"/>
</feComponentTransfer>
<feDiffuseLighting surfaceScale="100" diffuseConstant="1" in="height" result="sun" lighting-color="#FFC">
<feDistantLight azimuth="-45" elevation="45"/>
</feDiffuseLighting>
<feDiffuseLighting surfaceScale="100" diffuseConstant="1" in="height" result="sky" lighting-color="#339">
<feDistantLight azimuth="-135" elevation="70"/>
</feDiffuseLighting>
<feBlend in="sun" in2="sky" mode="screen" result="relief"/>
<feBlend in="contour" in2="relief" mode="multiply"/>
</filter>
Regarding SVG support, this page has a nice overview of what the browser do and don't:
http://www.codedread.com/svg-support.php (click on the image to get detailed results)
It basically triggers all the W3C SVG Tests in each browser. You can use these tests to see which filters are supported in your browser and have a look at the SVG code.
In our product we have a GaussianBlur for some years now working well in Firefox, but never in Safari. Google Chrome since version 6 might be better.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With