".svg" as background image using css

[Thiago de Paiva]

Hello, folks!

I'm trying to use

    div{
        background-image: url('bg.svg');
    }

but it doesn't work.

Why can't I use it in css?
Are there plans to incorporate it into the standards?

Regards!
Thiago

[Robert O'Callahan-3]

On Sat, Oct 17, 2009 at 8:19 AM, Thiago de Paiva <tcpaiva@...> wrote:

Why can't I use it in css?
Are there plans to incorporate it into the standards?

 

It should work. No standards work is needed. It's not implemented in Gecko yet, but that's my fault.

Rob
--
"He was pierced for our transgressions, he was crushed for our iniquities; the punishment that brought us peace was upon him, and by his wounds we are healed. We all, like sheep, have gone astray, each of us has turned to his own way; and the LORD has laid on him the iniquity of us all." [Isaiah 53:5-6]

[Doug Schepers-3]

Hi, Folks-

Robert O'Callahan wrote (on 10/16/09 5:34 PM):
> On Sat, Oct 17, 2009 at 8:19 AM, Thiago de Paiva <tcpaiva@...
> <mailto:tcpaiva@...>> wrote:
>
>     Why can't I use it in css?
>     Are there plans to incorporate it into the standards?
>
> It should work. No standards work is needed. It's not implemented in
> Gecko yet, but that's my fault.

While no work is needed for that particular example, the CSS WG is
working on a specification to allow the author to specify fallback
values (such as a PNG), in case SVG is not supported as a
background-image, or the file cannot be located.

Thanks, Thiago, for pushing the limits on what you can do in existing
browsers, and Rob, for providing excellent SVG integration work in Gecko
in general.

Regards-
-Doug Schepers
W3C Team Contact, SVG and WebApps WGs

[Dr. Olaf Hoffmann]

Hello,


currently one can test this feature with Opera
and see, how it behaves, especially with the
interesting case with width or height given in
percentage (or em, ex etc) - what is typically not
available with more often interpreted image
formats like PNG, JFIF/JPEG, GIF.

For other browsers indeed the behaviour
is currently not very convenient for authors.
I think, typically another background-image
for the same element with lower specifity is
ignored too, if the SVG cannot be interpreted.
Of course this problem remains anyway for
older browsers even if another behaviour
will be specified from the CSS-WG and applies
for other image formats too, if they are not
interpreted (does any viewer interprete a
flash-image as background? or a PDF or
EPS? - never tried).
 
It remains the recommended option to provide
at least a useful background color for older
browsers or browser versions. Doing this, one
can already provide an SVG as background image
today without any problems. Advanced viewers
will show it, older just the background color.


Olaf

[Helder Magalhães]

Hi everyone,


> While no work is needed for that particular example, the CSS WG is working
> on a specification to allow the author to specify fallback values (such as a
> PNG), in case SVG is not supported as a background-image, or the file cannot
> be located.

Thinking a bit about this for a bit, I thought this was already
working (I haven't performed any tests, though). If memory doesn't
fail, unrecognized CSS declarations should be ignored by UAs, so
providing a fall-back first should work...?

I recall a (very ancient) way to set the pointer cursor in an IE4- [1]
friendly way, something like:

  element{
    /* for IE4 and before */
    cursor:hand;
    /* standard value */
    cursor:pointer;
  }

As IE4 wouldn't recognize the second value, it would use the first,
non-standard, one.

So, following Thiago's example, I'd say this would be accomplished
through something like:

    div{
      /* fall-back for UA without support for SVG as CSS background image */
      background-image: url('bg.png');
      /* UA with support for SVG as CSS background image */
      background-image: url('bg.svg');
    }

Therefore I'd way that an UA would ignore the second declaration, not
only if it doesn't supports it but also if the SVG file could not be
located.

I haven't checked for UA status on this approach, specially from an
optimization point of view (I'd say a UA would try to optimize by
attempting to use the overridden (second) "background-image"
declaration before falling back and even downloading the raster (PNG)
version.


Regards,
 Helder


[1] https://developer.mozilla.org/en/CSS/cursor#Browser_compatibility

[Erik Dahlstrom]

On Sat, 17 Oct 2009 13:04:43 +0200, Helder Magalhães  
<helder.magalhaes@...> wrote:

...

> I recall a (very ancient) way to set the pointer cursor in an IE4- [1]
> friendly way, something like:
>
>   element{
>     /* for IE4 and before */
>     cursor:hand;
>     /* standard value */
>     cursor:pointer;
>   }
>
> As IE4 wouldn't recognize the second value, it would use the first,
> non-standard, one.

Right, that's a bit different though, it's not using the same keywords (in  
other words it's a different syntax).

> So, following Thiago's example, I'd say this would be accomplished
> through something like:
>
>     div{
>       /* fall-back for UA without support for SVG as CSS background  
> image */
>       background-image: url('bg.png');
>       /* UA with support for SVG as CSS background image */
>       background-image: url('bg.svg');
>     }

The last url() value is using valid syntax, and thus won't lead to that  
being discarded by the UA per the CSS parsing rules. That an image format  
isn't supported probably won't be discovered until the UA fetches the  
resource, or when it tries to render it.

> Therefore I'd way that an UA would ignore the second declaration, not
> only if it doesn't supports it but also if the SVG file could not be
> located.

Nope, doesn't work.

> I haven't checked for UA status on this approach, specially from an
> optimization point of view (I'd say a UA would try to optimize by
> attempting to use the overridden (second) "background-image"
> declaration before falling back and even downloading the raster (PNG)
> version.

We'd need something like the image() syntax[1], or a format() specifier  
that could be appended to existing url():s to give the UA the option of  
ignoring unsupported formats early on.

That said, it's still possible to do feature-detection in javascript and  
add the corresponding CSS based on that[2]. Not as elegant as having  
fallbacks in the CSS syntax maybe, but it works today (as long as  
javascript is enabled).

Cheers
/Erik

[1] http://dev.w3.org/csswg/css3-images/
[2] http://my.opera.com/Fyrd/blog/svg-image-and-background-image-replacer

--
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed

[Paul Williams-21]

In other CSS paradigms (font rendering, for instance), a comma separated list specifies the available options, and the UA uses the first value it can handle:

element {
  font-family: Verdana,Helvetica,sans-serif;
}

Something similar could be done for backgrounds (though I suppose that it's not really the domain of the SVG working group):

element {
  background-image: url(foo.svg),url(foo.png);
}


-----Original Message-----
From: www-svg-request@... [mailto:www-svg-request@...] On Behalf Of Erik Dahlstrom
Sent: Tuesday, October 20, 2009 7:06 AM
To: Helder Magalhães; Doug Schepers
Cc: robert@...; Thiago de Paiva; www-svg@...
Subject: Re: ".svg" as background image using css

On Sat, 17 Oct 2009 13:04:43 +0200, Helder Magalhães  
<helder.magalhaes@...> wrote:

...

> I recall a (very ancient) way to set the pointer cursor in an IE4- [1]
> friendly way, something like:
>
>   element{
>     /* for IE4 and before */
>     cursor:hand;
>     /* standard value */
>     cursor:pointer;
>   }
>
> As IE4 wouldn't recognize the second value, it would use the first,
> non-standard, one.

Right, that's a bit different though, it's not using the same keywords (in  
other words it's a different syntax).

> So, following Thiago's example, I'd say this would be accomplished
> through something like:
>
>     div{
>       /* fall-back for UA without support for SVG as CSS background  
> image */
>       background-image: url('bg.png');
>       /* UA with support for SVG as CSS background image */
>       background-image: url('bg.svg');
>     }

The last url() value is using valid syntax, and thus won't lead to that  
being discarded by the UA per the CSS parsing rules. That an image format  
isn't supported probably won't be discovered until the UA fetches the  
resource, or when it tries to render it.

> Therefore I'd way that an UA would ignore the second declaration, not
> only if it doesn't supports it but also if the SVG file could not be
> located.

Nope, doesn't work.

> I haven't checked for UA status on this approach, specially from an
> optimization point of view (I'd say a UA would try to optimize by
> attempting to use the overridden (second) "background-image"
> declaration before falling back and even downloading the raster (PNG)
> version.

We'd need something like the image() syntax[1], or a format() specifier  
that could be appended to existing url():s to give the UA the option of  
ignoring unsupported formats early on.

That said, it's still possible to do feature-detection in javascript and  
add the corresponding CSS based on that[2]. Not as elegant as having  
fallbacks in the CSS syntax maybe, but it works today (as long as  
javascript is enabled).

Cheers
/Erik

[1] http://dev.w3.org/csswg/css3-images/
[2] http://my.opera.com/Fyrd/blog/svg-image-and-background-image-replacer

--
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed

[Thiago de Paiva]

Thank you all for responding.  =)

And Rob, I'm waiting for its implementation in Gecko!  ;)

Best!
Thiago

2009/10/20 Paul Williams <pwilliams@...>

In other CSS paradigms (font rendering, for instance), a comma separated list specifies the available options, and the UA uses the first value it can handle:

element {
 font-family: Verdana,Helvetica,sans-serif;
}

Something similar could be done for backgrounds (though I suppose that it's not really the domain of the SVG working group):

element {
 background-image: url(foo.svg),url(foo.png);

}


-----Original Message-----
From: www-svg-request@... [mailto:www-svg-request@...] On Behalf Of Erik Dahlstrom
Sent: Tuesday, October 20, 2009 7:06 AM
To: Helder Magalhães; Doug Schepers
Cc: robert@...; Thiago de Paiva; www-svg@...
Subject: Re: ".svg" as background image using css

On Sat, 17 Oct 2009 13:04:43 +0200, Helder Magalhães
<helder.magalhaes@...> wrote:

...
> I recall a (very ancient) way to set the pointer cursor in an IE4- [1]
> friendly way, something like:
>
>   element{
>     /* for IE4 and before */
>     cursor:hand;
>     /* standard value */
>     cursor:pointer;
>   }
>
> As IE4 wouldn't recognize the second value, it would use the first,
> non-standard, one.

Right, that's a bit different though, it's not using the same keywords (in
other words it's a different syntax).

> So, following Thiago's example, I'd say this would be accomplished
> through something like:
>
>     div{
>       /* fall-back for UA without support for SVG as CSS background
> image */
>       background-image: url('bg.png');
>       /* UA with support for SVG as CSS background image */
>       background-image: url('bg.svg');
>     }

The last url() value is using valid syntax, and thus won't lead to that
being discarded by the UA per the CSS parsing rules. That an image format
isn't supported probably won't be discovered until the UA fetches the
resource, or when it tries to render it.

> Therefore I'd way that an UA would ignore the second declaration, not
> only if it doesn't supports it but also if the SVG file could not be
> located.

Nope, doesn't work.

> I haven't checked for UA status on this approach, specially from an
> optimization point of view (I'd say a UA would try to optimize by
> attempting to use the overridden (second) "background-image"
> declaration before falling back and even downloading the raster (PNG)
> version.

We'd need something like the image() syntax[1], or a format() specifier
that could be appended to existing url():s to give the UA the option of
ignoring unsupported formats early on.

That said, it's still possible to do feature-detection in javascript and
add the corresponding CSS based on that[2]. Not as elegant as having
fallbacks in the CSS syntax maybe, but it works today (as long as
javascript is enabled).

Cheers
/Erik

[1] http://dev.w3.org/csswg/css3-images/
[2] http://my.opera.com/Fyrd/blog/svg-image-and-background-image-replacer

--
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed