Search code examples
google-chromesafarisvgwebkitsvg-filters

Webkit and SVG filter support


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;

  1. Is there something I'm missing here in order to get Webkit to render this properly?
  2. If #1 is no, then is there anything like a JavaScript library or similar that will make Webkit render the filter properly?

Update

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?

The filter

  <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>

Solution

  • Looks like both Chrome and Safari are now using a version of Webkit that can render this filter.