svg矢量浏览器_在不受支持的浏览器中添加可缩放矢量图形（SVG）

在本系列的较早文章中，我们提到了SVG与旧浏览器的陷阱，并使用Raphael.js将图形作为替代解决方案。 在这篇文章中，我们将进一步研究这个问题。

这个想法很简单，我们仍将使用SVG元素作为在网页上提供图形的主要方式，但是与此同时，我们还将提供一个后备功能， 以便仍可以在不受支持的浏览器中呈现该功能 。

当然，我们可以采取许多方法，但是我们只会研究两种我认为是更好的通用解决方案。 因此，让我们看看如何做到这一点。

使用对象元素

除了直接将其放入HTML文档之外，还有几种嵌入SVG的方法。 例如，如果将图形存储在.svg文件中，则可以使用<object>元素。

<object data='images/apple.svg'></object>

为了演示，我们在网页上添加了带有SVG的Apple徽标。 但是，不受支持的浏览器将保持空白。 为了解决这个问题，我们可以提供一个Bitmap图形 ，如下所示；

<object data='images/apple.svg'>
    <img src='images/apple.png'/>
</object>

这样，受支持的浏览器仍将使用.svg ，而不受支持的浏览器将带有Bitmap图形 。 我们在Apple徽标下方添加了“ png”标记，以跟踪要交付的图形。

但是，正如我们在另一篇文章中提到的， 位图图形不像SVG那样灵活和可扩展 。 因此，让我们看一下另一种解决方案。

使用Modernizr

我们可以使用的另一种方法是使用Modernizr 。 对于那些不熟悉此JavaScript库的人来说，请放心，我们将专门介绍它。 现在，只需跟上我们。

首先，让我们准备一些必需JavaScript库， Modernizr.js和Raphael.js 。 然后，我们还需要使用此工具ReadySetRaphael.js将.svg文件转换为Raphael支持的格式，并将输出保存在单独的.js文件中； 让我们将其命名为svg.js

在HTML文档中包含Modernzr.js，如下所示：

<script type="text/javascript" src="scripts/modernizr.js"></script>

对于其他两个文件raphael.js和svg.js ， 只有在不受支持的浏览器中查看它时 ，我们才会有条件地加载它。

使用Modernizr，我们可以检测浏览器的功能，在这种情况下，我们将检测浏览器是否能够呈现SVG，如果不能，我们将提供脚本：

if (!Modernizr.inlinesvg) {
document.write(
	'<script type="text/javascript" src="scripts/raphael.js"><\/script>', 
	'<script type="text/javascript" src="scripts/svg.js"><\/script>'
);
}

现在，我们只需要添加HTML标记，如下所示；

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="280px" viewBox="0 0 500 280" enable-background="new 0 0 500 280" xml:space="preserve">
<path fill="#333333" d="M296.908,120.622c-8.77,6.201-13.158,13.676-13.158,22.41c0,10.458,5.425,18.479,16.262,24.076
	c-2.908,8.435-7.122,15.764-12.65,22.009c-5.516,6.243-10.553,9.368-15.11,9.368c-2.147,0-5.075-0.718-8.794-2.133l-1.782-0.687
	c-3.646-1.416-6.854-2.133-9.656-2.133c-2.641,0-5.535,0.555-8.679,1.665l-2.237,0.807l-2.818,1.154
	c-2.218,0.884-4.468,1.326-6.725,1.326c-5.328,0-11.208-4.387-17.642-13.161c-9.273-12.567-13.905-26.264-13.905-41.085
	c0-10.538,2.886-19.02,8.678-25.46c5.78-6.432,13.446-9.658,22.979-9.658c3.566,0,6.897,0.653,10,1.958l2.129,0.865l2.238,0.92
	c1.992,0.84,3.601,1.264,4.825,1.264c1.569,0,3.316-0.364,5.231-1.094l2.929-1.151l2.19-0.804c3.483-1.262,7.34-1.896,11.555-1.896
	C282.777,109.183,290.814,112.996,296.908,120.622z M273.238,82.575c0.108,1.344,0.167,2.378,0.167,3.102
	c0,6.628-2.412,12.442-7.237,17.443c-4.823,5-10.438,7.494-16.837,7.494c-0.189-1.493-0.29-2.563-0.29-3.212
	c0-5.635,2.239-10.924,6.726-15.864c4.482-4.939,9.671-7.838,15.575-8.678C271.754,82.787,272.395,82.696,273.238,82.575z"/>
</svg>

<div id="applelogo"></div>

在上面的代码片段中，我们将SVG直接添加到HTML文档中，并添加了一个div来容纳Raphael代码。 为了再次注意到可以轻松交付的图形，我们还在SVG元素内的徽标下方添加了一些文本。

<text x="210" y="250">This is SVG</text>

因此，这就是我们将在浏览器中获得的东西。

为了更清楚地看到它，您可以从下面的链接查看演示，并确保在不同的浏览器中进行尝试。 我们建议使用IE8 / 7和Google Chrome 。

• 观看演示
• 下载源

最终思想

好了，这些只是几个例子，在某些情况下，它们可能没有那么有效。 但总的来说，这些应该有助于解决在不受支持的浏览器中提供SVG的问题。 最后，如果您要添加一些我们在本文中错过的内容，请随时在下面的评论框中分享。

感谢您阅读这篇文章，我们希望您喜欢它。

更多

您可能还会在以下帖子中感兴趣：

• 可缩放矢量图形–基本
• 可缩放矢量图形– CSS样式
• 可缩放矢量图形–处理文本
• 可缩放矢量图形–动画

翻译自: https://www.hongkiat.com/blog/scalable-vector-graphic-browsers/