SVG的正确使用姿式

时间 2019-12-09

标签 svg 正确使用繁體版

原文原文链接

原文地址: https://css-tricks.com/using-...
原文做者: Chris Coyierphp

翻译做者: https://github.com/chenmf6css

翻译出处：https://github.com/lightningm...html

SVG是一种向量图的图片格式，即可伸缩向量图（Scalable Vector Graphics），能够在Adobe Illustrator里面生成。在Web中使用SVG很简单，可是也有一些须要知道的事情。前端

为何用SVG

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

怎么生成SVG

能够在Adobe Illustrator里设计而且获得SVG。下面是一个站在椭圆上的奇异鸟：

留意到画板恰好贴着设计主体的边缘，画布的大小在SVG里面的重要性和在PNG和JPG里面是同样的。
而后能够直接在Adobe Illustrator里面保存成SVG文件。
html5

保存的时候，能够在duihua对话框里面选择SVG选项。完整的参考能够看SVG 介绍。这里选SVG 1.1就能够了。
css3

当点击'OK'或者'SVG Code...'的时候，就会打开文本编辑器，显示SVG的编码。
git

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

若是把SVG保存成文件以后，能够直接在<img>标签里面使用。github

HTML
<img src="kiwi.svg" alt="Kiwi standing on oval">

在Illustrator里面，画板的大小是612px ✕ 502px：

这正是图片在页面中的大小。能够选择<img>标签而且改变width和height来改变它的尺寸，就像PNG和JPG同样，好比：web

前往codepen查看
shell

浏览器支持

在<img>标签里面使用须要有浏览器支持。基本上在IE8以上和Android 2.3以上均可以用。
若是你想要在不支持的浏览器里面使用，能够这样：

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

jQuery

if (!Modernizr.svg) {
  $(".logo img").attr("src", "images/logo.png");
}

David Bushell提供了一个更简单的操做：

HTML

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

使用SVGeezy

在`background-image`里面使用SVG

能够在CSS的background-image里面使用SVG。

HTML

<a href="/" class="logo">
  Kiwi Corp
</a>

CSS

.logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

注意把background-size设置成咱们想要的尺寸，不然只能看到很大的原始SVG图片的左上角。这个尺寸设置成了跟原始尺寸保持宽高比，若是在不知道原始尺寸的状况下想要保持宽高比，能够把background-size设置成contain。

浏览器支持

在background-image里面使用SVG也须要看浏览器支持，基本上跟在<img>中使用是同样的。

若是要在不支持的浏览器里面使用：

用Modernizr把background-image替换成一个支持的格式。它会在不支持SVG的状况下加上一个no-svg的class，注意它也是只会发送一个图片的HTTP请求，不会发两个。

CSS

.main-header {
  background: url(logo.svg) no-repeat top left;
  background-size: contain;
}

.no-svg .main-header {
  background-image: url(logo.png);
}

另外一个更方便的方法，就是利用多个背景(background)，SVG的浏览器支持和多背景的很接近。

CSS

body {
  background: url(fallback.png);
  background-image: url(image.svg), none;
}

使用`<img>`和`background-image`的问题

在<img>和background-image里面使用SVG，无法利用CSS对SVG内部进行控制，因此接着看下面的两种其余方式。

使用内联(inline)SVG

在保存SVG的时候能够获取SVG的代码（也能够直接在文本编辑器里面打开SVG文件），直接把SVG的代码复制到HTML里面：

HTML

<body>

   <!-- 把SVG的代码复制到这里就能够显示图片了  -->

</body>

这样作的好处是把图片的内容直接写在文档里面，不须要额外发送HTTP请求获取，它和使用Data URI的好处是同样的，坏处也同样：致使文档变得臃肿，难以抓取和缓存。

若是使用后端语言的话，能够获取文件而且插入到文档：

PHP

<?php echo file_get_contents("kiwi.svg"); ?>

说到PHP，这里用file_get_contents()方法比较合适，而不是include()和include_once()，由于SVG有时候会以<?xml version="1.0" encoding="UTF-8"?>开头，致使PHP编译有问题。

先优化SVG

Adobe Illustrator里面导出的SVG可能不是最优的，会包含一些冗余信息，好比DOCTYPE和生成信息。咱们能够进一步优化，减小体积。Peter Collingridge给出了在线的SVG 优化，把须要优化的SVG上传，而后下载新的就能够了。
若是你是硬核玩家，能够直接用这个NodeJS工具本身优化。

用CSS来控制SVG

SVG的代码看起来是否是很像HTML？由于它们都是基于XML的。咱们的SVG里面包含了两个元素：<ellipse>和<path>，能够直接在代码里面给它们加上class，就像HTML元素同样：

