Re: ".svg" as background image using css

Thank you all for responding.  =)

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

Best!
Thiago



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

> 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@w3.org [mailto:www-svg-request@w3.org] On Behalf Of
> Erik Dahlstrom
> Sent: Tuesday, October 20, 2009 7:06 AM
> To: Helder Magalhães; Doug Schepers
> Cc: robert@ocallahan.org; Thiago de Paiva; www-svg@w3.org
> Subject: Re: ".svg" as background image using css
>
> On Sat, 17 Oct 2009 13:04:43 +0200, Helder Magalhães
> <helder.magalhaes@gmail.com> 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
>
>