Aitter's Blog

SVG起手式

SVG 是可缩放矢量图形的缩写(Scalable Vector Graphics), 也就是矢量图。
是基于可扩展标记语言XML来描述二维矢量图形的一种图形格式,由W3C制定,是一个开放标准(SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准)

主要内容

  • SVG的优势
  • SVG文件格式
  • SVG基本概念
    • 显示比例与对齐方式
    • 相关元素
    • 标题与描述
  • SVG基本形状
    • 矩形 rect
    • 圆形 circle
    • 椭圆 ellipse
    • 直线 line
    • 折线 polyline
    • 多边形 polygon
    • 文本 text
    • 路径 path
  • SVG样式控制
  • SVG的引用方式
  • SVG兼容性

SVG的优势

  • SVG 可被非常多的工具读取和修改(比如记事本)
  • SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大
  • SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
  • SVG 是开放的标准,浏览器兼容性好
  • SVG 文件是纯粹的 XML

SVG文件

SVG文件必须以 .svg 后缀结尾

icon-left.svg 文件内容:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="8px" height="14px" viewBox="0 0 8 14" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
<title>back</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="back" sketch:type="MSArtboardGroup" fill="#4A4A4A">
<path d="M2.05455283,7.19050037 L6.95392196 ... 7.19050037 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>

SVG基本概念

  • standalone="no" 表示SVG文档会引用一个外部文件,这时就是DTD文件,DTD文件中申明了允许的SVG元素
  • viewprot: 物理窗口(舞台大小,画布大小),页面上固定的矩形区域
  • viewbox: 实物窗口(视区盒子)
  • preserveAspectRatio: 保留横纵比

SVG就像是我们的显示器屏幕,viewBox就是截屏工具选中的那个框框,最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示

SVG手册

SVG显示比例与对齐方式

preserveAspectRatio:<align> [<meetOrSlice>]
  • align: 定义viewbox在viewport中的对齐方式, xMin/xMid/xMax YMin/YMid/Ymax

  • meetOrSlice: 设置显示比例 meet / slice / none

    meet: 最小比例缩放
    slice: 最大比例缩放
    none: 不保持比例,铺满整个viewport

SVG相关元素

  • <svg> svg根元素,可以相互嵌套
  • <g> 分组标签,用于将SVG多个图形组合成一个图形
  • <def> 用于定义SVG中可重用的图形,def 中定义的图形不直接显示,使用 use 引用图形
  • <use> 用于引用或复用图形,可引用 <def><g><symbol> 中图形的id,来复用图形 <use xlink:href="#id">

标题与描述

可以使用 <title><desc> 标签来设置标题和描述,方便标记与SEO

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
<title>back</title>
<desc>Created with Sketch.</desc>
<path g="..."/>
</svg>

SVG基本形状

  • 矩形 rect
  • 圆形 circle
  • 椭圆 ellipse
  • 直线 line
  • 折线 polyline
  • 多边形 polygon
  • 文本 text
  • 路径 path

矩形 rect

SVG中 rect 用于绘制矩形、圆角矩形,含有6个基本属性用于控制矩形的形状及坐标

x 矩形左上角x位置, 默认值为 0
y 矩形左上角y位置, 默认值为 0
width 矩形的宽度
height 矩形的高度
rx 圆角x方向半径
ry 圆角y方向半径
  • 默认没有圆角,即 rx=ry=0
  • 如果 rxry 有一个为 0,则没有圆角效果
  • rxry 有一个有值,则 rx=ry
  • rx 最大为 width 的一半,ry 最大为 height 的一半
<rect
x="20"
y="20"
rx="5"
ry="5"
width="58"
height="58"
fill="#eee"
stroke="#C4C4C4"
stroke-width="2"
style="stroke-dasharray:8 5; stroke-dashoffset: 10"
>
</rect>

圆形 circle

svg的circle元素为用绘制圆形,含有3个基本属性用于控制其坐标及半径

  • cx、cy圆心的坐标,默认为(0,0)
  • r 圆的半径
<circle
cx="130"
cy="50"
r="30"
fill="#eee"
>
</circle>

椭圆 ellipse

SVG中 ellipse 元素是 circle 的扩展,含有4个基本属性用于控制椭圆的半径及圆心坐标

  • cxcy 圆心坐标,默认(0, 0)
  • rxry分别为椭圆的 x 轴半径及 y 轴半径
<ellipse
rx="40"
ry="30"
cx="220"
cy="50"
fill="#eee"
>
</ellipse>

