Blogger :
Ajaxian Blog
All posts :
All posts by Ajaxian Blog
Category :
XML
Blogged date : 2008 Jun 04
It seems so obvious once you think about it, but Rob O'Callahan from Mozilla took us by surprise in his blog post demonstrating his experimental branch of Gecko that allows you to apply SVG effects to HTML.
The code for applying the effects above follows:
XML:
-
-
xmlns="http://www.w3.org/1999/xhtml"
-
xmlns:svg="http://www.w3.org/2000/svg">
-
style="background:#ccc; font-size:30px;">
-
>
-
p { width:300px; border:1px solid black; display:inline-block; margin:1em; }
-
iframe { width:300px; height:300px; border:none; }
-
b { outline:1px dotted blue; }
-
>
-
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.>
-
class="target" src="http://mozilla.org"/>
-
>Lorem ipsum dolor sit amet, consectetur adipisicing
-
class="target">elit, sed do eiusmod tempor incididunt
-
ut labore et dolore magna aliqua.> Ut enim ad minim veniam.>
-
-
>.target { clip-path: url(#c1); }>
-
:svg height="0">
-
> :mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
-
> :linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
-
:stop stop-color="white" offset="0"/>
-
:stop stop-color="white" stop-opacity="0" offset="1"/>
-
>
-
:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
-
:rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/>
-
>
-
>
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.
Contents
ReBlogger Contents
Email TopXML