svg Using SVG

原地址:https://css-tricks.com/using-svg/

原作者:克里斯·科伊尔

chenmf翻译

SVG是矢量图形的一种图像格式，即可伸缩矢量图形，可以在Adobe Illustrator中生成。在Web上使用SVG很简单，但是有些事情要知道。

为什么要用SVG

压缩后文件体积小可以无损伸缩到任意尺寸（除非尺寸特别小）在retina屏幕上可以完美显示设计可控，比如交互和滤镜怎么生成SVG

可以在Adobe Illustrator中设计并获取SVG。这是一只站在椭圆上的奇怪的鸟:

请注意，画板只是贴在设计主题的边缘，画布的大小在SVG中与在巴布亚新几内亚和JPG一样重要。

然后可以直接在Adobe Illustrator中保存为SVG文件。

保存时，可以在对花对话框中选择SVG选项。完整的参考可以在SVG介绍中找到。这里选择SVG 1.1。

当您单击“确定”或“SVG代码...”时，将打开一个文本编辑器来显示SVG代码。

在<img>标签里面使用SVG在……里

如果把SVG保存成文件之后，可以直接在<img>标签里面使用。如果将SVG保存为文件，可以直接保存在

超文本标记语言

<img src="kiwi.svg "/>& ltimg src="kiwi.svg "/>

浏览器支持

在<img>标签里面使用需要有浏览器支持。基本上在IE8以上和Android 2.3以上都可以用。在……里

如果您想在不受支持的浏览器中使用它，您可以这样做:

使用Modernizr来替换<img>的src属性：jQuery

if(！Modernizr.svg) {

$(".logo img "/>$(".徽标img "/>

阅读更多:

SVG滤镜的更多应用SVG CSS属性大全（针对Opera）SVG滤镜效果演示（由Microsoft提供） 浏览器支持

浏览器支持内联SVG看这里，基本和以前一样。兼容的方法:

超文本标记语言

& ltsvg>。...& lt/svg>。

& ltdiv class="fallback">。& lt/div>。

半铸钢ˌ钢性铸铁(Cast Semi-Steel)

。后退{

显示:无；

/*确保它与SVG占用的空间大小相同*/

}

。没有svg。后退{

背景-图片:URL(logo . png)；

}

在……里

如果想通过CSS控制SVG，但又想避免内嵌SVG的缺点，可以使用

超文本标记语言

& ltobject type = " image/SVG+XML " data = " kiwi . SVG "/>

除了内联SVG之外，它可以用于上述所有场景。

个人推荐这个在线转换器，因为转换后可读性更强。

用在<img>里面 HTML

<img src="data:image/svg+xml;base64,[data]">& ltimg src= "数据:image/SVG+XML；base64，[数据]" >

CSS里面CSS

。徽标{

背景:url("数据:image/SVG+XML；base64，[数据]”；

}

<object>里面 HTML

& ltobject type = " image/SVG+XML " data = " data:image/SVG+XML；base64，[数据]" >

应急计划

& lt/object>。

如果SVG已经嵌套

数据URI格式

上面的例子都是base64编码的，但是不一定要转换成base64编码的。事实上，最好不要将SVG转换为base64编码。因为SVG的原始格式文本重复性高，g压缩效果更好。

超文本标记语言

& lt！-base64->；

数据:image/SVG+XML；base64，phn2 zyb4 bwxukz 0 iahr0 CDO VL...

& lt！- UTF-8，未编码->;

数据:image/SVG+XML；字符集=UTF-8。挽救（saving的简写）...>。...& lt/svg>。

& lt！- UTF-8，为兼容性优化编码->;

数据:image/SVG+XML；charset=UTF-8，%3Csvg xmlns='http://... '

& lt！-全网址编码ASCII->；

数据:image/SVG+XML；字符集=US-ASCII，%3Csvg%20xmlns%3D%22http%3A//...

自动化工具

grunticon

从CSS的角度来看，很容易使用，不用CSS精灵，为每个图标生成一个类。咕噜图标输入一个SVG/png文件的目录，然后以对应的三种格式输出CSS:SVG数据url、PNG数据URL和一个引用普通PNG图片的兼容CSS文件。

iconizr

一个PHP命令行工具，将SVG图片转换成CSS图标，支持图片优化和SASS输出。

相关参考 David Bushell: 一个前端SVG Hacking的更好方法 David Bushell: 使用不依赖于分辨率的SVG MDN on SVG SVG相关的浏览器支持 Peter Gasston: 使用Fragment Identifiers更好地实现SVG Sprites simuari: SVG栈 SVG.js - "轻量的第三方库，可以操作SVG，还可以实现动画" Emmet：一种直接从文本编辑器里面生成SVG data URI的方式 Compass Inline Data Helpers. Adobe: 给SVG添加样式 Andrew J. Baker: 驯服SVG 除了Illustrator的其他编辑工具: Inkscape, Sketch Krister Kari: 在移动端浏览器中使用SVG图片 Kyle Foster: 更优的SVG工作流