SVG

<svg ...>
  <ellipse class="ground" .../>
  <path class="kiwi" .../>
</svg>

而后就能够用特殊的SVG CSS来控制这些元素了。SVG元素由着特殊的CSS属性，好比它没有background-color，而是用fill，可是也可使用一些其余的普通属性，好比:hover

CSS

.kiwi {
  fill: #94d31b; 
}
.kiwi:hover {
  fill: #ace63c; 
}

更厉害的是，SVG可使用滤镜(filter)，好比模糊滤镜。好比在SVG代码里面能够加上一个滤镜：

SVG

<svg ...>
  ...
  <filter id="pictureFilter" >
    <feGaussianBlur stdDeviation="5" />
  </filter> 
</svg>

而后能够在CSS里面使用这个滤镜

CSS

.ground:hover {
  filter: url(#pictureFilter);
}

下面是一个完整的例子：

前往codepen查看

更多阅读：

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

浏览器支持

内联SVG的浏览器支持看这里，基本和前面的同样。兼容的方法：

HTML

<svg> ... </svg>
<div class="fallback"></div>

CSS

.fallback { 
  display: none;
  /* Make sure it's the same size as the SVG takes up */
}
.no-svg .fallback { 
  background-image: url(logo.png); 
}

在`<object>`里面使用SVG

若是想要经过CSS控制SVG，可是又想避免内联SVG的弊端，能够在<object>里面使用SVG。

HTML

<object type="image/svg+xml" data="kiwi.svg" class="logo">
  Kiwi Logo <!-- fallback image in CSS -->
</object>

一样可使用Modernizr来兼容：

CSS

.no-svg .logo {
  width: 200px;
  height: 164px;
  background-image: url(kiwi.png);
}

这种状况下，若是想要用CSS控制SVG，就不能用外部的样式或者文档里面的<style>了，要用SVG文件内部的<style>:

SVG

<svg ...>
  <style>
    /* SVG specific fancy CSS styling here */
  </style>
  ...
</svg>

在`<object>` SVG里使用外部样式

能够在SVG文件开头的<svg>标签前面引入：

HTML

<?xml-stylesheet type="text/css" href="svg.css" ?>

若是把这个放在HTML里面，页面会崩溃无法渲染，若是把这个放在<img>或者background-image的SVG里面，页面不会崩溃，可是也不起做用。

在Data URL里面使用SVG

还能够把SVG转换成Data URL，转换以后可能不止原来的文件大小，可是它很方便，由于不须要额外产生网络请求。
Mobilefish.com上面有一个base64在线转换器，能够转成base64编码，可是这种方式不太推荐。记得去掉换行：

它能够在上述的全部场景里面使用，除了内联SVG。

我的比较推荐这个在线转换器，由于转换以后可读性比较强。

用在<img>里面

HTML

<img src="data:image/svg+xml;base64,[data]">

CSS里面

CSS

.logo {
  background: url("data:image/svg+xml;base64,[data]");
}

<object>里面

HTML

<object type="image/svg+xml" data="data:image/svg+xml;base64,[data]">
  fallback
</object>

若是，SVG在base64编码以前有嵌套的<style>，那么它依然能够在<object>里面起做用。

Data URI格式

上面的例子都是base64编码的，可是也不必定要转换成base64编码，实际上对于SVG最好不要转成base64编码。由于SVG的原始格式文本重复性比较高，gzip压缩效果更好。

HTML

<!-- base64 -->
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL...

<!-- UTF-8, not encoded -->
data:image/svg+xml;charset=UTF-8,<svg ...> ... </svg>

<!-- UTF-8, optimized encoding for compatibility -->
data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://...'

<!-- Fully URL encoded ASCII -->
data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//...

自动化工具

grunticon

从CSS的角度来看比较易用，为每一个icon生成一个class，不用CSS sprites。grunticon输入一个SVG/PNG文件的目录，而后输出对应的3种格式的CSS：SVG data url，png data url和一个引用普通的png图片的兼容性CSS文件。

iconizr

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

SVG的正确使用姿式

为何用SVG

怎么生成SVG

在<img>标签里面使用SVG

浏览器支持

在background-image里面使用SVG

浏览器支持

使用<img>和background-image的问题

使用内联(inline)SVG

先优化SVG

用CSS来控制SVG

浏览器支持

在<object>里面使用SVG

在<object> SVG里使用外部样式

在Data URL里面使用SVG

Data URI格式

自动化工具

相关参考

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

在`background-image`里面使用SVG

使用`<img>`和`background-image`的问题

在`<object>`里面使用SVG

在`<object>` SVG里使用外部样式