SVG 实例-W3CAPI 在线教程

SVG 简介

一、什么是SVG？

概念：SVG 是可缩放矢量图（Scalable Vector Graphics）的简称，一种基于 XML 语法的图像格式，其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

特性：（与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势）

HTML5 支持内联 SVG，SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作，具有交互性和动态性
SVG 用于定义网络的基于矢量的图形
SVG 是万维网联盟的标准
SVG 图像可被搜索、索引、脚本化或压缩（很适合制作地图）
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 尺寸更小，是可伸缩的
SVG 图像可通过文本编辑器来创建和修改
基于可扩展标记语言XML

二、为什么需要SVG？

SVG的由来：

图片的数字化。将图片存储为数据有两种方案。其一为位图，也被称为光栅图。即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合。每个点发出的光有独立的频率和强度，反映在视觉上，就是颜色和亮度。这些信息有不同的编码方案，在互联网上最常见的就是RGB。根据需要，编码后的信息可以有不同的位(bit)数--位深。位数越高，颜色越清晰，对比度越高;占用的空间也越大。另一项决定位图的精细度的是其中点的数量。一个位图文件就是所有构成其的点的数据的集合，它的大小自然就等于点数乘以位深。位图格式是一个庞大的家族，包括常见的JPEG/JPG, GIF, TIFF, PNG, BMP。

第二种方案为矢量图。它用抽象的视角看待图形，记录其中展示的模式而不是各个点的原始数据。它将图片看成各个"对象"的组合，用曲线记录对象的轮廓，用某种颜色的模式描述对象内部的图案(如用梯度描述渐变色)。比如一张留影，被看成各个人物和背景中各种景物的组合。这种更高级的视角，正是人类看世界时在意识里的反映。矢量图格式有CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML等等。

矢量图中简单的几何图形，只需要几个特征数值，就可以确定。比如三角形，只需要确定三个顶点的坐标。圆只需要确定圆心的坐标和半径。描述它的函数已知的曲线也只需要几个参数就能够确定。如正弦曲线、各种螺线等等。如果用位图记录这些几何图案，则需要包含组成线条的各个像素的数据。除了大大节省空间，矢量图还具有完美的伸缩性。因为记录的是图形的特征，图形的尺寸任意变化时，都只是做着相似变换，不会出现模糊和失真。相反位图的图片放大到超出原有大小时，各个像素点之间出现空缺，即使用某种算法填充，也会出现模糊锯齿等现象，不如矢量图精确。因而矢量图很适合用于记录诸如符号、图标等简单的图形。而位图则适合于没有明显规律的、颜色丰富细腻的图片。

SVG的历史：

在 2003 年一月，SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有：Sun公司(已被Oracle公司收购)、Adobe、苹果公司、IBM 以及柯达。
未完待续...

SVG 的浏览器兼容性

Internet Explorer9，Firefox（火狐），Chrome（谷歌），Opera和Safari都支持内联SVG
IE8和早期版本都需要一个插件如：Adobe SVG浏览器，这是免费提供的

SVG 实例

在 HTML5 中，给我们提供了SVG标签，我们能够将 SVG 标签元素直接嵌入到 HTML 页面中，如下为用SVG绘制一个五角星：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
    <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:#0D5BB3;stroke:#0D5BB3;stroke-width:1;"/>
    <!-- <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red;stroke:red;stroke-width:1;fill-rule:evenodd;"/> -->
</svg>

执行一下

HTML5 SVG 和 Canvas 的区别

通过学习我们知道在HTML5 中 Canvas 和 SVG 都允许我们在浏览器中创建图形，但是它们在根本上是不同的，如下表格比对列出了他们之间的一些区别：

比对特性	SVG	Canvas
概念	SVG 是一种使用 XML 描述 2D 图形的语言 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形	Canvas 通过 JavaScript 来绘制 2D 图形 Canvas 是逐像素进行渲染的在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象
分辨率	不依赖分辨率	依赖分辨率
事件支持	支持事件处理器	不支持事件处理器
渲染能力	最适合带有大型渲染区域的应用程序（比如谷歌地图）能够以 .png 或 .jpg 格式保存结果图像	文本渲染能力较弱复杂度高的场景下渲染速度会减慢（任何过度使用 DOM 的应用都不快）
游戏支持	不适合游戏应用	最适合图像/图形密集型的游戏，其中的许多对象会被频繁重绘