新司机驾车指南,线条动漫入门

SVG 新司机开车指南

2017/04/10 · HTML5 ·
SVG

原文出处: Tw93   

SVG 线条动画入门

2016/12/29 · HTML5 ·
SVG,
动画

本文作者: 伯乐在线 –
chokcoco
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

通常我们说的 Web 动画,包含了三大类。

  • CSS3 动画
  • javascript 动画(canvas)
  • html 动画(SVG)

个人认为 3
种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论的是我认为 SVG
中在实际项目中非常有应用价值 SVG 线条动画。

一、栅格图形和矢量图形
栅格图形:也称位图,图像由一组二维像素网格表示。
Canvas 2d API 就是一款栅格图形 API。通过 Canvas API 绘制图形,其实是更新
Canvas 的像素。PNG 和 JPEG 是两种栅格图形的格式。即 PNG 和 JPEG
图像中的数据也同样代表着像素。
矢量图形:图像由数学描述的几何形状表示。矢量图像包括使用高级几何形状(比如线和形状)绘制图像所需的全部信息。
SVG 是矢量图形的一种,同 HTML 一样,SVG 是一种文件格式,有自己的
API。SVG 同 DOM API 结合形成了一种矢量图形 API。尽管可以将 PNG
等栅格图形嵌入到 SVG 中,但从根本上讲,SVG 是一种矢量格式。

TL,TR

SVG其相关特性远比想象中要强,本文首先介绍下SVG的相关定义、特点和Demo,接下来会介绍它的相关语法和动画,最后告诉大家如何使用和优化SVG。

确保大家一小时内可以开车上路….. 来不及解释了,快上车…..

图片 1

举个栗子

SVG 线条动画,在一些特定的场合下可以解决使用 CSS
无法完成的动画。尤其是在进度条方面,看看最近项目里的一个小需求,一个这种形状的进度条:

图片 2

把里面的进度条单独拿出来,也就是需要实现这样一个效果:

图片 3

脑洞大开一下,使用 CSS3 如何实现这样一个进度条呢。

CSS3 是可以做到的,就是很麻烦。但是如果采用 SVG 的话,迎刃而解。

See the Pen 不规则进度条 by
Chokcoco (@Chokcoco) on
CodePen.

我们假定你在阅读本文的时候有了一定的 SVG
基础,上面代码看看就懂了,好了,本文到此结束。

图片 4

好吧,还是一步一步解释,上面进度条的主要 SVG 代码如下:

<svg version=”1.1″ xmlns=””
xmlns:xlink=”” xml:space=”preserve”
class=”circle-load-rect-svg” width=”300″ height=”200″ viewbox=”0 0 600
400″> <polyline points=”5 5, 575 5, 575 200, 5 200″
class=”g-rect-path”/> <polyline points=”5 5, 575 5, 575 200, 5
200″ class=”g-rect-fill”/> </svg>

1
2
3
4
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
  <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
  <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
</svg>

二、理解 SVG
SVG 的本质特征是它基于 XML。HTML5 引入了内连 SVG,所以 SVG
元素可以直接出现在 HTML 标记中。

一、简介

SVG 为何

可缩放矢量图形,即SVG,是W3C
XML的分枝语言之一,用于标记可缩放的矢量图形。(摘自MDN)

上面代码中,先谈谈 svg 标签:

  • version: 表示 “ 的版本,目前只有 1.0,1.1 两种
  • xmlnshttp://www.w3.org/2000/svg 固定值
  • xmlns:xlinkhttp://www.w3.org/1999/xlink 固定值
  • xml:spacepreserve 固定值,上述三个值固定,表示命名空间,当数据单独存在svg文件内时,这3个值不能省略
  • class:就是我们熟悉的 class
  • width | height: 定义 svg 画布的大小
  • viewbox: 定义了画布上可以显示的区域,当 viewBox 的大小和 svg
    不同时,viewBox 在屏幕上的显示会缩放至 svg
    同等大小(暂时可以不用理解)

有了 svg 标签,我们就可以愉快的在内部添加 SVG 图形了,上面,我在 svg 中定义了两个 polyline 标签。

SVG 和 Canvas 的重要差异:
(1)SVG 绘制的文本可选,而 Canvas 不能(因为 Canvas
文本用像素绘制,是图像的一部分);
(2)SVG 上的文本是可搜索的,Canvas 上的文本无法被搜索引擎获取。

定义

