我是否使用<img>， <object>，或<embed>用于SVG文件?

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

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

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

当前回答

尽管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>也是如此。

2021-04-24 05:05:02

其他回答

如果你需要你的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的合著者

2018-09-03 15:18:34

对我来说，一个简单的替代方法是将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 > <人力资源>

2020-10-18 19:45:44

根据个人经验，我建议在image tag中通过src加载svg文件，如果一个页面上有很多svg图标或动态追加，会变慢，性能变差

<img src="./file.svg"/> is better performance than 

<div><svg>.....</svg></div>

但是如果你想在hover中指定CSS样式，你必须使用embed

2021-06-30 07:18:28

我可以推荐SVG Primer(由W3C发布)，它涵盖了这个主题:http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

如果你使用<object>，那么你可以免费得到光栅回退*:

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

*)好吧，不是完全免费的，因为有些浏览器下载这两种资源，看看Larry下面的建议如何解决这个问题。

2014年更新:

If you want a non-interactive svg, use <img> with script fallbacks to png version (for older IE and android < 3). One clean and simple way to do that: <img src="your.svg" onerror="this.src='your.png'">. This will behave much like a GIF image, and if your browser supports declarative animations (SMIL) then those will play. If you want an interactive svg, use either <iframe> or <object>. If you need to provide older browsers the ability to use an svg plugin, then use <embed>. For svg in css background-image and similar properties, modernizr is one choice for switching to fallback images, another is depending on multiple backgrounds to do it automatically: div { background-image: url(fallback.png); background-image: url(your.svg), none; } Note: the multiple backgrounds strategy doesn't work on Android 2.3 because it supports multiple backgrounds but not svg.

另外一个不错的阅读是这篇关于svg后退的博文。

2010-12-19 12:38:47

如果你使用<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中无法精确地调整大小——如果你有大量从纯文本到粗体或斜体的过渡，在过渡点可能会有少量额外的空间或缺失的空间。更多信息请看我的回答。

2014-11-25 13:41:20

我是否使用<img>， <object>，或<embed>用于SVG文件?

推荐文章

最新文章

标签