Modernizr tests for SVG (Was: Re: SVG IG Reset (introducing myself))

On Sun, 31 Jan 2010 14:37:00 +0100, Lars Gunther <gunther@keryx.se> wrote:

> 2010-01-29 18:39, Jeff Schiller skrev:
>> Hello SVG Interest Group,
...
> Some additional stuff I've done with SVG:
>
> - I have contacted Paul Irish and with the help of Robert O'Callahan, he  
> will make Modernizr include an SVG clip-path on HTML content test. We  
> could not conjure up a scripted test for SVG filters, though. (Once  
> again on HTML content, not pure SVG.)

Would be fun to see modernizr actually detecting svg functionality too,  
and filters would surely be one thing to test for.

How about something similar to the canvas detection test, e.g:

   tests[svg] = function() {
         return !!doc.createElementNS( "http://www.w3.org/2000/svg", "svg"  
).createSVGRect;
     };

Like the detection for canvas text support it's possible to drill down and  
check some other SVG DOM interfaces if need be.

I wouldn't mind if there was a quick way of detecting e.g the ability to  
reference other svg elements from feImage,  
http://www.w3.org/TR/SVG11/filters.html#feImage (this may be something for  
torture testing too).

Theoretically the following should work for feature detection, but it has  
it's flaws admittedly (criteria for when a UA should claim support isn't  
exactly clear):

<html>
   <script>
     alert("full filters: " +  
document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Filter",null)  
+ " basic filters: " +  
document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicFilter",null))
   </script>
</html>

Another possibility would be to draw svg to canvas and read the pixels  
back to confirm it actually applied a filter:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<svg id="testsvg" xmlns="http://www.w3.org/2000/svg" width="8" height="8"  
viewBox="0 0 8 8">
   <filter id="flood" x="0" y="0" width="1" height="1">
     <feFlood flood-color="lime"/>
   </filter>
   <rect fill="red" filter="url(#flood)" width="8" height="8"/>
</svg>
</head>
<body>
<canvas width="8" height="8"/>
<script>//<![CDATA[
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0,0,canvas.height,canvas.height);
ctx.drawImage(document.getElementById("testsvg"), 0, 0, canvas.width,  
canvas.height);
var pixels = ctx.getImageData(0,0,1,1);
alert(pixels.data[0] == 0 &&
       pixels.data[1] == 255 &&
       pixels.data[2] == 0 &&
       pixels.data[3] == 255);
//]]></script>
</body>
</html>

This fails in Opera due to bug CORE-15553 (security exceptions are thrown  
if an svg has been rendered to the canvas), but if that was fixed the  
above would alert true.

Cheers
/Erik

-- 
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed

Received on Wednesday, 3 February 2010 14:00:20 UTC