SVG(Scalable Vector
Graphics)是可缩放矢量图形的缩写,基于可扩展标记语言XML来描述二维矢量图形的一种图形格式,由W3C制定,是一个开放标准。

SVG 基本形状

polyline:是SVG的一个基本形状,用来创建一系列直线连接多个点。

其实,polyline 是一个比较不常用的形状,比较常用的是pathrectcircle 等。这里我使用polyline 的原因是需要使用 stroke-linejoin 和 stroke-linecap 属性,在线段连接处创建圆滑过渡角。

SVG
中定义了一些基本形状,在继续下文之前,建议点进去先了解一些基本图形的标签及写法:

图片 5

HTML 是用来定义页面结构的声明性语言,而 SVG
是用来创建视觉结构的语言。通过 DOM API ,你可以与 SVG 和 HTML
进行交互。SVG 文档是元素构成的树状结构,同 HTML
一样,它支持脚本操作和添加样式,还可以向 SVG 元素添加事件处理函数。

特点

现在我们可以使用PNG、JPG来展示静态的图片,使用CSS3、JS或者挫一点的GIF来表示动画,厉害一点我们可以使用Canvas来绘图,那么为什么还要使用SVG呢?

  • 和PNG、GIF比较起来,文件体积更小,且可压缩性强;
  • 由于采用XML描述,可以轻易的被读取和修改,描述性更强;
  • 在放大或改变尺寸的情况下其图形质量不会有所损失,与分辨率无关,是可伸缩的;
  • SVG是面向未来 (W3C 标准)的,同时浏览器兼容性好;
  • 使用CSS 和 JS能很方便的进行控制,同时可以很轻易地描述路径动画;
  • 和Canvas相比
    • Canvas基于像素,提供2D绘制函数,是一种HTML元素类型,依赖于HTML,只能通过脚本来绘制图形,Canvas提供的功能比较原始,适合像素处理,动态渲染和大数据量绘制的应用场景;
    • SVG为矢量,提供一系列图形元素(Rect, Path, Circle, Line
      …),还有完整的动画,事件机制,本身可以独立使用,也可以嵌入到HTML中,SVG很早就成为了国际标准,功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景;

SVG 线条动画

好,终于到本文的重点了。

图片 6

上面,我们给两个 polyline 都设置了 class,SVG
图形的一个好处就是部分属性样式可以使用 CSS
的方式书写,更重要的是可以配合 CSS 动画一起使用。

上面,主要的 CSS 代码:

.g-rect-path{ fill: none; stroke-width:10; stroke:#d3dce6;
stroke-linejoin:round; stroke-linecap:round; } .g-rect-fill{ fill: none;
stroke-width:10; stroke:#ff7700; stroke-linejoin:round;
stroke-linecap:round; stroke-dasharray: 0, 1370; stroke-dashoffset: 0;
animation: lineMove 2s ease-out infinite; } @keyframes lineMove { 0%{
stroke-dasharray: 0, 1350; } 100%{ stroke-dasharray: 1350, 1350; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.g-rect-path{
    fill: none;
    stroke-width:10;
    stroke:#d3dce6;
    stroke-linejoin:round;
    stroke-linecap:round;
}
 
.g-rect-fill{
    fill: none;
    stroke-width:10;
    stroke:#ff7700;
    stroke-linejoin:round;
    stroke-linecap:round;
    stroke-dasharray: 0, 1370;
    stroke-dashoffset: 0;
    animation: lineMove 2s ease-out infinite;
}
 
@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}

这尼玛是什么
CSS?怎么除了 animation 全都不认识? 图片 7

莫慌,其实很多和 CSS 对比一下非常好理解,只是换了个名字:

  • fill:类比 css 中的 background-color,给 svg 图形填充颜色;
  • stroke-width:类比 css
    中的 border-width,给 svg 图形设定边框宽度;
  • stroke:类比 css 中的 border-color,给 svg 图形设定边框颜色;
  • stroke-linejoin | stroke-linecap:上文稍微提到过,设定线段连接处的样式;
  • stroke-dasharray:值是一组数组,没数量上限,每个数字交替表示划线与间隔的宽度;
  • stroke-dashoffset:则是虚线的偏移量

重点讲讲能够实现线条动画的关键属性 stroke-dasharray 。

属性 stroke-dasharray 可控制用来描边的点划线的图案范式。

它是一个和数列,数与数之间用逗号或者空白隔开,指定短划线和缺口的长度。如果提供了奇数个值,则这个值的数列重复一次,从而变成偶数个值。因此,5,3,2等同于5,3,2,5,3,2

解释很苍白,直接看例子:

See the Pen stroke-dasharray
by Chokcoco (@Chokcoco) on
CodePen.

上面,填充进度条,使用了下面这个动画 :

@keyframes lineMove { 0%{ stroke-dasharray: 0, 1350; } 100%{
stroke-dasharray: 1350, 1350; } }

1
2
3
4
5
6
7
8
@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}

