Last Comment Bug 231179 - SVG images in CSS
: SVG images in CSS
Status: RESOLVED FIXED
parity-opera [personas-needs] [evang-...
:
Product: Core
Classification: Components
Component: SVG (show other bugs)
: Trunk
: All All
: P2 enhancement with 107 votes (vote)
: mozilla1.9.2a1
Assigned To: Daniel Holbert [:dholbert] (largely AFK until June 28)
:
Mentors:
http://www.csszengarden.com/?cssfile=...
: 316257 319267 451520 (view as bug list)
Depends on: 276431 433616 600574
Blocks: 486028 435299
  Show dependency treegraph
 
Reported: 2004-01-16 13:29 PST by Florent
Modified: 2010-11-08 14:39 PST (History)
93 users (show)
roc: blocking1.9.2-
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
A sample of how I see this being used (446 bytes, text/xml)
2005-09-25 08:56 PDT, Martin Eyles
no flags Details
example svg to go with background (166 bytes, text/xml)
2005-09-25 08:58 PDT, Martin Eyles
no flags Details
SVG no. 1 for test-case (299 bytes, image/svg+xml)
2007-03-16 09:30 PDT, Rafal Milecki
no flags Details
SVG no. 2 for test-case (300 bytes, image/svg+xml)
2007-03-16 09:31 PDT, Rafal Milecki
no flags Details
SVG no. 3 for test-case (583 bytes, image/svg+xml)
2007-03-16 09:32 PDT, Rafal Milecki
no flags Details
Zajec's SVG text (817 bytes, application/xhtml+xml)
2007-03-16 09:35 PDT, Rafal Milecki
no flags Details
example of list-style-image with base64 encoding (378 bytes, text/html)
2010-11-08 08:15 PST, Daniel Holbert [:dholbert] (largely AFK until June 28)
no flags Details

Description Florent 2004-01-16 13:29:21 PST
User-Agent:       Mozilla/5.0 (compatible; Konqueror/3.1; Linux)
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.6b) Gecko/20031217

PNG, JPEG and GIF images are rendered in CSS, but not the SVG images. 
 
With this feature, it could be possible to reduce a lot the weight of the web pages! 
(and in particular for the big background image because today people have bigger screens, 
so web pages are bigger) 
 
For exemple, this works: 
background: #8AC url(image.png); 
But this does not work: 
background: #8AC url(image.svg); 
 

Reproducible: Always

Steps to Reproduce:
1.
2.
3.


Expected Results:  
Have the same CSS, but with weight far more lower.
Comment 1 Jo Hermans 2004-01-16 14:22:06 PST
I trust you're using a SVG-enabled Mozilla ?
Comment 2 Florent 2004-01-17 02:00:17 PST
> I trust you're using a SVG-enabled Mozilla ? 
 
