Comments on: A Complete Guide to SVG Fallbacks https://css-tricks.com/a-complete-guide-to-svg-fallbacks/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Mon, 28 Dec 2020 23:30:30 +0000 hourly 1 https://wordpress.org/?v=6.5.5 By: Amelia Bellamy-Royds https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#comment-1594655 Thu, 14 May 2015 15:42:34 +0000 http://css-tricks.com/?p=199370#comment-1594655 In reply to Parker Bennett.

I can’t say I have a personal favourite because I don’t do a lot of production work — my main target audience is usually people learning SVG!

More generally, however, I think it really depends on what you’re trying to communicate. I don’t think you need an identical image on every browser, but you do need to get the message across and to make sure your site is still functional (as much as possible).

So, a basic alt text is often going to be enough for icons. For complex data viz, providing a text/table version of the data is something I’d recommend for many reasons, but it isn’t going to convey all the information of a well-designed chart. I tend to lean to the no-JS solutions as much as possible, so the <image> trick would be my next go-to. And probably I would now use Tigt’s approach to hiding the extra text.

]]>
By: Parker Bennett https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#comment-1594339 Sat, 09 May 2015 17:29:43 +0000 http://css-tricks.com/?p=199370#comment-1594339 I’ve been weighing fallback options for an icon system and this incredibly helpful. Thanks so much!

I was set to use the <image> trick, but now I’ll be looking into Tigt’s Pen, as I want a no-JavaScript solution.

The only thing I was hoping to see is what method you personally favor. (It seems Chris “goes commando” with no fallback.)

]]>
By: Keith https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#comment-1594310 Thu, 07 May 2015 06:38:01 +0000 http://css-tricks.com/?p=199370#comment-1594310 I wanted a dependency free solution that worked on as many browsers as possible for the logo of the site.

So far I’ve opted for <object> using inline base64 data uri of the svg and inside a <div> that has a class to load the PNG fallback. The CSS for that is set in an inline <style> in the head.

I’ve added wrapping <div> with role=”img” and aria-label for accessibility.

]]>
By: Amelia Bellamy-Royds https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#comment-1594303 Wed, 06 May 2015 21:11:43 +0000 http://css-tricks.com/?p=199370#comment-1594303 In reply to Flunch.

Yes, a server-side sniff test is always another option, no matter how much it is frowned upon.

I would like to think that it is highly unlikely that any new browsers will come on the scene that don’t support SVG, so the above code is probably not going to bite you.

]]>
By: Amelia Bellamy-Royds https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#comment-1594301 Wed, 06 May 2015 21:01:13 +0000 http://css-tricks.com/?p=199370#comment-1594301 In reply to Tigt.

Ah, yes, that’s a nasty caveat with <title> and <desc> — they need to come first, before any child content. It was a performance issue at the time the spec was written; browsers didn’t want to have to search for these elements. I suspect the performance issues are less relevant now, but even if we remove that requirement from SVG 2, you’ll still need it for backwards compatibility.

I’ll correct the example to use that structure.

]]>
By: Chris https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#comment-1594283 Tue, 05 May 2015 21:22:04 +0000 http://css-tricks.com/?p=199370#comment-1594283 In reply to Chris.

That was supposed to be:

if (!Modernizr.inlinesvg) {
  $('#containing-div').prepend(img tag with its source set to fallback.png);
}
]]>
By: Chris https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#comment-1594282 Tue, 05 May 2015 21:16:11 +0000 http://css-tricks.com/?p=199370#comment-1594282 For inline SVG with an image replacement, I typically do this:

if (!Modernizr.inlinesvg) {
$(‘#containing-div’).prepend(”);
}

As long as I’ve removed the xmlns link in the SVG, IE8 just ignores the SVG block without screwing up the page, and loads the .png fallback.

]]>
By: Eric https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#comment-1594276 Tue, 05 May 2015 16:42:05 +0000 http://css-tricks.com/?p=199370#comment-1594276 In reply to Eric.

Yeah, I see those references, and I guess I am just being nit picky. :D

I personally love to feel reassured that there are ways to avoid fallbacks if you have or can establish some sort of control over what browsers will view the site/app. Thanks again for the article!

]]>
By: Shawn Brown https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#comment-1594273 Tue, 05 May 2015 15:17:14 +0000 http://css-tricks.com/?p=199370#comment-1594273 In reply to Shawn Brown.

I apologize Amelia. Thank you Ma’am!

]]>
By: Brad Bice https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#comment-1594271 Tue, 05 May 2015 14:29:06 +0000 http://css-tricks.com/?p=199370#comment-1594271 In reply to Eric.

Another concern would be for users with images turned off (or, somehow, just SVG turned off) and making sure your site is still usable without the image. This is definitely a larger concern that should be addressed on a holistic level (and not just concerning images,) but these techniques may help in that area.

]]>
By: Vedran https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#comment-1594262 Tue, 05 May 2015 09:45:38 +0000 http://css-tricks.com/?p=199370#comment-1594262 Great article. I was just searching for “best” solution for svg fallback. Now I have a few alternatives as well. :) I love you guys.

]]>
By: Flunch https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#comment-1594259 Tue, 05 May 2015 08:27:03 +0000 http://css-tricks.com/?p=199370#comment-1594259 Hi,

If you
– don’t mind detecting “Browsers” instead of “features”
– Are using SVGs in tags

Then one very simple way is to use an .htaccess (or whatever floats your web) to redirect old browsers to the png version of your svg.

RewriteCond %{HTTP_USER_AGENT} "Android 1" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "Android 2" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "Android 3" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "MSIE [6-8]"
RewriteRule ^(.*).(svg)$ /$1.png [L]
]]>
By: Tigt https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#comment-1594253 Tue, 05 May 2015 01:37:17 +0000 http://css-tricks.com/?p=199370#comment-1594253 In reply to Tigt.

Double-checking the spec, it may be possible that screen-readers don’t announce <desc> elements that aren’t at the top of their parent element. I guess I’d have to test it!

]]>
By: Tigt https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#comment-1594252 Tue, 05 May 2015 01:33:47 +0000 http://css-tricks.com/?p=199370#comment-1594252 In reply to Tigt.

Yeah, the only compatibility info I could find was on MDN, but it seems pretty safe from there.

]]>
By: Amelia Bellamy-Royds https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#comment-1594251 Tue, 05 May 2015 01:29:09 +0000 http://css-tricks.com/?p=199370#comment-1594251 In reply to Tigt.

Can you explain the “being hostile to screen readers”? Were you having problems when using simple marked-up text (like in the example), or were you trying to embed complex content such as images?

]]>