我是否将，或用于SVG文件？

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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

每个代码的代码是什么，以确保它尽可能地工作？ （我在我的研究中看到了包括mimetype或指向后备SVG渲染器的参考，并没有看到一个很好的最新参考）。

假设我正在检查与Modernizr的 SVG支持，并为非支持SVG的浏览器退回（可能用普通的<img>标签替换）。

#1楼

从IE9及以上版本，您可以在普通的IMG标签中使用SVG ..

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

#2楼

<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");
});

#3楼

找到一个纯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。

您可以在我的博客中找到更多详细信息和测试流程。

#4楼

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

如果您使用内联SVG，则Explorer将不会根据您的CSS 调整SVG的大小 。
Explorer将正确调整SVG的大小 ，但您必须同时指定高度和宽度。

我发现<object>标签是唯一适用于所有浏览器的标签。 我必须将宽度和高度（在SVG内）更改为100％才能使其正确调整大小。

你可以在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;    
}

所有这些都适用于过去两年发布的任何浏览器 。

结果在ozake.com （法语）。 整个网站由SVG组成，联系表格除外。

警告： Web字体未精确调整大小，如果您有大量从纯文本到粗体或斜体的过渡，则过渡点可能会有少量额外或缺少的空间。有关详细信息，请参阅此问题的答案。

#5楼

最好的选择是在不同的设备上使用SVG图像:)

<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3155532

标签

webkit

modernizr

我是否将<img>，<object>或<embed>用于SVG文件？

#1楼

#2楼

#3楼

#4楼

#5楼