Styling & Animating SVG

@(SVG 专用)[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应用场景

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
svg广告 http://codepen.io/Yunkou/full/sadDB/
数据可视化1 http://raphaeljs.com/analytics.html
数据可视化2 http://raphaeljs.com/github/dots.html
数据可视化3 http://raphaeljs.com/australia.html

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

<img src="image.svg" alt="Site Logo" />
<object type="image/svg+xml" data="image.svg">
<img src=”fallback.jpg”>
</object>
<embed type="image/svg+xml" src="image.svg" />
<iframe src="image.svg">
</iframe>
<svg> … </svg>
.el { background-image: url(image.svg); }

SVG样式

SVG Presentation Attributes

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px" viewBox="0 0 300 300">
  <polygon 
     fill = "#FF931E" 
     stroke = "#ED1C24" 
     stroke-width = "5" 
     points = "279.1,160.8 195.2,193.3 174.4,280.8   117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/>
</svg>

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

SVG Attributes

SVG Presentation Attributes
详情参见：

行内样式（Inline Styles）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 300px;"  viewBox="0 0 300 300">
    <polygon 
       style = "fill: #FF931E; stroke: #ED1C24; stroke-width: 5;"
       points = "279.1,160.8 195.2,193.3 174.4,280.8   117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/>
</svg>

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

Embedded Styles (<style>) Inside svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px" viewBox="0 0 300 300">
    <style type=”text/css”>
        <![CDATA[
            selector {/* styles */}
        ]]>
    </style>
    <g id=”..”> … </g>
</svg>

Embedded Styles (<style>) Outside svg

<!DOCTYPE html><!-- HTML5 document -->
    <html> <head> ... </head> <body>
       <style type=”text/css”>
           /* style rules */
       </style>
<!-- xmlns is optional in an HTML5 document -->
       <svg version="1.1" viewBox="0 0 300 300">
<!-- SVG content -->    
       </svg>
    </body></html>

Style Rules (Selectors)

Type Selectors:
g {/* style a group */}
circle, rect { fill: #009966; }
Class and ID Selectors:
.arrow-head { /* styles / }
#bird { / styles */ }
Dynamic Pseudo-Class Selectors:
.icon:hover, .icon:active, .icon:focus { /* styles */ }
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, ...
Children Selectors:
g > circle {/* styles */}

note:伪类元素 before after 不支持

Jser

svg库

snap.js (ADOBE 支持)
SVG.js

范例

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

参考文献

维基百科《可缩放矢量图形》
Sara's blog《Styling & Animating Scalable Vector Graphics with CSS》
ux.etao《浅谈矢量图形前景》
MDN 《svg》
张鑫旭《snap中API文文档》
jenkov's Blog《SVG Tutorial》

Styling & Animating SVG

Styling & Animating SVG

前言

什么是SVG?

SVG应用场景

SVG 实例

目录

Why SVGs?

设计师篇

矢量图形前景

工具

CSSer篇

引入SVG

SVG样式

SVG Presentation Attributes

SVG Attributes

行内样式（Inline Styles）

Embedded Styles (<style>) Inside svg

Embedded Styles (<style>) Outside svg

Style Rules (Selectors)

Jser

svg库

范例

参考文献

水墨寒

引用和评论

Node学习笔记－002

SVG之Basic Shape

最好的svg使用方案（个人觉得）

svg转字体文件部分线条缺失

【第4期】搜索客 Meetup | INFINI Pizza 网站 SVG 动画这么炫，我教你啊！

SVG 了解下

Styling & Animating SVG

Styling & Animating SVG

前言

什么是SVG?

SVG应用场景

SVG 实例

目录

Why SVGs?

设计师篇

矢量图形前景

工具

CSSer篇

引入SVG

SVG样式

SVG Presentation Attributes

SVG Attributes

行内样式 （Inline Styles）

Embedded Styles (<style>) Inside svg

Embedded Styles (<style>) Outside svg

Style Rules (Selectors)

Jser

svg库

范例

参考文献

水墨寒

引用和评论

Node学习笔记－002

SVG之Basic Shape

最好的svg使用方案（个人觉得）

svg转字体文件部分线条缺失

【第4期】搜索客 Meetup | INFINI Pizza 网站 SVG 动画这么炫，我教你啊！

SVG 了解下

行内样式（Inline Styles）