SVG美洲杯冠军竞猜： 入门
SVG 新司机开车指南
原文出处： Tw93
一、栅格图形和矢量图形
栅格图形：也称位图，图像由一组二维像素网格表示。
Canvas 2d API 就是一款栅格图形 API。通过 Canvas API 绘制图形，其实是更新
Canvas 的像素。PNG 和 JPEG 是两种栅格图形的格式。即 PNG 和 JPEG
图像中的数据也同样代表着像素。
矢量图形：图像由数学描述的几何形状表示。矢量图像包括使用高级几何形状（比如线和形状）绘制图像所需的全部信息。
SVG 是矢量图形的一种，同 HTML 一样，SVG 是一种文件格式，有自己的
API。SVG 同 DOM API 结合形成了一种矢量图形 API。尽管可以将 PNG
等栅格图形嵌入到 SVG 中，但从根本上讲，SVG 是一种矢量格式。
TL,TR
SVG其相关特性远比想象中要强，本文首先介绍下SVG的相关定义、特点和Demo，接下来会介绍它的相关语法和动画，最后告诉大家如何使用和优化SVG。
确保大家一小时内可以开车上路….. 来不及解释了，快上车…..
二、理解 SVG
SVG 的本质特征是它基于 XML。HTML5 引入了内连 SVG，所以 SVG
元素可以直接出现在 HTML 标记中。
一、简介
SVG 和 Canvas 的重要差异：
（1）SVG 绘制的文本可选，而 Canvas 不能（因为 Canvas
文本用像素绘制，是图像的一部分）；
（2）SVG 上的文本是可搜索的，Canvas 上的文本无法被搜索引擎获取。
定义
SVG（Scalable Vector Graphics）是可缩放矢量图形的缩写，基于可扩展标记语言XML来描述二维矢量图形的一种图形格式，由W3C制定，是一个开放标准。
HTML 是用来定义页面结构的声明性语言，而 SVG 是用来创建视觉结构的语言。通过 DOM API ，你可以与 SVG 和 HTML 进行交互。SVG 文档是元素构成的树状结构，同 HTML 一样，它支持脚本操作和添加样式，还可以向 SVG 元素添加事件处理函数。
特点
现在我们可以使用PNG、JPG来展示静态的图片，使用CSS3、JS或者挫一点的GIF来表示动画，厉害一点我们可以使用Canvas来绘图，那么为什么还要使用SVG呢？
- 和PNG、GIF比较起来，文件体积更小，且可压缩性强；
- 由于采用XML描述，可以轻易的被读取和修改，描述性更强；
- 在放大或改变尺寸的情况下其图形质量不会有所损失，与分辨率无关，是可伸缩的；
- SVG是面向未来 (W3C 标准)的，同时浏览器兼容性好；
- 使用CSS 和 JS能很方便的进行控制，同时可以很轻易地描述路径动画；
- 和Canvas相比
- Canvas基于像素，提供2D绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本来绘制图形，Canvas提供的功能比较原始，适合像素处理，动态渲染和大数据量绘制的应用场景；
- SVG为矢量，提供一系列图形元素（Rect, Path, Circle, Line …），还有完整的动画，事件机制，本身可以独立使用，也可以嵌入到HTML中，SVG很早就成为了国际标准，功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景;
图形 API 设计方面存在两个派系：
一是即时模式（immediate-mode）：图形提供了绘图接口，由 API
接口调用引起的绘制行为会即时发生。如 Canvas。
二是保留模式(retained-mode)：在保留模式图形中，有一个与场景中的视觉对象对应的模型，它会随着时间的推移而保留下来。可以使用
API 操作场景图形，当其改变时，图形引擎会重绘场景。SVG
是一种保留模式图形，其场景图形就是文档。用于操作 SVG 的 API 是 W3C DOM
API。
Demo
使用SVG可以做出什么比较好玩的东西呢？
上周团队（
本文由美洲杯冠军竞猜发布于计算机教程,转载请注明出处：SVG美洲杯冠军竞猜： 入门
关键词：