stroke-dasharray: 0, 1350;,表示线框短划线和缺口的长度分别为 0 和
1350,所以一开始整个图形都是被缺口占据,所以在视觉效果上长度为 0。

然后过渡到 stroke-dasharray: 1350, 1350,表示线框短划线和缺口的长度分别为
1350 和 1350,因为整个图形的长度就是
1350,所以整个进度条会被慢慢填充满。

掌握了这个技巧后,就可以使用 stroke-dasharray 和 stroke-dashoffset 制作很多不错的交互场景:

图形 API 设计方面存在两个派系:
一是即时模式(immediate-mode):图形提供了绘图接口,由 API
接口调用引起的绘制行为会即时发生。如 Canvas。
二是保留模式(retained-mode):在保留模式图形中,有一个与场景中的视觉对象对应的模型,它会随着时间的推移而保留下来。可以使用
API 操作场景图形,当其改变时,图形引擎会重绘场景。SVG
是一种保留模式图形,其场景图形就是文档。用于操作 SVG 的 API 是 W3C DOM
API。

Demo

使用SVG可以做出什么比较好玩的东西呢?

图片 8

上周团队(😂😂臭不要脸插个很硬的广告,阿里飞猪前端团队在招人啦,详细:飞猪寻觅前端同学)有一个小的hackthon,就是通过代码来画这个Loading
GIF,然后就边学边用SVG写了一个相同的loadng,体积从之前GIF的33KB变成了864B的SVG,详细见下面:

See the Pen Fliggy Loading by Tw93
(@tw93) on CodePen.

另外一些有趣的SVG可以查看30 Awesome SVG Animation For Your
Inspiration这里。

SVG 线条动画实现按钮交互

图片 9

See the Pen
svg线条动画实现按钮交互 by
Chokcoco (@Chokcoco) on
CodePen.

SVG 文档在呈现时会保留构成它的矢量信息,缩放 SVG
时,渲染程序会立即重绘所有构成图像的线条。所以,缩放 SVG
不会导致其质量下降。而 Canvas
缩放时图像会模糊,原因是图像由像素组成,且只能在更高分辨率下重新采样。

二、坐标定位

学习SVG语法之前,我们可以来了解下SVG的坐标定位,这种坐标系统和我们小时候学习的绘图坐标是相反的,但是在HTML中都是用如下方式定位。即以页面的左上角为(0,0)坐标点,坐标以像素为单位,x轴正方向是向右,y轴正方向是向下

图片 10

SVG 线条动画实现圆形进度条

See the Pen
svg线条动画实现圆形进度条 by
Chokcoco (@Chokcoco) on
CodePen.

