前言
什么是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应用场景
- icon
- 数据可视化
- 在移动端flash广告的代替者
- 专题故事版
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
目录
- 设计师篇
- CSSer
- JSer
Why SVGs?
- accessible
- Very Good Browser Support
- Smaller sizes (can be gzipped)
- Scalable & Resolution Independent 不受约束的等比缩放
- Interactive and Styleable (CSS and Javascript)
设计师篇
矢量图形前景
- 扁平化趋势
- 显示技术的革新
- 效率优先
- 响应式设计
- 丰富的动画及互动体验
- 应用环境和技术的改善
工具
-
Adobe Illustrator
-
Inkscape (Free)
-
Sketch (Mac OS X only)
CSSer篇
引入SVG
- .el { background-image: url(image.svg); }
SVG样式
SVG Presentation Attributes
http://codepen.io/Yunkou/full/tucEB
SVG Attributes
详情参见:
行内样式 (Inline Styles)
http://codepen.io/Yunkou/full/tucEB