Question

我正在尝试在网站上嵌入SVG图像。我将使用Modernizr来检测SVG兼容性。我看过SVGWeb和其他人，现在我真的不想使用它们。

我想做的是：如果浏览器支持SVG，则在HTML5页面中嵌入SVG图像。如果没有，请使用<img>标记放置PNG替代。

我希望此图片成为HTML的一部分，而不是通过CSS的background-image属性添加它。

我也希望Google可以轻松阅读图片及其元数据（sgg的img / alt desc），因此，我不确定是否应该通过JQuery执行此操作。< / p>

有关最佳方法的任何建议吗？

感谢。

Answer 1

您是否考虑过使用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";
    }
}

Answer 2

如果您不想在客户端使用JavaScript，那么您最终必然会在服务器端执行此操作。我能想象的是，您可以检查UserAgent访问者使用的浏览器（和版本），并相应地显示SVG或PNG。也许这是一个选择？

编辑：好的，似乎你还在考虑使用JavaScript。就个人而言，我会选择始终将img-tag指向PNG。然后，当文档准备就绪时，我会查看所有这些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" />

也许这适合你？ ; - ）

如何在没有JavaScript的情况下基于支持嵌入SVG / PNG？

2 个答案: