Php SVG/PNG扩展开关

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

注意：我使用的是

“alt=”“class=“full”/

产出如下：

---

我想您可以测试是否支持

svg

，如果不支持，则可以循环查看图像标记并将其src路径设置为

.png

。此示例尚未测试，但可能是朝着正确方向迈出的一步

<?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 } ?>

编辑

<>你也可以考虑查看。这样，你可以在循环图像的同时测试SVG并追加适当的扩展。

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

---

另一种方法是使用CSS ony解决方案，用于SVG和回退，如本回答中所述：

---

这正在工作，只过滤svg文件

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

jQuery（文档）.ready（函数（）{
if（！modernizer.svg）{
jQuery（“img”）。每个（函数（）{
var src=this.src；
if（src.match（/svg$/）{
//将“svg”替换为“png”
this.src=src.slice（0，-3）+'png'
}           
});
}
});

jQuery是一个选项，但是，我更喜欢一种快速加载图像的方法。你介意分享一些关于如何在

img

s中加载的代码吗？主要是，它们是在页面加载时动态添加到DOM还是静态html？我正在使用PHP加载图像。我编辑了上面的代码。@ChristopherBurton，我已经更新了我的答案。为了在服务器端进行测试，请使用Modernizr服务器。除此之外，尝试在客户端进行测试需要javascript等待DOM就绪，然后循环遍历每个

svg

图像，并将其更改为

png

谢谢，Chase。我将查看所有这些选项，并将接受我不会尽快的。

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

<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>