Wednesday, June 4th, 2008
Mozilla Experiments with Applying SVG Effects to HTML
The code for applying the effects above follows:
-
-
<html xmlns="http://www.w3.org/1999/xhtml"
-
xmlns:svg="http://www.w3.org/2000/svg">
-
<body style="background:#ccc; font-size:30px;">
-
<style>
-
p { width:300px; border:1px solid black; display:inline-block; margin:1em; }
-
iframe { width:300px; height:300px; border:none; }
-
b { outline:1px dotted blue; }
-
</style>
-
<p class="target" style="background:lime;">
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-
ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
-
<iframe class="target" src="http://mozilla.org"/>
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
-
<b class="target">elit, sed do eiusmod tempor incididunt
-
ut labore et dolore magna aliqua.</b> Ut enim ad minim veniam.</p>
-
-
<style>.target { clip-path: url(#c1); }</style>
-
<svg :svg height="0">
-
</svg><svg :mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
-
</svg><svg :linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
-
<svg :stop stop-color="white" offset="0"/>
-
<svg :stop stop-color="white" stop-opacity="0" offset="1"/>
-
</svg>
-
<svg :circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
-
<svg :rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/>
-
</body>
-
</html>
Rob makes a bunch of good points, such as:
CSS isn't really up to the task [of applying advanced visual effects to HTML]. One problem is that CSS isn't good at manipulating structured values like shapes and filter processing stacks; they're cumbersome to write in CSS expression syntax, or else they require new custom CSS syntax (e.g. @-rules), and there's no standard DOM to let scripts manipulate components of these structured values. Another issue is that we should try to avoid duplicating specification and implementation of complex features.
Contrast that with SVG, which long ago dealt with spec'ing out fancy-pants effects in mark-up and interfacing with JavaScript APIs. In fact, Rob ends his piece with a little snubby-snubby to Flash and Silverlight based both on SVG's status as a standard and its nice integration with page markup:
A nice side effect of providing better SVG-HTML integration is that it gives SVG a leg up on the Web. You can't do these effects using Flash or Silverlight, and since they're not standards they probably won't ever be invited to this party.
Unlike WebKit's shiny new CSS stuff, you can't just yet get a build of this stuff in Gecko:
I'm making tryserver builds right now, and I'll update this post with a link when they're ready. Here's a link to my Mercurial repository.
But it looks like builds are forthcoming. Hats off to Rob for putting together such a cool proof-of-concept.
Related Content:
“It seems so obvious once you think about it…” It does, how did no one else (including myself) think of this? Will be interesting to see how this pans out with webkit style css improvements.
5vv33+ !!!
uh oh, web2.0 svg gradient background fade effects here we come.
How about an example with a SVG logo, that scales with the rest of the site when resizing fonts? ( with no js )
Pretty cool stuff though.
While there are challenges in bringing advanced visual effects to CSS, I don’t think its really fair to say it’s not “up to the task” – afterall, webkit supports SVG like transforms, transitions and masks, all in CSS.
http://webkit.org/blog/181/css-masks/
A big advantage to that approach over SVG is that many many developers know CSS, it’s a matter of simply learning some new properties.
But the SVG approach requires a whole new set of skills to be acquired in order to be used.
That is far less likely to happen.
Ben,
It looks as though you’ve combined the clip-path and mask examples into one code block, making for some confusing inconsistencies, e.g.
clip-path: url(#c1);
<svg :mask id=”m1″ maskUnits=”objectBoundingBox” maskContentUnits=”objectBoundingBox”>
This post has it’s own style in my google homepage rss feed… The title is big with a grey background…
http://img299.imageshack.us/my.php?image=ajaxianez6.png