CODEWITHSUNDEEP
google-chromesafarisvgwebkitsvg-filters
edgerunner
edgerunner

Reputation: 14973

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>

Upvotes: 3

Views: 6786

Answers (2)

edgerunner
edgerunner

Reputation: 14973

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

Upvotes: 2

Volker
Volker

Reputation: 386

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.

Upvotes: 4

Related Questions