SVG 简介

概念

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

特点

• SVG 易读取或修改
• SVG 与 JPEG 和 GIF 相比，尺寸更小，可压缩性更强
• SVG 是矢量的，可被高质量打印
• SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）

关注点

• 矢量
• 文件小
• 多色支持，可以随时变色
• 动画可与CSS、JS配合
• 兼容IE9

行业用法

• 矢量图
  • 背景图或者图标，如苹果官网logo、Antd Icon
• SVG 动画，更多可能性
  • 纯CSS动画
  • SVG动画
• SVG Sprite
  • symbol 定义形状，以id命名并使用，
  • CC这边业务相对分散，图标尚未集中管理

SVG基本形状

• 矩形 <rect>
• 圆形 <circle>
• 椭圆 <ellipse>
• 线 <line>
• 折线 <polyline>
• 多边形 <polygon>
• 路径 <path>

矩形 与 圆角矩形

圆 与 椭圆

线 与 多变形 与 折线

路径 效果

路径 参数

其中 大写命令坐标是绝对位置，小写命令坐标是相对位置。

CSS CSS动画优化

CSS属性中，transform、opacity 性能好

Zebra UI 动画效果

Zebra 动画效果

动画调优实例-搜索广告位

V1 Height

桌面Chrome上动画效果OK，但是iPhone 6S 或者安卓手机上出现抖动

V2 translate3d

页面整体平移，在屏幕外的交互要格外注意

V3 touch代替scroll

iPhone上touchend后的内部滚动完成后不会触发scroll

动画调优示例-intro页展开动画

height、padding、margin等会导致重排。

分析动画的元素，防止多余的元素也重新生成，比如cloneElement。

折叠面板示例   CCtalk官方活动群

SVG 动画技巧

跟普通CSS Animation那样写动画

transform 和 rotate

描边动画 - 遮罩和路径

SVG 描边属性并不太可控

stroke-dasharray 和 stroke-dashoffset

.ui-stroke-line-example {
	stroke-dasharray: 100;
	stroke-dashoffset: -20;
}

描边动画 - 播放器icon

SVG 动画兼容性

化简为繁 - 图形变换即可

// 图形变换
transform: rotate(-45deg) skew(15deg, 15deg) translate(-21%, -27%) scale(1.1);
// 路径的转角处使用的形状或者绘制的基础形状 为 圆形
stroke-linejoin: round
// 增加描边，来突出转角处的圆角
stroke-width: 30;

小结

• Svg Smil Animation 要被废弃，如底部的代码
• Svg动画兼容性：在SVG 1.1中,圆的半径是 attribute而不是 CSS property。safari和Firefox支持不够好
• Svg 矢量图形，CSS动画，可以操作的属性有stroke-width,fill, transform，opacity等，但不建议操作半径、路径等

// sSvg Smil Animation示例：

我还想说

CCtalk 这边的用法

• 背景图：默认2x图，当设计提出需要搞定时，可以用svg代替；其实图标可以直接用svg
• svg动画：精巧的动画，无需借助第三方动画库即可实现
• SVG Sprite 需要与设计沟通，出一系列的矢量图

未来的想法

• 深入研究svg
• Canvas的图形和动画