Re: [css-d] SVG background-image with fallback

2014-08-10 Thread Eric
Hope they've seen the MS press release about EOLing IE 8 in about 18 months ;-) Eric http://www.zdnet.com/microsoft-to-drop-support-for-older-versions-of-internet-explorer-732437/?s_cid=e589ttag=e589ftag=TREc64629f On August 7, 2014 at 7:00 PM Tom Livingston tom...@gmail.com wrote: Our

Re: [css-d] SVG background-image with fallback

2014-08-10 Thread Karl DeSaulniers
On Aug 10, 2014, at 7:34 PM, Eric e...@minerbits.com wrote: Hope they've seen the MS press release about EOLing IE 8 in about 18 months ;-) Eric http://www.zdnet.com/microsoft-to-drop-support-for-older-versions-of-internet-explorer-732437/?s_cid=e589ttag=e589ftag=TREc64629f As

Re: [css-d] SVG background-image with fallback

2014-08-07 Thread Eric
I realize that this thread has gone off in other direction but I have a question - Given that SVG is support universally except for very ancient UAs (IE8 is south of 5% now) why bother with a fallback image? Why not just give them a background-color? Seems like a whole lot of wasted work for a

Re: [css-d] SVG background-image with fallback

2014-08-07 Thread Tom Livingston
Our clients still use IE8. I think all most all of them. That's the only reason that matters to my superiors, or my clients. On Thu, Aug 7, 2014 at 6:33 PM, Eric e...@minerbits.com wrote: I realize that this thread has gone off in other direction but I have a question - Given that SVG is

[css-d] SVG background-image with fallback

