Wednesday, 9 July 2008

SVG Paint Servers For HTML

I've done some more work on applying SVG effects to HTML. This time I've made SVG paint servers (i.e., gradients and patterns) usable as CSS 'background' images.


HTML with SVG gradients and patterns

Here's the markup:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<head>
<style>
h1 { background:url(#h); }
p { background:url(#p); }
span { background:url(#h); }
</style>
</head>
<body>
<h1 style="width:95%;">Heading</h1>
<p style="width:90%; border:1px solid black; margin-left:2em;">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum."
</p>
<div style="width:200px;">"Lorem ipsum dolor sit amet,
<span>consectetur adipisicing elit, sed do eiusmod</span>
tempor incididunt ut labore et dolore magna aliqua.</div>
<svg:svg style="height:0">
<svg:linearGradient id="h" x2="1" y2="0">
<svg:stop stop-color="yellow" offset="0"/>
<svg:stop stop-color="yellow" stop-opacity="0" offset="1"/>
</svg:linearGradient>
<svg:pattern id="p" patternUnits="userSpaceOnUse"
x="0" y="0" width="50" height="50"
viewBox="-1 -1 9 5.5" >
<svg:path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" opacity="0.3"/>
</svg:pattern>
</svg:svg>
</body>
</html>

This is very straightforward. The gradient or pattern is painted over the CSS "background-origin" area. All CSS background features are supported, such as "background-attachment:fixed" and "background-repeat". Backgrounds are striped over inline elements just like normal background images, as shown in the example. Repeating backgrounds can be a little confusing since the pattern or gradient is rendered to the background-origin area and then repeated according to CSS, so you can have repetition at the pattern or gradient level (including repetition in non-axis-aligned directions) then repetition of the rendered rectangle. But this won't matter much since unless the author is being tricky, the gradient or pattern will fill the background-origin area and only one tile will be visible.

"userSpaceOnUse" units in the paint server are defined to be CSS pixels with the background-origin area as the viewport. "objectBoundingBox" units are just the background-origin area.

I've pushed my changes to my public Mercurial repository and prepared try-server builds for Mac, Linux and Windows installer/Windows ZIP. I didn't update the branch to trunk so the rest of the code is a few weeks old. I've also published the above example. (As I mentioned a while ago the changes in this branch are gradually trickling into the trunk.)

These builds have another very cool feature which deserves a post of its own. Stay tuned!

Update The Linux build had a pretty bad bug in it (actually an existing bug that my code exposed). I've updated the link to point to a build that should work without displaying garbage much of the time.



13 comments:

  1. Awesome awesome stuff - very much looking forward to this. I assume the ability to reference external SVG entities is not the 'very cool feature' that you're talking about either. Think that will make Firefox 3.1?

    ReplyDelete
  2. way cool,
    keep em coming

    ReplyDelete
  3. Robert O'Callahan9 July 2008 06:26

    Jeff: yeah, I haven't implemented that. I would really like that to make Firefox 3.1 but the person who would be best to implement it might be overloaded.

    ReplyDelete
  4. That's awesome to mix HTML and SVG, and even treat svg as an image.
    What about the performance here?

    ReplyDelete
  5. Robert O'Callahan9 July 2008 06:57

    I haven't measured performance but I think performance is going to be limited by the graphics engine, i.e., cairo and whatever platform graphics libraries cairo may be using.

    ReplyDelete
  6. IMO, SVG may be heavily used with animation/filters/alpha blending, I think it's urgent to give Cairo a GPU accelerated backend. I can see many guys talk about it, but seems it's still NOT in the schedule (at least the mid 2009?).
    I bet if SVG have such a great performance, many developers will choose it, NOT the flash or silverwhat,isn't it?

    ReplyDelete
  7. ... meanwhile such an elementary 'effect' as rounded boxes still eludes us. We can send a man to the moon but ...

    ReplyDelete
  8. Robert O'Callahan10 July 2008 20:33

    an0n1 m0us: hey, you might even see CSS3 border-radius in Gecko 1.9.1.

    ReplyDelete
  9. This is SO FRICK'N COOL!
    I /really/ hope that some other browser starts working on svg support - but I'm not holding my breath.

    ReplyDelete
  10. Opera 9.5 got som nice SVG support. like background: url(fo.svg).
    more info on the SVG suport currently in the newes version is here http://dev.opera.com/articles/view/opera-9-5-the-next-generation-of-web-s/#svg

    ReplyDelete
  11. super.. but İnternet exlorer 7 tab got som nice SVG support. like background ad font looking to www.DenizTube.com

    ReplyDelete
  12. I assume the ability to reference external SVG entities is not the 'very cool feature' that you're talking about either. Think that will make Firefox 3.1?

    ReplyDelete
  13. Yes :=) İnternet exlorer 7 tab got som nice SVG support

    ReplyDelete