三、使用 SVG 创建 2D 图形
(1)在页面中添加 SVG
添加内联 SVG 到 HTML 页面中如同添加其他元素一样简单。svg
标签的开始标记和结束标记之间,可以添加一些形状和其他视觉对象。还可以在
HTML 中以静态图像的方式引用 SVG 文件,例如:
<code>
<img src=”example.svg”>
</code>
不过这种方式的缺点是:SVG 文档不能像内联 SVG 内容那样集成到 DOM
中,即无法编写与 SVG 元素进行交互的脚本。
(2)简单的形状
SVG
语言包含了基本的形状元素,如矩形、圆形和椭圆。形状元素的尺寸和位置被定义成了属性。如:矩形的属性有
width 和 height。圆形有一个表示半径的 r 属性。和 css 一样,距离单位包括
px,em 等。
示例:
<code><svg width=”200″ height=”200″>
<rect x=”10″ y=”10″ width=”100″ height=”80″ stroke=”red” fill=”#ccc”
/>
<circle cx=”120″ cy=”80″ r=”40″ stroke=”#00f” fill=”none”
stroke-width=”8″ />
</svg>
</code>
SVG 绘制形状对象时是按对象在文档中出现的顺序进行的。
SVG 实用的坐标系统与 Canvas API 相同,svg
元素的左上角位置的坐标是(0,0)。
(3)变换 SVG 元素
SVG
中有些组织元素,可用于将多个元素结合起来,使它们作为一个整体进行变换或链接。<g>
元素代表“组”(group)。组可以用来结合多个相关的元素。组内成员可由通用 ID
来引用。此外,组也可以作为一个一个整体进行变换。示例:
<code><svg width=”200″ height=”200″>
<g transform=”translate(-10, 350)”
stroke-width=”20″
stroke-linejoin=”round”>
<path d=”M0,0 Q170,-50 260, -190 Q310, -250 410,-250″
fill=”none” />
</g>
</svg>
</code>
(4)复用内容
SVG 中的 <defs> 元素用于定义留待将来使用的内容(折合 react/vue
中的组件功能类似)。SVG 中的 <use> 元素用于链接到 <defs>
元素定义的内容。借助这两个元素。可以多次复用同一内容,消除冗余。
示例:
<code><svg width=”200″ height=”200″>
<defs>
<g id=”shapeGroup”>
<rect x=”10″ y=”10″ width=”100″ height=”80″ stroke=”red” fill=”#ccc”
/>
<circle cx=”120″ cy=”80″ r=”40″ stroke=”#00f” fill=”none”
stroke-width=”8″ />
</g>
</defs>
<use xlink:href=”#shapeGroup” transform=”translate(20,0) scale(0.5)”
/>
<use xlink:href=”#shapeGroup” transform=”translate(50,0) scale(0.7)”
/>
<use xlink:href=”#shapeGroup” transform=”translate(80,0)
scale(0.25)” />
</svg>
</code>
(5)图案和渐变
图案类似于 Canvas 中的背景图做法。渐变也分为线性渐变和放射性渐变,和
Canvas 类似。
示例:
<code><svg width=”200″ height=”200″>
<defs>
<pattern id=”GravelPattern” patternUnits=”userSpaceOnUse” x=”0″ y=”0″
width=”100″ height=”67″ viewBox=”0 0 100 67″>
<image x=”0″ y=”0″ width=”100″ height=”67″
xlink:href:”gravel.jpg”></image>
</pattern>
<linearGradient id=”Gradient”>
<stop offset=”0%” stop-color=”#000″></stop>
<stop offset=”100%” stop-color=”#f00″></stop>
</linearGradient>
</defs>
<rect x=”10″ y=”10″ width=”100″ height=”80″ stroke=”red”
fill=”url(#Gradient)” />
<circle cx=”120″ cy=”80″ r=”40″ stroke=”#00f”
fill=”url(#GravelPattern)” stroke-width=”8″ />
</svg>
</code>
(6)SVG 路径
SVG 不仅包含简单的形状,还包含自由形态的路径。path 元素有一个 d 属性。d
代表数据(data)。在 d
属性的值中,你能够指定一系列的路径绘制命令。每条命令都可能带有坐标参数。一些命令的含义为:M
代表移至(moveto),L 代表划线至(lineto),Q 代表二次曲线, Z
代表闭合曲线。
(7)SVG 文本
示例:
<code><svg width=”200″ height=”200″>
<text x=”10″ y=”80″ font-family=”Droid Sans” stroke=”#00f”
fill=”#00f” font-size=”18px”>
hello SVG
</text>
</svg>
</code>

三、元素

多 SVG 图形线条动画配合

之前我司一个 h5
里面应用过的,多SVG 图形线条动画配合,可以制作一些比较酷炫的动画,很有科技感。

图片 11

See the Pen JbQNME by Chokcoco
(@Chokcoco) on
CodePen.

正文结束,我在我的 Github 上,使用 SVG 实现了一些图形
— SVG奇思妙想,Demo可以戳这里。

下篇文章将会详述非规则图形,如何使用 PS + AI 生成 path 路径,实现 SVG
动画,放个 Demo,敬请期待。

图片 12

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持我写出更多好文章,谢谢!

打赏作者

四、组合场景
完整示例:
<code><svg width=”400″ height=”600″>
<defs>
<pattern id=”GravelPattern” patternUnits=”userSpaceOnUse” x=”0″ y=”0″
width=”100″ height=”67″ viewBox=”0 0 100 67″>
<image x=”0″ y=”0″ width=”100″ height=”67″
xlink:href=”gravel.jpg”></image>
</pattern>
<linearGradient id=”TrunkGradient”>
<stop offset=”0%” stop-color=”#663300″></stop>
<stop offset=”40%” stop-color=”#996600″></stop>
<stop offset=”100%” stop-color=”#552200″></stop>
</linearGradient>
<rect x=”-5″ y=”-50″ width=”10″ height=”50″
id=”Trunk”></rect>
<path d=”M-25, -50
L-10, -80
L-20, -80
L-5, -110
L-15, -110
L0, -140
L15, -110
L5, -110
L20, -80
L10, -80
L25, -50
Z” id=”Canopy”></path>
<linearGradient id=”CanopyShadow” x=”0″ y=”0″ x2=”0″ y2=”100%”>
<stop offset=”0%” stop-color=”#000″
stop-opacity=”.5″></stop>
<stop offset=”20%” stop-color=”#000″
stop-opacity=”0″></stop>
</linearGradient>
<g id=”Tree”>
<use xlink:href=”#Trunk”
fill=”url(#TrunkGradient)”></use>
<use xlink:href=”#Trunk”
fill=”url(#CanopyShadow)”></use>
<use xlink:href=”#Canopy” fill=”none” stroke=”#663300″
stroke-linejoin=”round” stroke-width=”4px”></use>
<use xlink:href=”#Canopy” fill=”#339900″
stroke=”none”></use>
</g>
<g id=”TreeShadow”>
<use xlink:href=”#Trunk” fill=”#000″></use>
<use xlink:href=”#Canopy” fill=”000″ stroke=”none”></use>
</g>
</defs>
<g transform=”translate(-10, 350)” stroke-width=”20″
stroke=”url(#GravelPattern)” stroke-linejoin=”round”>
<path d=”M0,0 Q170,-50 260, -190 Q310, -250 410,-250″
fill=”none”></path>
</g>
<text y=”60″ x=”200″ font-family=”impact” font-size=”60px”
fill=”#996600″ text-anchor=”middle”>
Happy Trails!
</text>
<use xlink:href=”#TreeShadow” transform=”translate(130, 250)
matrix(1, 0, -0.5, 1, 0, 0) scale(1, 0.6)”
opacity=”0.2″></use>
<use xlink:href=”#Tree” transform=”translate(130,
250)”></use>
<use xlink:href=”#TreeShadow” transform=”translate(260, 500)
matrix(1, 0, -0.5, 1, 0, 0) scale(2, 1.2)”
opacity=”0.2″></use>
<use xlink:href=”#Tree” transform=”translate(260, 500)
scale(2)”></use>
</svg>
</code>

基础形状

SVG中提供了很多基础元素可以用来绘制基础的形状,譬如矩形、圆形、椭圆、多边形、折线、线条、路径等,同时可以将这些基础形状组合绘制出复杂的图像。

图片 13

以上基础形状的展示效果可以通过这些代码表示出来,详细见下:

See the Pen SVG Basic_Shapes by
Tw93 (@tw93) on CodePen.

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 14
图片 15

1 赞 10 收藏
评论

其他重要元素

  • svg:SVG的根元素,并且可以相互嵌套;
  • g:用来将SVG中的元素进行分组操作,分组后可以看成一个单独的形状,统一进行转换,同时g元素的样式可以被子元素继承,但是它没有X,Y属性,不过可以通过transform来移动它;
  • def:用于定义在SVG中可重用的元素,def元素不会直接展示出来,可以通过use元素来引用;
  • use:通过它来复用def元素,也包括、元素,使用即可调用;
  • text:可以用它来实现word中的那种“艺术字”,很神奇的一个功能;
  • image:用它可以在SVG中嵌套对应的图片,并可以在图片上和周围做对应的处理;

关于作者:chokcoco

图片 16

经不住流年似水,逃不过此间少年。

个人主页 ·
我的文章 ·
63 ·
   

图片 17

四、样式

可以类比于在切页面过程中,我们需要将我们画好的框框进行描边、填色、有时候还要加入渐变效果、转换、裁剪、等效果。

轮廓 stroke

stroke用于设置绘制对象线条的颜色,同时stroke有如下属性:

  • stroke-width:设置轮廓的宽度;
  • stroke-linecap:设置轮廓结尾处的渲染方式,value有butt(直接一刀切断)、square(保留一点切断)、round(圆弧切断)
    3个设置值;
  • stroke-linejoin:用于设置两条线之间的连接方式,value有miter(尖角连接)、round(圆弧连接)、bevel(切断连接)
    3个设置值;
  • stroke-opacity:用于设置描边的不透明度;
  • stroke-dasharray +
    stroke-dashoffset:stroke-dasharray用于使用虚线呈现SVG形状的描边,需要提供一个数值数组来描述,定义破折号和空格的长度;stroke-dashoffset用于设置虚线模式中的开始点;

填充 fill

fill用来描述SVG对象内部的颜色,除此还有如下两个属性:

  • fill-opacity:用于设置填充颜色的不透明度;
  • fill-rule:用于设置填充的方式,value有nonzero、evenodd 两个值;
  • nonzero:从一个点往任何方向上绘制一条射线,形状中的路径每次穿过此射线时,如果路径从左到右穿过射线,则计数器加1,如果路径从右到左穿过射线,则计数器减1。计数器总数为0时候,则该点被认为在路径外。如果计数器非0,则该点被认为在路径内;
  • evenodd:从一个点往任何方向上绘制一条射线。每次路径穿过射线,计数器加1。如果总数是偶数,则点在外部。如果总计数为奇数,点在形状内;

变换 transform

此属性和css3中的transform相类似,有translate、rotate、scale、skew(skewX和skew函数使x轴和y轴倾斜)、matrix(矩阵变换,请联想大学线性代数
😂😂😂)这些变换,同时可以将它们组合进行变换。

此外还有渐变、遮罩、裁剪等属性,详细请参考:linearGradient,mask,clipPath。

五、动画

在SVG中动画元素主要分成如下4类,同时也可以自由组合。

  • set:用于设置延迟,譬如设置5s后元素位置颜色变化,但是此元素没有动画效果;
  • animate:基础动画属性,用于实现单属性的动画过度效果;
  • animateTransform:实现transform变换动画效果,可以类比CSS3中的transform;
  • animateMotion:实现路径动画效果,让元素沿着对于path运动;

有了元素以后还需要有对应的属性用来表示动画的特征,譬如:要动画的元素属性名称、起始值、结束值、变化值、开始时间、结束时间、重复次数、动画速度曲线函数等等。

图片 18

动画有很多地方都很新鲜,大家可以多多尝试。

See the Pen SVG animation by Tw93
(@tw93) on CodePen.

六、使用方式

我们可以使用如下4种常用的方式来加载我们的SVG,此处可以将svg转换成base64的方式。

通过Img标签:

XHTML

<img src=”tw93.svg” alt=”Hello SVG” height=”65″ width=”68″>

1
<img src="tw93.svg" alt="Hello SVG" height="65" width="68">

通过CSS background:

CSS

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

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

通过object:

XHTML

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

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

直接内置到Html中:

XHTML

<svg xmlns=”” 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>

1
2
3
4
<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>

前三种方式常用于SVG图片已经定型,并且改动很少的情况,通过独立的SVG文件更好进行管理,同时可以减少HTML元素;内置的方式常用于SVG需要常修改或者还没有确定的情况,更加变化修改和维护。

七、优化和工具

SVGO

SVG Optimizer is a Nodejs-based tool for optimizing SVG vector
graphics files.

SVGO一个比较厉害的压缩优化SVG的工具,可以将我们编写的SVG中的无用信息,同时对代码进行压缩,项目地址:。

图片 19

SVGOMG

SVGOMG是SVGO的可视化界面工具,操作起来很方便,同时还提供了一些其他有用的功能,展示地址:SVGOMG
– SVGO’s Missing GUI

图片 20

Snap.svg

The JavaScript SVG library for the modern web.

Snap.svg是一个可以使你操纵SVG资源和jQuery操作DOM一样简单的类库,可以写出更加复杂的SVG效果,同时文档超级齐全,推荐给想深入了解的同学,项目地址:Snap.svg
– Home,下图就是使用Snap.svg来实现的。

See the Pen Interactive Illustration via
Snap by Tw93
(@tw93) on CodePen.

Convert image to the SVG format

我们可以通过这个转换平台,将普通图片转成SVG的格式,但是此处转换可能结果不是我们想要的,但是可以将其当做初成品,在此基础上在进行调整优化,最终实现SVG的转换。平台地址:

完,欢迎大家指教和讨论。

1 赞 9 收藏
评论

图片 17

发表评论

电子邮件地址不会被公开。 必填项已用*标注