Styling & Animating SVG

Alt text

---

前言

什么是SVG?

可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

SVG应用场景

1. icon
2. 数据可视化
3. 在移动端flash广告的代替者
4. 专题故事版

SVG 实例

• 旋转 http://tutsplus.github.io/a-beginner-s-introduction-to-css-animation/
• 小灯泡 http://codepen.io/Yunkou/full/HLhin
• 圣诞快乐 http://tympanus.net/Development/BurstingGiftBox/
• texthover http://tympanus.net/Tutorials/ShapeHoverEffectSVG/index2.html
• Border Animation Effect http://tympanus.net/Tutorials/BorderAnimationSVG/
• SVG Drawing http://tympanus.net/Development/SVGDrawingAnimation/index.html
• SVG map http://rockydo.com/svgmap/svgmap.html
• snapsvg http://snapsvg.io/demos/#display

---

目录

1. 设计师篇
2. CSSer
3. JSer

Why SVGs?

• accessible
• Very Good Browser Support
• Smaller sizes (can be gzipped)
• Scalable & Resolution Independent 不受约束的等比缩放
• Interactive and Styleable (CSS and Javascript)

设计师篇

矢量图形前景

• 扁平化趋势
• 显示技术的革新
• 效率优先
• 响应式设计
• 丰富的动画及互动体验
• 应用环境和技术的改善

工具

• Adobe Illustrator

  Alt text

• Inkscape (Free)

  Alt text

• Sketch (Mac OS X only)

  Alt text

---

CSSer篇

引入SVG

• 
• .el { background-image: url(image.svg); }

SVG样式

SVG Presentation Attributes

http://codepen.io/Yunkou/full/tucEB

SVG Attributes

SVG Presentation Attributes

详情参见：

行内样式 （Inline Styles）

http://codepen.io/Yunkou/full/tucEB

Embedded Styles ( …

Embedded Styles (

Style Rules (Selectors)

1. Type Selectors:

g {/* style a group */}
circle, rect { fill: #009966; }

2. Class and ID Selectors:
   .arrow-head { /* styles / }
   #bird { / styles */ }

3. Dynamic Pseudo-Class Selectors:
   .icon:hover, .icon:active, .icon:focus { /* styles */ }

4. Pseudo-Class Selectors:
   :first-child, :last-child, :nth-*-child(), :visited, :link and :lang, :last-of-type, :first-of-type, :not(), :nth-*-type(), :only-child, :only-of-type, ...

5. Children Selectors:
   g > circle {/* styles */}

note:伪类元素 before after 不支持

样式优先级规则

Jser

svg库

1. snap.js (ADOBE 支持)
2. SVG.js

---

范例

1. 小灯泡 http://codepen.io/Yunkou/full/HLhin

---

参考文献

1. 维基百科《可缩放矢量图形》

2. Sara's blog《Styling & Animating Scalable Vector Graphics with CSS》

3. ux.etao《浅谈矢量图形前景》

4. MDN 《svg》

5. 张鑫旭 《snap中API文文档》