Styling & Animating SVG

水墨寒

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应用场景

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

SVG 实例


目录

  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

  • <img src="image.svg" alt="Site Logo" />
  • <object type="image/svg+xml" data="image.svg">
    <img src=”fallback.jpg”><!-- fallback -->
    </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)
  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文文档

  6. jenkov's Blog《SVG Tutorial

阅读 3.6k

Yun.kou
前端工程师,目前在金山西山居就职。崇尚前端与视觉一体化设计。

前端工程师-UX玩家-UI设计师-多肉植物爱好者-电影狂人-佛学爱好者

1.1k 声望
50 粉丝
0 条评论

前端工程师-UX玩家-UI设计师-多肉植物爱好者-电影狂人-佛学爱好者

1.1k 声望
50 粉丝
文章目录
宣传栏