SVG as Background Image

[Tonio]

Do any browsers support the use of SVG files as background images
through CSS? I haven't been able to get it to work in IE6.

[Jim Ley]

On 14 Jul 2003 10:55:30 -0700, ca*********@angelfire.com (Tonio)
wrote:

Do any browsers support the use of SVG files as background images
through CSS? I haven't been able to get it to work in IE6.

XSmiles may, but that limits you to XHTML.

Jim.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

[Jim Ley]

On Tue, 15 Jul 2003 15:41:10 -0400, Keith Bowes <do****@spam.me>
wrote:

Tonio wrote:

Do any browsers support the use of SVG files as background images
through CSS? I haven't been able to get it to work in IE6.
Currently, using SVG as a background works as well as using Flash as a
background. The reason is that all popular browsers need the Adobe
plug-in to display SVG at all (IIRC, IE 6 comes with it),

IE6 doesn't AIUI.
and so you'll
only be able to view SVG by using <object> or <embed>.

or IFRAME as a much better solution.

Jim.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

[Tonio]

Keith Bowes <do****@spam.me> wrote in message news:<wD*****************@fe01.atl2.webusenet.com> ...

Tonio wrote:

Do any browsers support the use of SVG files as background images
through CSS? I haven't been able to get it to work in IE6.

Currently, using SVG as a background works as well as using Flash as a
background. The reason is that all popular browsers need the Adobe
plug-in to display SVG at all (IIRC, IE 6 comes with it), and so you'll
only be able to view SVG by using <object> or <embed>. AFAIK, Amaya is
the only web browser with built-in SVG support, and you can compile
Mozilla with rudimentary support.

So how do I code my CSS to use an SVG or Flash file as a background?
This is what I tried in my HTML file's style sheet:

table.new {background-image: url(bkgrnd.svg);}

I tried it with both the SVG file and the Flash file (the latter
created through Adobe Illustrator 10) and neither worked in IE6.

Here is the SVG file I'm using:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<rect x="33" y="0" width="360" height="210" transform="rotate(9)"
style="fill:#FFDB6F"/>
</svg>