SVG用于带有PNG后备的浏览器中的图像 [英] SVG for images in browsers with PNG fallback

问题描述

我正在寻找在网站上使用公司标志的SVG版本。目前，所有主流浏览器（IE，Safari，Chrome，Firefox，Opera）都支持SVG，所以这看起来并不疯狂。然而，旧的浏览器仍然在那里，所以我需要回到PNG支持。

显而易见的解决方案是将SVG内容放入 object 标签像这样（原谅内联样式...）：

 < object data ='logo.svg'style ='height：3em'> 
< img src ='logo.png'style ='height：3em'/> 
< / object> 
  

理论上应该呈现对象 if可能的，或者渲染 img 。不过，Chrome并不喜欢这种方式，并且将高度样式应用于对象本身，而不是SVG，所以我最终得到了一个带有滚动条的类iframe框，一个巨大的标志。

另一种解决方案是将PNG用作 img 源，然后将其交换出来如果我认为我在支持SVG的浏览器上运行，那么在使用JavaScript呈现SVG源代码时。这并不理想，因为PNG仍然会被下载，而且我并不知情，我可以正确检测SVG支持。不幸的是，jQuery似乎没有SVG检测功能。

最后，由于我的网站是用ASP.NET部署的，我可以在用户代理字符串之前检查为页面提供服务，并根据我认为是否支持SVG来指定 img 源文件。但是，这也有潜在的问题，我不知道我可以做出正确的调用。

对图像执行SVG的首选方式是什么？

解决方案

这是一个老问题，但这里有另一个解决方案：

1. 下载一个 Modernizr 版本，将其缩减为仅测试SVG（假设这是您需要的唯一测试）。




2. 运行测试。如果它通过，放入SVG。如果失败，请放入位图。基本上：
   
   

     if（！Modernizr.svg）{
    $（＃logo）。css（background -image，url（fallback.png））; 
    
    $ / code $ 
    
    $ b $ p 

用于 Modernizr ，因为没有简单的本地方式来提供回退。




注意：浏览器不会同时加载（png和svg）版本。

为了记录：如果您必须支持IE 8或更低版本的Android或更旧版本的Android，那么您现在需要SVG回退的唯一原因。




I'm looking to use SVG versions of a company logo on a website. At present, all current versions of major browsers (IE, Safari, Chrome, Firefox, Opera) support SVG, so this doesn't seem crazy. However, old browsers are still out there, so I need to fall back to PNG support.

The obvious solution is to put the SVG content in an object tag like so (forgive the inline styles...):

<object data='logo.svg' style='height:3em' >
    <img src='logo.png' style='height:3em' />
</object>

Which in theory should render the object if possible, or else render the img. However, Chrome doesn't like this and applies the height style to the object itself but not the SVG, so I end up with a little iframe-like box with scrollbars, showing a huge logo.

Another solution would be to use the PNG as the img source, and then swap it out at render time with the SVG source with javascript, if I think I'm running on a SVG-capable browser. This is not ideal because the PNG will still get downloaded, and I'm not confidant I can properly detect SVG support. Unfortunately, jQuery doesn't seem to have a SVG-detect feature.

Finally, since my website is deployed with ASP.NET, I could inspect the user agent string before serving the page, and specify the img source depending on whether I think it will support SVG. But this also has the potential problem that I am not confidant I can make the right call.

What is the preferred way of doing SVG for images?

解决方案

This is an old question, but here is another solution:

1. Download a version of Modernizr that is trimmed down to just testing SVG (assuming that’s the only test you need).

2. Run the test. If it passes, put in the SVG. If it fails, put in the bitmap. Essentially:

   if (!Modernizr.svg) { 
       $("#logo").css("background-image", "url(fallback.png)"); 
   }
   

SVG is a perfect use case for Modernizr, because there is no simple native way to provide a fallback.

Note: The browser don't load both (png and svg) versions.

For the record: the only reason you would need a fallback for SVG these days if you have to support IE 8 and down, or older Android.

这篇关于SVG用于带有PNG后备的浏览器中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！