[CREATE] a question to the SVG experts out there

[Doug Schepers]

Hi, Yuval-

Leonard Rosenthol wrote (on 10/27/09 4:22 AM):
> On Tue, Oct 27, 2009 at 1:16 AM, Yuval Levy <create07 at sfina.com
> <mailto:create07 at sfina.com>> wrote:
>>
>>  is there a way to use an SVG as a background to an HTML page so that it
>>  scales to 100% of the viewport, no matter if I'm on a large desktop
>>  display or on a tiny jPhone display?

In theory, this should work:

bg.svg
  <svg xmlns="http://www.w3.org/2000/svg"
      width="100%" height="100%" viewBox="0 0 400 400">
    <!-- some graphic elements here -->
  </svg>

style.css
  body {
    background-image: url('bg.svg');
  }

However, because native browser support for SVG is fairly new, this is 
one of the things that has fallen through the cracks for most of them. 
This is under development in Firefox [1], and it sorta works in Opera 
and WebKit [2].  This use of SVG is probably 1 year out (depending on 
the release cycles)... sorry.  It's possible that it will be enabled 
using SVG Web [3] before that point, but you could count on that 
universally because the Flash player isn't on many mobiles (like the 
iPhone).  Better to wait for native support, in my opinion... and file 
bugs with the browsers to let them know you want it!


There is also currently a spec under active development by the CSS WG 
(CSS Backgrounds and Borders Module Level 3) that will define this [4], 
and will also allow for fallback images in case SVG isn't supported or 
the primary image can't be found.  This is one of the specs that is 
seeing the most progress, and it also will deal with SVG images as borders.


> Not currently, because HTML4 doesn't directly integrate with SVG - it's
> an "add-on".  HTML5, however, wants to make it more integrated (and also
> the competitive Canvas technology), so it might happen at some point but
> it's not currently in the spec (AFAICT).

This doesn't really have anything to do with HTML4 or 5... it's a CSS 
thing.  Canvas has nothing to do with this, either, since no browser 
plans to allow scripting in CSS background images (either as SVG, 
Canvas, or any other file format, and Canvas is exclusively 
script-based, unlike SVG, which is a document that can be static, 
declarative, or scripted.  The SVG Integration spec (a work in progress) 
talks a bit about different modes for SVG [5].

However, HTML5 does explicitly talk about how to use SVG in other HTML 
contexts, specifically inline SVG (it contains special parsing rules, 
etc.).  And this is being actively developed by browser vendors, so you 
can expect improved SVG integration with HTML soon.



For the record, while there is some overlap between SVG and Canvas, I 
wouldn't call them competitive... they are useful for different 
purposes; in fact, as one of the editors of the prospective Canvas spec 
in the HTML WG [6], and as an editor for some SVG specs, I can tell you 
that the SVG WG is interested in integrating Canvas into SVG for 
pixel-based operations and other aspects, and that we are talking about 
creating a simplified shared API for both SVG and Canvas to make it easy 
for authors to learn one API and use it for both... I call this COG 
(Common Open Graphics), and I've toyed around with what it might look 
like. [7]


[1] http://lists.w3.org/Archives/Public/www-svg/2009Oct/0023.html
[2] http://helephant.com/2009/08/svg-images-as-css-backgrounds/
[3] http://code.google.com/p/svgweb/
[4] http://www.w3.org/TR/css3-background/#the-background-image
[5] http://dev.w3.org/SVG/modules/integration/SVGIntegration.html
[6] http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
[7] http://www.w3.org/Graphics/SVG/WG/wiki/Simple_SVG_API

Regards-
-Doug