sorted by: recent | see :
popular
Content Tagged with SVG + Firefox
Pencil extension to Firefox
Mozilla SVG Project
Ten XML Schemas you should know
Ten XML Schemas you should know
-- SVGdraw --
-- SVGdraw --
Well, I'm Back: Applying SVG Effects To HTML Content
Mozilla Experiments with Applying SVG Effects to HTML
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:
-
-
<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.