Wednesday, June 4th, 2008

Mozilla Experiments with Applying SVG Effects to HTML

Category: Firefox, HTML, SVG

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.

SVG filters applied to HTML content

The code for applying the effects above follows:

  1. <html xmlns=""
  2.      xmlns:svg="">
  3. <body style="background:#ccc; font-size:30px;">
  4.   <style>
  5.     p { width:300px; border:1px solid black; display:inline-block; margin:1em; }
  6.     iframe { width:300px; height:300px; border:none; }
  7.     b { outline:1px dotted blue; }
  8.   </style>
  9.   <p class="target" style="background:lime;">
  10.     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
  11.     ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  12.   <iframe class="target" src=""/>
  13.   <p>Lorem ipsum dolor sit amet, consectetur adipisicing
  14.     <b class="target">elit, sed do eiusmod tempor incididunt
  15.     ut labore et dolore magna aliqua.</b> Ut enim ad minim veniam.</p>
  17.   <style>.target { clip-path: url(#c1); }</style>
  18.   <svg :svg height="0">
  19.     </svg><svg :mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
  20.       </svg><svg :linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
  21.         <svg :stop stop-color="white" offset="0"/>
  22.         <svg :stop stop-color="white" stop-opacity="0" offset="1"/>
  23.       </svg>
  24.       <svg :circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
  25.       <svg :rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/>
  26. </body>
  27. </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.

Posted by Ben Galbraith at 6:00 am

4.2 rating from 21 votes


Comments feed TrackBack URI

“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.

Comment by tj111 — June 4, 2008

5vv33+ !!!

Comment by uize — June 4, 2008

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.

Comment by Tr0y — June 4, 2008

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.

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.

Comment by John Allsopp — June 4, 2008


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”>

Comment by fma — June 5, 2008

This post has it’s own style in my google homepage rss feed… The title is big with a grey background…

Comment by balupton — June 5, 2008

Leave a comment

You must be logged in to post a comment.