什么是SVG网页矢量图

时间 2019-12-04

标签什么 svg 网页矢量栏目 HTML 繁體版

原文原文链接

SVG (Scalable Vector Graphics)表明可升级矢量图象，是新一代图象格式的标准。它给 Web开发人员提供了一种利用 XML(Extensible Markup Language)建立静态图像和动态图像的方法，是图象技术上的一次革命。利用此技术，Web开发人员对页面进行更加精确的控制，SVG的动画片技术能够实现从简单的直线运动到复杂的3D螺旋变形的控制.
SVG 有许多其余图像方法所不具备的优势，下面就是其中一些：
1，和其它媒介兼容，好比无线设备等。
2，可升级的服务器端解决方案。
3，文件尺寸小，方便Web页面下载。
4，无限的颜色和字体的选择。
5，图像可任意缩放。
6，能够用脚本控制与客户的交互事件。
7，方便浏览器进行高清晰的打印。
8，可以使用滤镜效果。
9，基于文本的格式，能够轻松地和其它WEB技术集成。
10，内建的国际语言支持。
11，减小维护成本。
12，轻松升级。
13，普遍的多媒体兼容性。
因为 SVG 和Flash有不少共同的特性，一般有人把它们放到一块儿进行比较，确实，二者都和其它标准有很好的兼容性。事实上，SVG比Flash 有一些独特的特性。SVG可使用CSS（Cascading Style Sheets）、Script脚本和 DOM（Document Object Model ），是彻底公开源代码的技术，初学者彻底能够从别人的现成的做品中进行学习。而Flash采用的是独有的专利技术，并非彻底开放的标准，当你在场景上单击右键时，你看到的不是源代码。
然而，因为某些缘由，SVG还并无象Flash那样流行，但随着时间的推移，SVG也将很快流行起来的。Mozilla计划彻底支持SVG技术，Microsoft也开始支持这种技术，（其实，IE6已经支持SVG。）Adobe GoLive5也宣布支持SVG。此外，SVG编辑器也开始在网络上风行，Jasc的 WebDraw 已经能够以可视化的方式建立SVG格式的图像了。Adobe 也有生成SVG格式图象的插件。SVG的将来不可是光明的，并且将会在不久的未来在Web领域扮演重要的角色。
目前，SVG的另外一个不足之处就是，没有一个浏览器彻底支持它，要浏览SVG格式的图像，须要安装Adobe SVG插件（plug-in），但目前它也不能彻底支持SVG的标准。另外一个缺陷就是， SVG的在线资料太少，Web开发人员很难找到可参考的资料和素材。
下面。就让咱们来了解一下SVG的基本概念，SVG的特性是不少的，这里不能所有罗列出来，咱们只是先初步感觉一下SVG可以给Web开发人员带来什么.
什么是SVG?

SVG是设计和编程之间的桥梁，与传统的图像制做方法不一样，SVG图像是由程序代码生成的，这种语言是基于XML的，所以，它能够和W3C的其它标准无缝集成，好比DOM，CSS等。
为了便于理解，咱们能够把浏览器想象成一个空的画布，上面定义了许许多多的X，Y的坐标点，画布上的每个点，均可以经过数学计算公式创造出一个形体。使用数学的术语可能会令人产生恐惧感，事实上，Web开发者在建立HTML页面时一直在使用这样的数学计算公式已经好长时间了，例如：一个CSS的层，经过设定层的top（y坐标点）和left（x坐标点）属性值，就能够定位它的位置，这就是利用数学公式来实现。SVG就是利用相似的原理来建立图像的。
SVG可以显示24位颜色的图像，而图像尺寸却很是的小，图像在放大或改变尺寸时不会有任何质量上的损失，更重要的是，SVG的每个元素和元素的每个属性都可以动态进行改变。这也是SVG最有竞争力的一面。
SVG的文档结构

SVG能够有许多方式来组成Web文档：能够以独立的SVG页面；能够嵌入到页面中；也能够被一个带名字空间的XHTML文档使用，这一点就象XML文档类似.下面先看看独立的SVG页面的例子：
1. <?xml version="1.0" standalone="no"?>
2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
" http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd ">
3. <svg width="300" height="300" x="0" y="0">
4. 
5. </svg>
下面咱们对上面的代码作一个说明:
第一行：因为SVG是XML的一个应用分支，所以，它也必须符合XML的标准，必须包含XML的声明<?xml version="1.0" standalone="no"?>
第二行：SVG必须遵循必定的标准或规则，这些标准或规则保存在一个被称为Document Type Declaration或DTD的独立文件，来验证SVG文档结构的正确性，DTD精确描述SVG中容许使用的语言和语法规则。
第三行：<svg>标记告诉浏览器，这是一个SVG文档，SVG文档的做用范围（或叫作SVG的画布大小）用height和 width属性来定义，若是不定义 width和height属性的话，画布的范围将是整个浏览器，x，y属性告诉浏览器将SVG画布放到什么位置，x属性与咱们日常所用top属性相同，指浏览器的top位置，y属性等同于浏览器的left位置，固然，这里也可使用相对位置来定位，即百分比。
第四行：全部的SVG内容，都被放到<svg></svg>标记之间，
第五行：因为SVG是XML的一个应用，所以，必须有结束标记</svg>来结束文档。

也能够把SVG嵌入到HTML或XHTML文件里：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Object 和 Embed 测试</title>
</head>
<body>
<object data="test.svg" width="500" height="500" type="image/svg+xml">
<embed src="test.svg" width="500" height="500" type="image/svg+xml" />
</object>
</body>
</html>
上面的文件是一个完彻底全的HTML结构的文档，最重要的标记是object和embed两个，固然，这是对Internet Explorer 和Netscape两种状况的，值得注意的是：object采用data属性指明SVG文件的URL地址，而embed采用src属性来指明SVG文件的 URL。
这种方法的优势就是：它能够把HTML和XHTML和SVG的长处结合在一块儿，例如：能够提升页面被搜索引擎搜索到的机会，能够轻易地添加声音或音乐，（Adobe plug-in支持mp3和wav文件）。
第3个方法就是：利用XML名字空间，这种方式是功能最强大，最具备灵活性，咱们在之后的文章里将详细探讨。