2014-11-5 SVG入门

[hjzheng]

SVG

什么是SVG?

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

• 在网页中绘制复杂图形
• 跟canvas的区别

  SVG与浏览器

IE8及其以下版本 安装插件Adobe SVG viewer or 引入svg web的js文件 (https://code.google.com/p/svgweb/)

Inline SVG: IE9, Firefox 4, Chrome 7, Safari 5.1, Opera 11.6 iPhone 3.2, Android 3.0 - Partial

SVG Animations Firefox 4.0, Chrome 4, Safari 5.0, Opera 9.0 iPhone 5.0, Android 3.0 - Partial

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。 Canvas

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

  实例学习

• 兴趣图谱

如何引入SVG

• svg 基于xml的技术
• svg文件(参考对应的日期文件夹中svg_include.html)
  • 写法
  • 图片<img src="file.svg"> ，样式背景，框架<iframe src="file.svg">等
  • 直接在html页面中添加svg

SVG中的基本图形

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

SVG中的分组标签

• 分组标签<g>

SVG中的滤镜

SVG中的渐变

SVG中的动画 example

SVG库

• D3 Data-Driven Documents
  • D3: https://github.com/mbostock/d3
  • D3: Examples
• Snap.svg: https://github.com/adobe-webplatform/Snap.svg
  • Snap.svg Examples
• Raphaël—JavaScript Librarys
  • http://raphaeljs.com/

[hjzheng]

一份详细的SVG教程 http://tutorials.jenkov.com/svg/index.html

[hjzheng]

一些Example https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2014-11-5/svg