SVG/PNG 扩展开关答案

【问题标题】：SVG/PNG extension switchSVG/PNG 扩展开关
【发布时间】：2012-10-02 13:09:13
【问题描述】：

有没有办法在我的网站上使用 SVG 图像，如果浏览器/设备不支持它，请将扩展名切换为 png？有没有更好的方法来做到这一点？

注意：我使用的是 <img> 标签和 Modernizr。

这是我动态吐出图像的代码。

<?php $attachments = attachments_get_attachments(); ?>
        <?php if( function_exists( 'attachments_get_attachments' ) ) {
        $attachments = attachments_get_attachments();
        $total_attachments = count( $attachments ); if( $total_attachments ) : ?><?php for( $i=0; $i<$total_attachments; $i++ ) : ?>
<img src="<?php echo $attachments[$i]['location']; ?>" alt="<?php echo $attachments[$i]['title']; ?>" class="full" />
<?php endfor; ?><?php endif; ?><?php } ?>

输出以下内容： <img src="http://mysiteurl.net/image.png" alt="Image Title" class="full wp-image-287" />

【问题讨论】：

标签： php javascript svg png modernizr

【解决方案1】：

这是有效的，只过滤 svg 文件

<script type="text/javascript">
jQuery( document ).ready(function() {
    if(!Modernizr.svg){
      jQuery("img").each(function(){
        var src = this.src;
        if( src.match(/svg$/) ){
            // Replace "svg" by "png"
            this.src = src.slice(0,-3) + 'png'
        }           
      });
    }
});
</script>

【讨论】：

【解决方案2】：

我想您可以测试是否支持svg，如果不支持则遍历您的图像标签并将它们的src 路径设置为.png。此示例尚未经过测试，但它可能是朝着正确方向迈出的一步。

if(!Modernizr.svg){
  var images = document.getElementsByTagName("img");
  for(var i = 0; i < images.length; i++){
    var src = images[i].src.split(".");
    images[i].src = src[0] + ".png";
  }
}

如果 jQuery 是一个选项，那么这样的事情可能是可能的：

if(!Modernizr.svg){
  $("img").each(function(){
    var src = this.src.split(".");
    this.src = src[0] + ".png";
  });
}

编辑

您也可以考虑查看Modernizr-Server。这样，您可以在循环浏览图像并附加适当的扩展名时测试 svg。

if ($modernizr->svg) {
    ...
} elseif ($modernizr->canvas) {
    ...
}

【讨论】：

jQuery 是一个选项，但是，我更喜欢一种快速加载图像的方法。
您介意分享一些关于您如何在imgs 中加载的代码吗？主要是，它们是在页面加载时动态添加到 DOM 还是静态 html？
我正在使用 PHP 来加载图像。我在上面编辑了我的代码。
@ChristopherBurton，我已经更新了我的答案。为了在服务器端进行测试，请使用 Modernizr-Server。除此之外，尝试执行此客户端将需要 javascript 等到 DOM 准备就绪，然后循环遍历每个 svg 图像并将它们更改为 png
谢谢，蔡斯。我会查看所有这些选项，并会尽快接受。

【解决方案3】：

另一种方法是对 SVG 使用 CSS-ony 解决方案，如本答案所述： https://stackoverflow.com/a/13575068/418711

【讨论】：