直线

SVG中 line 元素用于绘制直线,两点为线,以起点与终点定义一条直线

  • x1、y1 起点坐标
  • x2、y2 终点坐标
<line
x1="280"
y1="50"
x2="380"
y2="50"
stroke="#ddd"
stroke-width="2"
>
</line>

折线 polyline

SVG的 polyline 元素用于绘制一条折线,连接多个点组成一条折线,points属性用于定义多个点的坐标位置

points中是一系列坐标的集合,坐标与坐标之间使用逗号隔开

<polyline
points="20 100, 60 140, 100 100, 140 140"
stroke="#888"
stroke-width="2"
fill="transparent"
>
</polyline>

多边形 polygon

SVG的 polygon 元素用于绘制多边形如三角形、五边形、星形等,polygonpolyline 很像,都是由一系列坐标连接而成,不同的是 polygon 最后一个点会自动连接到原点,形成一个闭环

<polygon
points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"
fill="#eee"/>

文本 text

SVG的 text 元素用于定义文本

路径上的文字

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>
</svg>

作为链接文本

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
<text x="0" y="15" fill="red">I love SVG</text>
</a>
</svg>

路径 path

SVG 中 path 功能最强大,不仅可以创建基本形状,还能创建更多复杂的图形,path可以就是所有上面基本形状的父类。
path 通过 d 属性来定义路径,d 是一系列命令的集合。

相关指令及含义

M(m) x y: 移动到起点位置
L(m) x y: 绘制直线至当前点
H(h) x : 水平绘制一条直线到x
V(v) y : 垂直绘制一条直线到y
A(a) rx ry x-axis-rotation large-arc sweep x y: 绘制一段圆弧
Q(q) cx cy x y : 绘制二次贝塞尔曲线
T(t) x y : 仅跟Q命令后面使用,绘制圆滑的二次贝塞尔曲线
C(c) cx1 cy1 cx2 cy2: 绘制三次贝塞尔曲线
S(s) cx2 cy2 x y: 仅跟C命令后面使用,绘制圆滑的三次贝塞尔曲线
Z: 闭合路径

path 绘制心电图

<path
class="beat-loader"
d="M100,240 l50,0 l10,-40 l10,80 l20,-120 l10,100 l10,-20 l30 0"
/>
.beat-loader{
fill: none;
stroke-width: 1;
stroke: #000;
stroke-dasharray: 0 10000;
animation: draw 2.5s linear infinite both;
}
@keyframes draw { to { stroke-dasharray: 1000 10000;} }

SVG样式控制

除了普通HTML标签样式可以使用之外,SVG也有自身独特的样式属性:

stroke 用于描述图形边框样式

stroke: 描边的颜色
stroke-opacity: 描边颜色的透明度
stroke-width: 描边的宽度
stroke-linecap: 描边的端点样式 butt 齐边/round 圆头 /square 尖角
stroke-dasharray: 虚线描边样式,数值为重复线段与间隔,如 10 20 线段长10 间隔为20
storke-dashoffset: 虚线偏移
stroke-linejoin: 线段之间的连接样式 miter 尖角 / round 圆弧 / bevel 齐边

fill 用于描述图形内部填充样式

fill: 填充颜色
fill-opacity: 填充颜色的透明度
fill-rule: 属性的取值可以是nonzero | evenodd | inherit

CODE PEN 示例

SVG的引用方式

IMG标签引用

<img src="left-arrow.svg" alt="left-arrow" height="32" width="32">

设置为样式背景

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

object标签引用

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

直接内嵌至HTML中

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
<path fill="#1A374D" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
<path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>

Symbol引用

参考 Iconfont ,先将定义好的SVG图形,使用JS的方式引用到页面,再使用 use 引用图形的名称ID使用图标。

引用JS

<script src="http://at.alicdn.com/t/font_1473319176_4914331.js">

通用样式

.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}

通过图标的ID引用图标

<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>

SVG 兼容性

SVG 兼容一览

  • iOS3 and iOS4 不支持SVG内嵌在HTML,但支持css background背景引用及 image 标签的 src 引用
  • IE8及IE8以下的ie浏览器以及Android 2.3及以下的默认浏览器不支持SVG

通过以上知识,可以建立我们对SVG图形的一个基本认知,SVG的相关知识远不止于次,后面我们将学习到更多SVG滤镜、SVG动画等更实用更复杂的应用,结合现有动画框架可以实现更加复杂绚丽的效果,敬请期待吧!