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

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

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


当前回答

使用<svg>标记更容易,因为您的代码将运行得更快,并且您直接使用svg。要获得只有svg标记,复制svg文件不带xml标记。结果会是这样的:

<svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 16 16" width="64px" height="64px"><path d="M 4.5 2 C 3.675781 2 3 2.675781 3 3.5 L 3 14.484375 L 8 10.820313 L 13 14.484375 L 13 3.5 C 13 2.675781 12.324219 2 11.5 2 Z M 4.5 3 L 11.5 3 C 11.78125 3 12 3.21875 12 3.5 L 12 12.515625 L 8 9.578125 L 4 12.515625 L 4 3.5 C 4 3.21875 4.21875 3 4.5 3 Z"/></svg>

其他回答

找到了一个纯CSS解决方案,没有双重图像下载。它没有我想要的那么漂亮,但很好用。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <style type="text/css">
     .nicolas_cage {
         background: url('nicolas_cage.jpg');
         width: 20px;
         height: 15px;
     }
     .fallback {
     }
    </style>
  </head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <style>
    <![CDATA[ 
        .fallback { background: none; background-image: none; display: none; }
    ]]>
    </style>
</svg>

<!-- inline svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <switch>
     <circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" />
     <foreignObject>
         <div class="nicolas_cage fallback"></div>
     </foreignObject>
  </switch>
</svg>
<hr/>
<!-- external svg -->
    <object type="image/svg+xml" data="circle_orange.svg">
        <div class="nicolas_cage fallback"></div>
    </object>
</body>
</html>

其思想是插入具有回退样式的特殊SVG。

更多的细节和测试过程可以在我的博客中找到。

如果你使用<img>标记,那么基于webkit的浏览器将不会显示嵌入的位图图像。

对于任何一种高级SVG使用,包括SVG内联提供了迄今为止最大的灵活性。

Internet Explorer和Edge将正确地调整SVG的大小,但您必须指定高度和宽度。

你可以在svg中添加onclick, onmouseover等,到svg中的任何形状:onmouseover="top.myfunction(evt);"

你也可以在SVG中使用web字体,将它们包含在你的常规样式表中。

注意:如果您从Illustrator导出SVG, web字体名称将是错误的。您可以在CSS中纠正这一点,并避免在SVG中搞砸。例如,Illustrator给了Arial错误的名称,你可以这样修复它:

@font-face {    
    font-family: 'ArialMT';    
    src:    
        local('Arial'),    
        local('Arial MT'),    
        local('Arial Regular');    
    font-weight: normal;    
    font-style: normal;    
}

所有这些都适用于2013年以来发布的任何浏览器。

例如,请参见ozake.com。除了联系表单,整个站点都是由SVG组成的。

警告:Web字体在Safari中无法精确地调整大小——如果你有大量从纯文本到粗体或斜体的过渡,在过渡点可能会有少量额外的空间或缺失的空间。更多信息请看我的回答。

以下是我所能找到的将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>通常是不明智的。

<object>和<embed>有一个有趣的属性:它们可以从外部文档获得对SVG文档的引用(将同源策略考虑在内)。然后可以使用引用来动画SVG,更改其样式表等。

鉴于

<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>

你可以这样做

document.getElementById("svg1").addEventListener("load", function() {
    var doc = this.getSVGDocument();
    var rect = doc.querySelector("rect"); // suppose our image contains a <rect>
    rect.setAttribute("fill", "green");
});

尽管w3schools不推荐<embed>标签,它是唯一让我的svg混合模式和蒙版在Chrome中工作的东西:

<embed src="logo.svg" style="width:100%; height:180px" type="image/svg+xml" />

而Firefox则很好

<svg style="width:100%">
    <use xlink:href="logo.svg#logo"></use>
</svg>

Chrome did not render the gradient: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="146" version="1.1"> <title>digicraft punchcard logo</title> <defs> <linearGradient id="punchcard-gradient" x1="100%" y1="50%" x2="0%" y2="50%"> <stop offset="0%" style="stop-color:rgb(128,128,128);stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(69,69,69);stop-opacity:1" /> </linearGradient> <pattern id="punchcard-pattern-v" x="0" y="0" width="21" height="21" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="20" height="20" fill="skyblue" onClick="mClick(this)" /> </pattern> <pattern id="punchcard-pattern-h" x="0" y="0" width="21" height="145" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="21" height="20" fill="skyblue" /> <rect x="0" y="20" width="20" height="84" fill="url(#punchcard-pattern-v)" /> <rect x="0" y="105" width="20" height="20" fill="skyblue" /> <rect x="0" y="126" width="21" height="20" fill="skyblue" /> </pattern> <mask id="punchcard-mask" width="10" height="100%"> <rect width="100%" height="146" fill="url(#punchcard-pattern-h)" /> </mask> </defs> <rect x="0" y="0" width="100%" height="159" fill="url(#punchcard-gradient)" mask="url(#punchcard-mask)" /> </svg>

两个浏览器中的<object>和<img>也是如此。