SVG基础

时间 2019-11-17

标签 svg 基础繁體版

原文原文链接

　　可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。SVG 是使用 XML 来描述二维图形和绘图程序的语言。算法

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的状况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个总体

SVG 的历史和优点

在 2003 年一月，SVG 1.1 被确立为 W3C 标准。编程

参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。浏览器

与其余图像格式相比，使用 SVG 的优点在于：网络

SVG 可被很是多的工具读取和修改（好比记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不降低的状况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制做地图）
SVG 能够与 Java 技术一块儿运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

SVG 的主要竞争者是 Flash。ide

与 Flash 相比，SVG 最大的优点是与其余标准（好比 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。svg

背景：

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

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

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

图形格式

SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C("World Wide Web ConSortium" 即 " 国际互联网标准组织")在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格听从XML语法，并用文本格式的描述性语言来描述图像内容，所以是一种和图像分辨率无关的矢量图形格式。

W3C是做为一个国际性的工业联盟而建立的，目的是领导整个互联网协做的发展和创新，以实现科技的进步和共同发展。因为W3C联盟关于SVG的开发工做组的成员都是一些知名厂商，如Adobe、苹果、AutoDesk、BitFlash、Corel、惠普、IBM、ILOG、INSO、Macromedia、微软、Netscape、OASIS、Open Text、Quark、RAL(C C LRC)、Sun、ViSiO、施乐等，因此SVG不是一个私有格式，而是一个开放的标准。也就是说，它并非属于任何个体的专利，而是一个经过协做、共同开发的工业标准。正是由于这点，才使得SVG可以获得更迅速的开发和应用。

查看 SVG 文件

今天，全部浏览器均支持 SVG 文件，不过须要安装插件的 Internet Explorer 除外。插件是免费的，好比 Adobe SVG Viewer。函数

SVG 使用 XML 编写。工具

SVG 实例

下面的例子是一个简单的 SVG 文件的例子。SVG 文件必须使用 .svg 后缀来保存：编码

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

查看例子（仅用于支持 SVG 的浏览器）spa

（如需查看 SVG 源代码，请打开此例，而后在窗口中右击。选择“查看源代码”。）

代码解释：

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是不是“独立的”，或含有对外部文件的引用。

standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有全部容许的 SVG 元素。

SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

SVG 的 <circle> 用来建立一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。若是忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。咱们把圆的轮廓设置为 2px 宽，黑边框。

fill 属性设置形状内的颜色。咱们把填充颜色设置为红色。

关闭标签的做用是关闭 SVG 元素和文档自己。

注释：全部的开启标签必须有关闭标签！

HTML 页面中的 SVG

SVG 文件可经过如下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。

使用 <embed> 标签

注释：当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法！然而，若是须要建立合法的 XHTML，就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签。

语法：

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

注释：pluginspage 属性指向下载插件的 URL。

使用 <object> 标签

注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 <object> 标签时 SVG 文件没法工做（至少不能在 IE 中工做）！

语法：

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

注释：codebase 属性指向下载插件的 URL。

使用 <iframe> 标签

语法：

<iframe src="rect.svg" width="300" height="100">
</iframe>

开发：

SVG是一个XML文件，用于XML编程的两种模型DOM和SAX也适用于它。由于SVG是被设计用于互联网，因此经过Javascript和DOM访问它就是最重要的应用模式。经过Javascript和DOM能够动态地修改HTML，一样也能够在浏览器中动态地建立、修改和删除图片。