我应该使用<img>， <object>，或<embed>加载SVG文件到页面的方式类似于加载jpg, gif或png?
每一个代码是什么，以确保它工作得尽可能好?(在我的研究中，我看到了包括mimetype或指向备用SVG渲染器的参考，但没有看到一个良好的艺术状态参考)。
假设我正在使用Modernizr检查SVG支持，并退回到不支持SVG的浏览器(可能使用普通的<img>标记进行替换)。
当前回答
<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");
});
其他回答
您可以插入SVG间接使用<img> HTML标签，这是可能的StackOverflow如下所述:
我的电脑上有以下SVG文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="350" viewBox="0 0 350 350">
<title>SVG 3 Circles Intersection </title>
<circle cx="110" cy="110" r="100"
stroke="red"
stroke-width="3"
fill="none"
/>
<text x="110" y="110"
text-anchor="middle"
stroke="red"
stroke-width="1px"
> Label
</text>
<circle cx="240" cy="110" r="100"
stroke="blue"
stroke-width="3"
fill="none"
/>
<text x="240" y="110"
text-anchor="middle"
stroke="blue"
stroke-width="1px"
> Ticket
</text>
<circle cx="170" cy="240" r="100"
stroke="green"
stroke-width="3"
fill="none"
/>
<text x="170" y="240"
text-anchor="middle"
stroke="green"
stroke-width="1px"
> Vecto
</text>
</svg>
我已经把这张照片上传到https://svgur.com
上传终止后，我获得了以下URL:
https://svgshare.com/i/kyc.svg
然后我手动(不使用图像图标)添加以下html标签
<img src='https://svgshare.com/i/kyc.svg' title='Intersection of 3 Circles'/>
结果就在下面
使用数据:形象
对于有疑问的用户，可以看到我在插入SVG图像的StackOverflow上编辑以下答案所做的工作
备注-1:SVG文件必须包含<?xml?>元素。在开始时，我只是简单地创建了一个SVG文件，直接以< SVG >标记开始，但什么都不起作用!
备注-2:在开始时，我已经尝试使用编辑工具栏的image图标插入图像。我粘贴我的SVG文件的URL，但StackOverflow不接受这个方法。<img>标签需要手动添加。
我希望这个答案可以帮助其他用户。
对我来说，一个简单的替代方法是将svg代码插入到div中。这个简单的例子使用javascript来操作div innerHTML。
SVG = '< SVG height=150>'; Svg += '<rect height=100% fill=green /><circle cx=150 cy=75 r=60 fill=yellow />'; svg+= '<text x=150 y=95 font-size=60 text-anchor=中间填充=红色>IIIIIII</text></svg>'; document.all.d1.innerHTML = svg; < span style=" font - family:宋体;" > < / div > <人力资源>
找到了一个纯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。
更多的细节和测试过程可以在我的博客中找到。
在大多数情况下，我建议使用<object>标记来显示SVG图像。这感觉有点不自然，但如果你想提供动态效果，这是最可靠的方法。
对于没有交互的图像，可以使用<img>标记或CSS背景。
内联svg或iframe是一些项目的可能选项，但最好避免<embed>
但如果你想玩SVG之类的东西
改变颜色 调整路径 旋转svg
选择嵌入的那个
<svg>
<g>
<path> </path>
</g>
</svg>
使用<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>
