我应该使用<img>, <object>,或<embed>加载SVG文件到页面的方式类似于加载jpg, gif或png?

每一个代码是什么,以确保它工作得尽可能好?(在我的研究中,我看到了包括mimetype或指向备用SVG渲染器的参考,但没有看到一个良好的艺术状态参考)。

假设我正在使用Modernizr检查SVG支持,并退回到不支持SVG的浏览器(可能使用普通的<img>标记进行替换)。


当前回答

使用srcset

目前大多数浏览器都支持srcset属性,它允许为不同的用户指定不同的图像。例如,您可以使用它的1x和2x像素密度,浏览器将选择正确的文件。

在这种情况下,如果您在srcset中指定了SVG,而浏览器不支持它,它将退回到src。

<img src="logo.png" srcset="logo.svg" alt="My logo">

与其他解决方案相比,这种方法有几个优点:

它不依赖于任何奇怪的黑客或脚本 它很简单 您仍然可以包含alt文本 支持srcset的浏览器应该知道如何处理它,以便它只下载所需的文件。

其他回答

使用srcset

目前大多数浏览器都支持srcset属性,它允许为不同的用户指定不同的图像。例如,您可以使用它的1x和2x像素密度,浏览器将选择正确的文件。

在这种情况下,如果您在srcset中指定了SVG,而浏览器不支持它,它将退回到src。

<img src="logo.png" srcset="logo.svg" alt="My logo">

与其他解决方案相比,这种方法有几个优点:

它不依赖于任何奇怪的黑客或脚本 它很简单 您仍然可以包含alt文本 支持srcset的浏览器应该知道如何处理它,以便它只下载所需的文件。

从IE9和以上版本,你可以在普通的IMG标签中使用SVG ..

https://caniuse.com/svg-img

<img src="/static/image.svg">

我建议使用的组合

<svg viewBox="" width="" height="">
<path fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>

以下是我所能找到的将svg插入HTML模板的所有方法的总结,以及它们的区别和主要优缺点:

(((1)))

/* in CSS */
background-image: url(happy.svg);

这种方式既不允许JS交互,也不允许CSS本身 可以对SVG部分进行更细粒度的控制。

(((2)))

<img src="happy.svg" />

就像(((1)))一样,既不允许JS交互,也不允许CSS本身对svg部分有更细粒度的控制。

方法(((1)))和(((2)))只适用于需要静态svg。

注意:当使用<img>标记时,如果您在srcset属性中指定了SVG,而浏览器不支持它,它将自动回退到src属性。

<img src="logo.png" srcset="logo.svg" alt="my logo">

(((3)))

<div>
 <!-- Paste the SVG code directly here. -->
 <svg>...</svg>
 <!-- AKA an inline svg -->
 <!-- would be the same if is created and appended using JavaScript. -->
</div>

此方法没有(((1)))和(((2))中提到的任何警告,但是,此方法使模板代码混乱,并且svg是复制粘贴的,因此它们不会在自己的单独文件中。

((4))

<object data="happy.svg" width="300" height="300"></object>

OR:

<object data="your.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

使用这种方法,SVG将不能使用外部CSS访问,但可以使用JavaScript访问。

((5))

使用iconfu/svg-inject将svg保存在它们自己的单独文件中(以使模板代码更加清晰),现在使用<img>标记添加svg, svg-inject将自动将它们转换为内联svg,因此CSS和JavaScript都可以访问它们。

注1:如果动态添加imgs(使用javascript),此方法也有效。

注2:使用此方法添加的svg也会像图像一样被浏览器缓存。

((6))

使用单个SVG精灵文件,然后使用<use>标记插入它们。这种方式也非常灵活,具有与(((5))相同的效果。这个视频中展示了这个方法(以及其他一些方法)。

((7))

(React特有的方式)将它们转换为React组件(或编写一个加载它们的组件)。

((8))

<embed src="happy.svg" />

根据MDN的说法,大多数现代浏览器已经弃用并删除了对浏览器插件的支持。这意味着如果您希望站点在普通用户的浏览器上可操作,那么依赖<embed>通常是不明智的。

如果你需要你的svg是完全可样式的CSS,他们必须内联在DOM中。这可以通过SVG注入来实现,它在页面加载后使用Javascript将HTML元素(通常是<img>元素)替换为SVG文件的内容。

下面是一个使用SVGInject的最小示例:

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

图像加载后,onload="SVGInject(this)将触发注入,<img>元素将被src属性中提供的文件内容所取代。这适用于所有支持SVG的浏览器。

声明:我是SVGInject的合著者