of course :p 
Comment 3 Sekundes 2004-02-15 23:46:19 PST
It can also be widely used in chrome.
We could theme Mozilla/Firefox using scalable graphics as alternatives via XUL +
CSS styling mechanism, which would change the size of icons everywhere.
Comment 4 Florent 2004-03-02 13:48:55 PST
(In reply to comment #3) 
> It can also be widely used in chrome. 
> We could theme Mozilla/Firefox using scalable graphics as alternatives via XUL + 
> CSS styling mechanism, which would change the size of icons everywhere. 
 
It could even be recursive in a way : 
style-a.css could use image-a.svg for big backgrounds and graphics, 
and image-a.svg could call style-a.css back to unify colors with the web page. 
Comment 5 Florent 2004-03-02 13:54:12 PST
> With this feature, it could be possible to reduce a lot the weight of the web pages!  
> (and in particular for the big background image because today people have bigger 
> screens, so web pages are bigger)  
>   
> For exemple, this works:  
> background: #8AC url(image.png);  
> But this does not work:  
> background: #8AC url(image.svg);  
 
 
From my point of view the _perfect_ exemple of what could be done with SVG in CSS is this 
: 
http://www.csszengarden.com/?cssfile=/051/051.css 
(here svg is not used because Mozilla** nor IE are able to load SVG images from CSS!) 
**{even the svg enable one} 
 
 
Comment 6 Jonathan Watt [:jwatt] (Away Jun. 27 - Jul. 13) 2004-09-15 11:25:51 PDT
Mass reassign of SVG bugs that aren't currently being worked on by Alex to
general@svg.bugs. If you think someone should be assigned to your bug you can
join the #svg channel on mozilla.org's IRC server ( irc://irc.mozilla.org/svg )
where you can try to convince one of the SVG hackers to work on it. We aren't
always there, so if you don't get a response straight away please try again later. 
Comment 7 Martin Eyles 2005-09-25 08:56:17 PDT
Created attachment 197335 [details]
A sample of how I see this being used
Comment 8 Martin Eyles 2005-09-25 08:58:13 PDT
Created attachment 197336 [details]
example svg to go with background

I could see this having declaretive animation - a fade in, or comming from the
side and bouncing or something, although at the moment it's just static
Comment 9 Martin Eyles 2005-09-25 09:04:28 PDT
I also find this with 1.5 beta 1 in windows (could the owner change linux to all
in the OS box). I would find it particularly good to put it as the background to
a:hover (with the svg containing declarative animation), to create some nice
flash-like effects when links are hovered over, whilst keeping the markup nice
and clean and accesible (unlike flash).

I've attached a couple of files, which demonstrate how I think it could be useful.

Oh, if anyone has another way of acheiving this effect I'd love to hear it. :-)

Thanks,
    Martin
Comment 10 Elmar Ludwig 2005-11-13 04:45:27 PST
*** Bug 316257 has been marked as a duplicate of this bug. ***
Comment 11 Elmar Ludwig 2005-12-06 00:26:07 PST
*** Bug 319267 has been marked as a duplicate of this bug. ***
Comment 12 Rafal Milecki 2007-03-16 09:30:37 PDT
Created attachment 258793 [details]
SVG no. 1 for test-case
Comment 13 Rafal Milecki 2007-03-16 09:31:58 PDT
Created attachment 258794 [details]
SVG no. 2 for test-case
Comment 14 Rafal Milecki 2007-03-16 09:32:42 PDT
Created attachment 258795 [details]
SVG no. 3 for test-case
Comment 15 Rafal Milecki 2007-03-16 09:35:31 PDT
Created attachment 258796 [details]
Zajec's SVG text

Test-case that checks support for SVG in CSS's background.
Comment 16 Emery 2007-07-24 05:54:55 PDT
SVG backgrounds would be complemented with CSS3 background-size.
Comment 17 Mathias Gaunard 2008-02-29 10:43:44 PST
This bug doesn't really depend on bug 276431.
The discussion on bug 276431 also shows that while some people are reluctant to support SVG in img tags, they're not reluctant to support it for background images.

I therefore suggest those two bugs become independent.
Comment 18 Stephen 2008-07-15 01:13:33 PDT
Just want to point out that with FF3s zoom feature svg becomes especially attractive for creating more seamlessly scalable interfaces. Especially where there are many icons used.

With no ability to scale images in css creating oversized images and scaling them down is not a possible short term option.
Comment 19 dan_500 2008-07-16 08:58:30 PDT
You can set the size of the image in SVG, so there is no reason not to implement this feature. You don't need to wait for everything. Just implement it. :)
Comment 20 Caleb Cushing 2008-07-31 13:07:24 PDT
this is my #1 svg bug, because it's the #1 place I want to use svg, is there any way this could make it into 3.1?
Comment 21 Chris Hubick 2008-08-05 21:18:43 PDT
"Firefox 3.1 Meeting Minutes: 2008-08-05" at http://blog.mozilla.com/meeting-notes/archives/30 says "SVG image decoding - CUT", which I assume refers to bug 276431 blocking this one :(
Comment 22 Robert Longson 2008-08-21 01:24:15 PDT
*** Bug 451520 has been marked as a duplicate of this bug. ***
Comment 23 Robert O'Callahan (:roc) (Exited; email my personal email if necessary) 2009-09-22 20:38:34 PDT
Not making it.
Comment 24 worms 2009-10-19 21:27:28 PDT
Would it be possible to know, roughly, what prevented this bug, together with Bug 272288 and Bug 276431, to make it in 1.9.2, as we were expecting it so much, and when would its new estimated time of implementation be, if it's already known?
 
Thank you!
Comment 25 Jonathan Watt [:jwatt] (Away Jun. 27 - Jul. 13) 2009-10-23 09:32:04 PDT
See bug 276431 comment 65.
Comment 26 adeveria 2010-03-19 06:27:09 PDT
According to the IE blog [1], SVG images in CSS is planned for IE9. It is also already supported (though not as well as in Opera) in Safari and Chrome, so I really think it's time Mozilla starts prioritizing this. 

[1] http://blogs.msdn.com/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx
Comment 27 mackyle 2010-03-19 15:54:46 PDT
While the current version of Safari does not pass the "Zajec's SVG text" test, the current version of the WebKit nightly does.  So this will also become parity-safari at some point.
Comment 28 mackyle 2010-06-07 21:41:13 PDT
Safari 5 has now been released and passes the "Zajec's SVG text" test.
Comment 29 Cameron McCormack (:heycam) (away Jun 25 – Jul 10) 2010-06-30 16:59:36 PDT
https://developer.mozilla.org/en/Firefox_4_for_developers says Firefox 4 will support SVG in CSS background images.  I guess that is not the case, though, since this bug hasn't seen activity for a while?

/me rasterizes some PNG fallback
Comment 30 Robert O'Callahan (:roc) (Exited; email my personal email if necessary) 2010-06-30 17:12:27 PDT
dholbert actually has working patches in bug 276431. They're pretty close to done.
Comment 31 Robert O'Callahan (:roc) (Exited; email my personal email if necessary) 2010-06-30 17:13:05 PDT
(Those patches make us support SVG everywhere we support images ... <img>, CSS, favicons, etc)
Comment 32 Cameron McCormack (:heycam) (away Jun 25 – Jul 10) 2010-06-30 17:13:42 PDT
Oh, sweet!
Comment 33 Ahmed Harthi 2010-08-25 11:26:09 PDT
Should I file a new bug for the following test ?

http://ie.microsoft.com/testdrive/Graphics/SpaceInvader/Default.html
Comment 34 Daniel Holbert [:dholbert] (largely AFK until June 28) 2010-08-25 13:38:09 PDT
Nope - that demo already works with my patches for bug 276431. (I just tested it.)
Comment 35 Daniel Holbert [:dholbert] (largely AFK until June 28) 2010-09-08 14:32:59 PDT
bug 276431 just landed, including reftests for using SVG as a CSS background and a list-style-image. Woot! :)