2014-08-05 Thread Tom Livingston
List, I was having a discussion in the comments of an article about using svg as a background-image in CSS, and using a png as fallback. I was writing it like this: background-image: image.png; background-image: image.svg; But this fails in IE8 (and presumably in other non-svg-supporting

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Chris Rockwell
Have you seen this, Tom: http://css-tricks.com/svg-fallbacks/ ? Scroll down about 1/2 way for the `background-image` fallback; Basically you have to fake multiple backgrounds, but it doesn't work in Android 2.3, if that's a concern. So: background-image: url('image.png'); background-image:

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Tom Livingston
I've seen that and others. I'm looking for why. Why don't they work the same. On Tuesday, August 5, 2014, Chris Rockwell ch...@chrisrockwell.com wrote: Have you seen this, Tom: http://css-tricks.com/svg-fallbacks/ ? Scroll down about 1/2 way for the `background-image` fallback; Basically you

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Philippe Wittenbergh
Le 5 août 2014 à 22:00, Tom Livingston tom...@gmail.com a écrit : was having a discussion in the comments of an article about using svg as a background-image in CSS, and using a png as fallback. I was writing it like this: background-image: image.png; background-image: image.svg; But

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Chris Rockwell
They do work the same. You're not giving it a declaration it doesn't understand ( like rgba(), therefore causing a fallback ), it perfectly understands url(), it just can't render the resource you're giving it. Chris Rockwell On Tue, Aug 5, 2014 at 9:17 AM, Tom Livingston tom...@gmail.com

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Tom Livingston
Ok, I see the difference. Thanks all. On Tuesday, August 5, 2014, Chris Rockwell ch...@chrisrockwell.com wrote: They do work the same. You're not giving it a declaration it doesn't understand ( like rgba(), therefore causing a fallback ), it perfectly understands url(), it just can't render

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Karl DeSaulniers
Turn your svg image into a base64 and load the image data as content: . Wouldn't that work? Karl Sent from losPhone On Aug 5, 2014, at 8:18 AM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 5 août 2014 à 22:00, Tom Livingston tom...@gmail.com a écrit : was having a discussion in the

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Philippe Wittenbergh
Le 6 août 2014 à 06:40, Karl DeSaulniers k...@designdrumm.com a écrit : urn your svg image into a base64 and load the image data as content: . Wouldn't that work? No, that wouldn't work any differently. A browser that doesn't support SVG will see an invalid / unrecognised image format as

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Karl DeSaulniers
On Aug 5, 2014, at 6:15 PM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 6 août 2014 à 06:40, Karl DeSaulniers k...@designdrumm.com a écrit : urn your svg image into a base64 and load the image data as content: . Wouldn't that work? No, that wouldn't work any differently. A browser

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Tom Livingston
On Tuesday, August 5, 2014, Karl DeSaulniers k...@designdrumm.com wrote: On Aug 5, 2014, at 6:15 PM, Philippe Wittenbergh e...@l-c-n.com javascript:; wrote: Le 6 août 2014 à 06:40, Karl DeSaulniers k...@designdrumm.com javascript:; a écrit : urn your svg image into a base64 and load

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Chris Rockwell
Hey Tom, just a heads up that you need to include the 2nd argument in background-image:, otherwise it won't fallback. Chris On Aug 5, 2014 8:45 PM, Tom Livingston tom...@gmail.com wrote: On Tuesday, August 5, 2014, Karl DeSaulniers k...@designdrumm.com wrote: On Aug 5, 2014, at 6:15 PM,

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Philippe Wittenbergh
Le 6 août 2014 à 09:45, Tom Livingston tom...@gmail.com a écrit : Actually, now that I see the difference between this and rgba with rgb fallback, I see the best non-script solution is: Background: url(image.png); background-image: url(image.svg); See here:

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Tom Livingston
On Tuesday, August 5, 2014, Chris Rockwell ch...@chrisrockwell.com wrote: Hey Tom, just a heads up that you need to include the 2nd argument in background-image:, otherwise it won't fallback. Ah yes. Correct. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph:

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Karl DeSaulniers
So with this, my browser, if it supports svg has to download your png and then your svg? Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Aug 5, 2014, at 7:45 PM, Tom Livingston tom...@gmail.com wrote: Background: url(image.png); background-image: url(image.svg), none;

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Tom Livingston
These were simple examples. In practice, I'd add MQ to stop that from happening in most browsers. On Tuesday, August 5, 2014, Karl DeSaulniers k...@designdrumm.com wrote: So with this, my browser, if it supports svg has to download your png and then your svg? Best, Karl DeSaulniers Design

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Karl DeSaulniers
I see. But so I can wrap my head around this, without the media queries, that is what this css declaration does? Karl DeSaulniers Design Drumm http://designdrumm.com On Aug 5, 2014, at 8:08 PM, Tom Livingston tom...@gmail.com wrote: These were simple examples. In practice, I'd add MQ to

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Tom Livingston
Most likely, yes. On Tuesday, August 5, 2014, Karl DeSaulniers k...@designdrumm.com wrote: I see. But so I can wrap my head around this, without the media queries, that is what this css declaration does? Karl DeSaulniers Design Drumm http://designdrumm.com On Aug 5, 2014, at 8:08 PM,

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Karl DeSaulniers
That is an interesting find, thank you for sharing. I am still a little partial to the js solution as it checks things before anything is loaded, but if your a css purist, this is gold. ;) Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Aug 5, 2014, at 8:11 PM, Tom Livingston

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Tom Livingston
If you're already using modernizr, it's even easier. On Tuesday, August 5, 2014, Karl DeSaulniers k...@designdrumm.com wrote: That is an interesting find, thank you for sharing. I am still a little partial to the js solution as it checks things before anything is loaded, but if your a css

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Karl DeSaulniers
On Aug 5, 2014, at 8:19 PM, Tom Livingston tom...@gmail.com wrote: If you're already using modernizr, it's even easier. Na, I don't normally use those libraries unless I can't roll my own or it's just more feasible to do so. Too much excess code for stuff I am not utilizing in a project.

Re: [css-d] SVG background-image with fallback

2014-08-05 Thread Tom Livingston
Of course, YMMV, but like I said, if you're already using modernizr - which also includes the html5shiv - it's trivial to handle this svg situation. On Tuesday, August 5, 2014, Karl DeSaulniers k...@designdrumm.com wrote: On Aug 5, 2014, at 8:19 PM, Tom Livingston tom...@gmail.com javascript:;