我应该使用<img>, <object>,或<embed>加载SVG文件到页面的方式类似于加载jpg, gif或png?
每一个代码是什么,以确保它工作得尽可能好?(在我的研究中,我看到了包括mimetype或指向备用SVG渲染器的参考,但没有看到一个良好的艺术状态参考)。
假设我正在使用Modernizr检查SVG支持,并退回到不支持SVG的浏览器(可能使用普通的<img>标记进行替换)。
我应该使用<img>, <object>,或<embed>加载SVG文件到页面的方式类似于加载jpg, gif或png?
每一个代码是什么,以确保它工作得尽可能好?(在我的研究中,我看到了包括mimetype或指向备用SVG渲染器的参考,但没有看到一个良好的艺术状态参考)。
假设我正在使用Modernizr检查SVG支持,并退回到不支持SVG的浏览器(可能使用普通的<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 > <人力资源>
其他回答
如果你使用<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 viewBox="" width="" height="">
<path fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>
最好的选择是在不同的设备上使用SVG图像:)
<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">
找到了一个纯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。
更多的细节和测试过程可以在我的博客中找到。
使用srcset
目前大多数浏览器都支持srcset属性,它允许为不同的用户指定不同的图像。例如,您可以使用它的1x和2x像素密度,浏览器将选择正确的文件。
在这种情况下,如果您在srcset中指定了SVG,而浏览器不支持它,它将退回到src。
<img src="logo.png" srcset="logo.svg" alt="My logo">
与其他解决方案相比,这种方法有几个优点:
它不依赖于任何奇怪的黑客或脚本 它很简单 您仍然可以包含alt文本 支持srcset的浏览器应该知道如何处理它,以便它只下载所需的文件。