HTML5: SVG （可缩放矢量图形）

ylbtech-HTML5: SVG （可缩放矢量图形）

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

1. SVG返回顶部

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

查看 SVG 文件

Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。

IE8和早期版本都需要一个插件 - 如Adobe SVG浏览器，这是免费提供的。

创建SVG文件

由于SVG是XML文件，SVG图像可以用任何文本编辑器创建，但它往往是与一个绘图程序一起使用，如Inkscape，更方便地创建SVG图像。

2. 历史和优势返回顶部

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

参与定义 SVG 的组织有：Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达。

与其他图像格式相比，使用 SVG 的优势在于：

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

SVG 的主要竞争者是 Flash。

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

3. 背景返回顶部

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

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

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

4. 图形格式返回顶部

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能够得到更迅速的开发和应用。

5. 格式优势返回顶部

1．基于可扩展标记语言（外语缩写：XML）

为了保证网络图像能够顺利地和目前已经由W3C开发的DOM1，DOM2，CSS，XML，XPointer，XSLT，XSL，SMIL，HTML，XHTML技术，以及其他标准化技术，如ICC，URI，UNICODE，RGB，ECMAScript/JavaScript，Java协调一致，SVG是完全基于可扩展标记语言，并能和上述各项技术相融会的新一代的网络图像格式。SVG并非仅仅是一种图像格式，由于它是一种基于XML的语言，也就意味着它继承了XML的跨平台性和可扩展性，从而在图形可重用性上迈出了一大步。如SVG可以内嵌于其他的XML文档中，而SVG文档中也可以嵌入其他的XML内容，各个不同的SVG图形可以方便地组合，构成新的SVG图形。目前最常用的SVG查看工具有Adobe公司的Adobe SVG Viewer 3.03。

SVG-Edit 是一个基于浏览器的图像编辑器，可进行常用的一些图像处理功能，无需服务器端支持，支持各种浏览器。如下图：

2．采用文本来描述对象

SVG包括3种类型的对象：矢量图形(包括直线、曲线在内的图形边)、点阵图像和文本。各种图像对象能够组合、变换，并且修改其样式，也能够定义成预处理对象。

与传统的图像格式不同的是，SVG采用文本来描述矢量化的图形，这使得SVG图像文件可以像HTML网页一样有着很好的可读性。当用户用图像工具输出svG后，可以用任何文字处理工具打开SVG图像，并可看到用来描述图像的文本代码。掌握了SVG语法的人甚至可以只用一个记事本便可以读出图像中的内容来。

SVG文件中的文字虽然在显示时可呈现出各种图像化的修饰效果，但却仍然是以文本的形式存在的，可以选择复制、粘贴。由于SVG内的文字都以文本的形式出现在XML文件中，这些信息可以为搜索引擎所用，而以往搜索引擎通常无法搜索到写在点阵图像中的文字。这些文本信息还可以帮助视力有残疾而无法看到图形的人，可以通过其他方式(如声音)来传送这些信息。

3．具有交互性和动态性

由于网络是动态的媒体，SVG要成为网络图像格式，必须要具有动态的特征，这也是区别于其它图像格式的一个重要特征。SVG是基于XML的，它提供无可匹敌的动态交互性。你可以在SVG文件中嵌入动画元素(如运动路径、渐现或渐隐效果、生长的物体、收缩、快速旋转、改变颜色等)，或通过脚本定义来达到高亮显示、声音、动画等效果。

4．完全支持DOM

DOM(Document Object Model文档对象模型)是一种文档平台，它允许程序或脚本动态的存储和上传文件的内容、结构或样式。由于SVG完全支持DOM，因而SVG文档可以通过一致的接口规范与外界的程序打交道。SVG以及SVG中的物件元素完全可以通过脚本语言接受外部事件的驱动，例如鼠标动作，实现自身或对其他物件、图像的控制等。这也是电子文档应具备的优秀特性之一。

6. SVG 比较优势返回顶部

首先简要解释一下矢量图像格式和位图图像格式的区别。矢量图像用点和线来描述物体，所以文件会比较小，同时也能提供高清晰的画面，适合于直接打印或输出。而位图图像的存储单位是图像上每一点的像素值，因此一般的图像文件都很大，会占用大量的网络带宽。SVG是一种矢量图形格式，GIF、JPEG是光栅文件格式。有了两者的概念后，SVG较GIF、JPEG的优势显而易见。

1．任意放缩。

用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。

2．文本独立。

SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。

3．较小文件。

总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。

4．超强显示效果

SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。

5．超级颜色控制。

SVG图像提供一个1 600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。

6．交互X和智能化。

SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题，另一个问题就是SVG的本地运行环境下的厂家支持程度。

7. 开发返回顶部

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

8. HTML5内联返回顶部

SVG 优势

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

SVG 图像可通过文本编辑器来创建和修改

SVG 图像可被搜索、索引、脚本化或压缩

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。Internet Explorer 8或更早版本，可通过安装Adobe SVG Viewer以支持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="网址">

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

</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 元素和文档本身。

SVG实例

世界地图SVG：

9. 手机上的应用返回顶部