I wouldn't be surprised if there are edge cases (particularly with -moz-background-*) where we need a few tweaks to get the desired behavior, though.  I'm leaving this open until we've more rigorously exercised SVG with CSS properties, fixed anything that's not quite right, and added more reftests.
Comment 36 flying sheep 2010-09-28 06:49:38 PDT
can we also use internal svg images via id tags?
(like it is done when using css filters for html elements: http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html )
Comment 37 Daniel Holbert [:dholbert] (largely AFK until June 28) 2010-09-28 08:21:15 PDT
Not directly from this bug.  But you could use -moz-element to do that:
  http://hacks.mozilla.org/2010/08/mozelement/
Comment 38 Rob Crowther 2010-10-28 11:35:19 PDT
That (the -moz-element approach) doesn't do what I was expecting.  I'm not sure if this is what flying sheep was driving at but here's what I'd like to do:  I have a single SVG file, background-images.svg, which contains multiple shapes each with IDs.  Then in the CSS have something like:

header { background-image: url(background-images.svg#circle); }
footer { background-image: url(background-images.svg#rect); }

Where #circle and #rect reference individual shapes within the file.  Essentially a CSS Sprites approach except without having to worry about all that clipping and positioning.  Is this in any way feasible?
Comment 39 Daniel Holbert [:dholbert] (largely AFK until June 28) 2010-10-28 12:30:08 PDT
Not at the moment, no.  But as I alluded to in Comment 37, you should be able to get a similar effect with moz-element if you directly define those elements (e.g. #circle) in an <svg> block in the same document where you use them, though.  (That doesn't give you the same file-separation as the technique you're suggesting, but it's something.)

In any case, this is beyond the scope of this bug -- further discussion on this point should probably go on a newsgroup like http://groups.google.com/group/mozilla.dev.tech.svg/
Comment 40 flying sheep 2010-10-28 12:33:27 PDT
that would be a cool syntax:

url(s.svg) means an external svg picture,
url(#boo) means an inline-svg in the current document,
url(x.xml#boo) means a inline-svg in an external xml document.

since svg is a xml format, you can specify svg pictures inside other svg pictures which would provide the functionality rob was asking for.

should i file an enhancement request for this?
Comment 41 Robert O'Callahan (:roc) (Exited; email my personal email if necessary) 2010-10-28 12:36:44 PDT
It's doable. However, the SVG working group hasn't decided how such references should behave. There's an old SVG 1.2 draft here:
http://www.w3.org/TR/SVGTiny12/linking.html#LinksIntoSVG
which makes such references translate the element into view rather than rendering it as an isolated image.

I suggest bringing this up in www-svg.
Comment 42 flying sheep 2010-10-28 12:48:43 PDT
1. what is www-svg? a chatroom? a webpage? a usenet-group?
2. mozilla.dev.tech.svg is hopelessly flooded with spam.
Comment 43 Robert O'Callahan (:roc) (Exited; email my personal email if necessary) 2010-10-28 13:08:13 PDT
A W3C mailing list.
Comment 44 Rob Crowther 2010-10-28 15:16:59 PDT
Daniel, sorry if I didn't make it clear in my first comment: I tried -moz-element and it didn't work - ie. I inlined my SVG document (HTML5 doctype), put IDs in each shape in the the SVG and then tried to use -moz-element to access them directly as backgrounds on different elements.
Comment 45 Robert O'Callahan (:roc) (Exited; email my personal email if necessary) 2010-10-28 15:22:00 PDT
You need to put each SVG shape in its own <svg> subtree which is a child of HTML content. Then refer to the <svg> subtree.
Comment 46 Please Ignore This Troll (Account Disabled) 2010-11-07 05:40:18 PST
shouldn't this bug be a blocker for 2.0?
Comment 47 Robert O'Callahan (:roc) (Exited; email my personal email if necessary) 2010-11-07 16:22:26 PST
Daniel, why can't we just mark this FIXED?
Comment 48 Please Ignore This Troll (Account Disabled) 2010-11-07 21:14:22 PST
because it's not fixed, maybe?
try add an SVG element by CSS with base64 encode. I mean with pure CSS, without HTML.
Comment 49 Daniel Holbert [:dholbert] (largely AFK until June 28) 2010-11-08 08:12:26 PST
I left it open per comment 35, but that was probably silly.  Since SVG images in CSS generally works now, images it's probably cleaner to follow this fixed and file followups (like bug 597778) on individual issues.
Comment 50 Daniel Holbert [:dholbert] (largely AFK until June 28) 2010-11-08 08:15:20 PST
Created attachment 488877 [details]
example of list-style-image with base64 encoding

er s/follow this fixed/mark this fixed/

(In reply to comment #48)
> try add an SVG element by CSS with base64 encode. I mean with pure CSS, without
> HTML.

That works for me (see attachment), but maybe I misunderstand you.  Can you file a followup bug? (or at least post an attachment / a link to a broken example, so I can see what you mean?)
Comment 51 adeveria 2010-11-08 09:09:45 PST
It's possible 1luvm0z1l4 is referring to data URL with gradients or use elements not working properly due to bug 308590. 

I suspect that bug will become a bigger issue now people can use SVGs in <img> or CSS backgrounds and will expect the base64 versions to work the same...
Comment 52 Please Ignore This Troll (Account Disabled) 2010-11-08 14:15:01 PST
(In reply to comment #51)
> It's possible 1luvm0z1l4 is referring to data URL with gradients or use
> elements not working properly due to bug 308590. 

Oh, you are right. My testcase was based on SVG with filters and it doesn't work if used by CSS as data:URL(base64-encoded-file).

I just thought that keeping that keeping this bug as meta for all SVG via CSS bugs would be useful, and it should stay unfixed until all dependent bugs got fixed.
Comment 53 Daniel Holbert [:dholbert] (largely AFK until June 28) 2010-11-08 14:29:37 PST
(In reply to comment #52)
> I just thought that keeping that keeping this bug as meta for all SVG via CSS
> bugs would be useful, and it should stay unfixed until all dependent bugs got
> fixed.

That was sort of my intention in Comment 35. But I don't think that's really useful at this point because
 (a) this bug has too many comments / too long of a history to be used effectively as a metabug
 (b) I think mozilla generally avoids blocking on metabugs -- but we can just as easily block (or not block, as the case may be, depending on severity) on individual "this still doesn't work yet" issues with SVG images in CSS.
Comment 54 Daniel Holbert [:dholbert] (largely AFK until June 28) 2010-11-08 14:30:36 PST
(In reply to comment #53)
>  (a) this bug has too many comments / too long of a history to be used
> effectively as a metabug

or rather, "to be converted into a metabug at this point"

Note You need to log in before you can comment on or make changes to this bug.