我正在尝试在网站上嵌入 SVG 图像。我将使用 Modernizr 来检测 SVG 兼容性。 我看过 SVGWeb 和其他的，我现在不想使用它们。
我想做的是：
如果浏览器支持 SVG，则在 HTML5 页面中嵌入 SVG 图像。
如果没有，请使用 <img> 标签放置一个 PNG 替代品。
我希望这张图片成为 HTML 的一部分，而不是通过 CSS 的 background-image 属性添加它。
我还希望 Google 可以轻松读取图像及其元数据（alt 用于 img/desc 用于 svg），因此我不确定是否应该通过 JQuery 来执行此操作。
对最好的方法有什么建议吗？
谢谢。
【问题讨论】：
标签： svg
您是否考虑过使用SVG images in the <img> element？
如果您在服务器端执行此操作，那么有很多方法可以执行此操作，包括 content negotiation，它可能有效，也可能无效。
或者，您可以压缩所有图像的 src 属性并使用以下内容重写它们：
var imgs = document.getElementsByTagName('img');
var endsWithDotSvg = /.*\.svg$/
var i=0;
var l = imgs.length;
for (; i != l; ++i) {
if (imgs[i].src.match(endsWithDotSvg)) {
imgs[i].src = imgs[i].src.slice(0, -3) + "png";
}
}
【讨论】：
如果您不想在客户端使用 JavaScript，那么您最终必然会在服务器端使用 JavaScript。我可以想象的是，您可以检查访问者使用哪个浏览器（和版本）的 UserAgent，并相应地显示 SVG 或 PNG。也许这是一个选择？
编辑： 好的，看来您仍在考虑使用 JavaScript。 就个人而言，我会选择始终渲染指向 PNG 的 img-tag。然后，当文档准备好后，我会快速浏览所有这些 img-tags 并将它们替换为指向 SVG 的 embed-tag。
jQuery-示例：
if(Modernizr.svg) // Wohooo SVG words: let's party
{
$('img.replace').each(function() { // Loop through all PNGs that need replacing
// A unique identifier for images is saved in the id-attribute: use it to append the SVG version
$(this).append('<embed src="' + $(this).attr('id') + '.svg" type="image/svg+xml" />');
$(this).remove(); // Clean-up the unused img-tag
});
}
使用上面的例子，像
这样的 img-tag <img class="replace" id="123456" src="123456.png"/>
将被替换为
<embed src="123456.svg" type="image/svg+xml" />
也许这对你有用？ ;-)
【讨论】：
<script> if (Modernizr.svg) { //write an embed tag with an SVG in it } else { //write an img tag with里面有一个PNG } </script>