由于SVG是基于XML的，因而能制作出空前强大的动态交互图像。即SVG图像能对用户动作做出不同响应， 例如高亮、声效、特效、动画等。作为SVG技术的一个应用，SVG在手机等无线手持设备上的应用将是3G时代最重要的应用之一。支持SVG的手机，允许用户查看高质量的矢量图形及动画，同时，由于SVG采用文本传输，尺寸也会非常小，速度将会更快。目前，市面上已经有100多款智能手机提供此服务，其中包括诺基亚、摩托等巨头的产品，由此可见，SVG手机将成为3G时代的一个最重要的市场制高点，也将是国内手机厂商应对和超越海外兵团的一个突破口。

SVG支持的手机清单

Motorola: C975, C980, E770V, E1000, i870, V3X, V975, V980, V1050，em30，E8，zn5

NEC: V703N, V802N

Nokia: 3250, 5500 Sport, 6265, 6233, 6234, 6280, 6282, 7370, 7710, E60, E61, E70, N70, N71, N72, N73, N80, N90, N91, N92, N93

Panasonic: MX6, MX7, SA6, SA7, VS3, VS7

Sagem : my-X8, my-V76, my-V85

Samsung: D600, E350, Z300, Z500, ZV10, ZV30

Sanyo : S750

Sharp : V501SH, V601SH, V602SH, V603SH, V604SH, V703SH, V703SHf, 802, V804SH, 902, V903SH, V904SH

Siemens : C65, C70, C75, CF65, CFX65, CL75, CX65, CX70, CX70 Emoty, CX75, M65, M75, S65, S75, SF65, SL65, SL75, SK65, SP65

Sony Ericsson: D750, F500, K300, K310, K500, K508, K510, K600, K608, K610, K700, K750, K790, K800, M600, P990, S600, S700, S710, V600, V800, W300, W550, W600, W700, W710, W800, W810, W850, W900, W950, Z500, Z520, Z530, Z550, Z710, Z800

Toshiba: TS 803, TS 921, V902T, V903T

更多详细列表，请访问W3C网站.

10.返回顶部

1、百度百科

https://baike.baidu.com/item/SVG/63178

2.1、w3cschool

http://www.w3school.com.cn/svg/index.asp

2.2、runoob

http://www.runoob.com/svg/svg-inhtml.html

3、资源

http://www.html5tricks.com/tag/svg/

4、Mozilla

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/svg

5、走进SVG

https://www.imooc.com/learn/143

---------------------------------------------------------

6、

1、在线编译器

1.1、

https://c.runoob.com/more/svgeditor/

1.2、

http://www.86y.org/demo/svg/

2、

11. 五款超实用的开源SVG工具返回顶部

五款超实用的开源 SVG工具发表于2013-04-13 13:05| 次阅读| 来源CSDN| 0 条评论| 作者夏梦竹SVGBatikApache InkscapeCairoGraphviz开源摘要：SVG是基于XML的矢量图像格式，用户可灵活运用图像进行搜索、索引、脚本以及压缩。本文分享5款超实用的开源的SVG工具，希望对你有所帮助。

SVG（Scalable Vector Graphics）是基于XML的矢量图像格式，用户可灵活运用图像进行搜索、索引、脚本以及压缩。SVG由W3C制定开发，是一个开放标准，支持当前主流浏览器包括Firefox、IE9-10、Chrome、Safari以及Opera。

SVG支持三种图像类型：矢量图像、嵌入式外部图像以及文字。图形对象包括PNG、JPEG和SVG格式，用户可根据自己的喜好轻松使用XML文本文件进行修改，因此使用文本编辑成为创建SVG图像的重要方法之一。由于这种格式得到主流浏览器的支持，越来越多的产品开始倾向开源。

本文我们将分享5款超实用的开源的SVG工具：

1. SharpVectorGraphics （SVG）

SVG是基于Microsoft .Net开源项目设计而来，是建立在.Net framework上使用SVG的一款应用，支持生成、操作以及可查看，该项目旨在赋予一组核心模块，开发人员可创建基金会来支持特定的SVG解决方案。

2. Cairo

Cairo是一款2D图像库能够安装、填充cubic Bézier曲线，转换和合成半透明图像，通过绘图操作进行文字渲染，可以转换任何仿射变换（缩放、旋转、剪切等）。

3. Graphviz

Graphviz是一款可视化的图形软件，支持SVG、PDF和Postscript，显示交互式的图形浏览器，此外，该工具擅长抽象图形和网格，具备多种实用的特性涵盖具体的图表功能如颜色、字体、表格节点布局、线型样式、超链接、滚动以及自定义形状。

4. Inkscape

Inkscape是一款开源的矢量图形编辑器，支持可缩放的SVG1.1版，支持Mac OSX，Unix OS以及Microsoft Windows系统。

Inkscape中的对象可进行伪射转换（移动，旋转、缩放、倾斜以及可配置的矩阵），该对象可进行分组、克隆；Inkscape支持多行文本（SVG’s <text>元素）和流动文本（非标准<flowRoot> 元素，此前提出的SVG 1.2版）。

Inkscape兼容多种格式，不仅支持其原生格式SVG，还有PS、 EPS、PD、AI (Adobe Illustrator)以及raster格式。

5. Apache Batik

Batik是由Apache软件基金会开源的一款工具。

该工具使用Java编写，几乎完全支持SVG 1.1，此外，其他一些功能还将被纳入到SVG 1.2原始计划中。

除了能为PNG输出查看器和光栅化程序，Batik还支持完美的打印SVG文件格式以及TrueType-to-SVG-Font字体转换，用户还能将SVG转换成PDF格式。

https://www.aliyun.com/zixun/content/3_15_469315.html

作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。