SVG：用代码创建图像（转） -

kapasky

浏览: 7844 次
性别:
来自: 重庆

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

SVG：用代码创建图像（转）

博客分类：

浏览器 Adobe XML CSS Flash

简介

    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名字空间，这种方式是功能最强大，最具有灵活性，我们在以后的文章里将详细探讨。

    下面，就让我们来看几个SVG的例子:

    基本形状

    和其它矢量化图形工具一样，SVG也有一些预定义的基本形状可供我们直接使用，这些基本形状称为元素，就象HTML文档中的table元素一样，下面是SVG标准里预先定义好的基本形状元素:

矩形<rect>
圆形<circle>
椭圆<ellipse>
直线<line>
折线<polyline>
多边形<polygon>
描绘路径<path>

    <rect>

    <rect>标记允许你创建矩形或它的变体，比如正方形，圆角矩形等，下面就让我以一个例子来看看：
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">
4. <rect x="80" y="53" width="189" height="52"
      style="fill:rgb(39，44，231); stroke:rgb(0，0，128); stroke-width:1"/>
5. </svg>
    上面的代码的第4行定义了一个矩形，以一个<rect>标记开始，定义了矩形的各个属性，x属性定义了矩形距浏览器左边的位置，y属性定义了矩形距浏览器上边的位置，换个角度考虑，就相当于html中元素的left和top属性，width和height属性定义了矩形的宽度和高度，style属性允许我们定义SVG推荐标准支持的CSS样式属性，有许多CSS属性是专门针对SVG的，上面的例子中，fill属性定义了长方形的填充颜色，这里采用的是rgb的格式，SVG也支持颜色名和16进制的颜色格式.比如:fill:red或fill:#ff0000，stroke属性定义边框线，SVG中，如果不定义，边框线没有任何宽度，换句话说，SVG默认边框线宽度为0，对所有的SVG的形状都是这样的。如果需要定义边框线的话，采用这样的确语法格式:stroke:rgb(0，0，128)定义颜色，stroke-width:1定义宽度，我门还可以改变填充颜色的透明度，可以这样写:fill-opacity: 0.1，透明度范围是从0到1，我们也可以定义整个元素的透明度，opacity:0.5，该透明度对填充和边框线都有效，也可以单独定义边框线的透明度:stroke-opacity:0.8。定义圆角矩形，使用rx，ry属性定义圆角的半径:rx="20" ry="20"
    例如：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="300">
    <rect x="0" y="0" rx="20" ry="20"
         width="289" height="252"
         style="fill:olive; stroke:purple; stroke-width:5"/>
</svg>

    <line>

    <line>通过指定开始点(x1，y1)、结束点(x2，y2)和宽度stroke定义一条直线，语法如下:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="300">
<line x1="127" y1="65" x2="127" y2="200"
       style="stroke:rgb(0，0，0);stroke-width:2"/>
</svg>
    要想得到很细的线，可以指定stroke-width为大于0小于1的数值。

    <circle>

    SVG中，要定义一个圆，只需要指顶圆心的坐标、半径即可，也可以使用样式单属性定义外观的样式：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="400">
    <circle cx="143" cy="163" r="84"
       style="fill:rgb(192，192，255); stroke:rgb(0，0，128); stroke-width:1"/>
</svg>

    <ellipse>

    定义椭圆和定义圆很相象，指定圆心，X，Y轴的半径即可：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="400">
    <ellipse cx="160" cy="163" rx="101" ry="81"
       style="fill:rgb(192，192，255);stroke:rgb(0，0，128);stroke-width:1"/>
</svg>

    <polygon>

    这个标记用来指定连续的点的坐标来，定义多边形。语法如下：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
    <polygon points="223.5，123.034 276，213.966 171，213.966"
       style="fill:rgb(126，14，83);stroke:rgb(0，0，128);stroke-width:1"/>
</svg>

    在SVG中，允许使用浮点数来达到精确控制，这和以前的HTML不一样。

    <polyline>

    这个标记通过指定各个点的坐标，来定义一条折线，格式如下：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<polyline points="100，200 100，20 10，200 100，20"
    style="stroke:rgb(64，64，64);stroke-width:1"/>
</svg>

    <path>

    <path>标记是SVG中最复杂的，它创建最复杂的形状，也是最有用、用的最多的，
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<path d="M10 20 L110 20 L110 120 L10 120"
    style="fill:rgb(0，0，153);fill-opacity:0.5;stroke:rgb(0，0，153);stroke-width:4"/>
</svg>
    <path>标记的d属性用来描述下面要画的是多类型的形状，M10 20表示画笔移动到点10，20，L110 20表示从当前点画一条线到坐标110，20等，由于path标记采用的格式很复杂，因此，可以画出很复杂的形状，下面的语句在浏览器上画一个螺旋线：
<path d="M156 334 C153.239 334 151 334 151 334 C151
          339.523 153.239 344 156 344 C164.284 344 171 339.523 171 334 C171 322.954
          164.284 314 156 314 C142.193 314 131 322.954 131 334 C131 350.568 142.193
          364 156 364 C175.33 364 191 350.568 191 334 C191 311.909 175.33 294 156
          294 C131.147 294 111 311.909 111 334 C111 361.614 131.147 384 156 384
          C186.375 384 211 361.614 211 334 C211 300.863 186.375 274 156 274"
          style="fill:none;stroke:darkgreen;;stroke-width:2"/>
    下面是path标记的d属性使用的命令，注意：大写表示绝对位置，小写表示相对位置：

M = 移动
L = 画直线
H = 水平画线
V = 垂直画线
C = 画曲线
S = 画平滑曲线
Q = 画贝塞尔曲线
T = 画平滑贝塞尔曲线
A = 画圆弧
Z = 关闭路径的描绘

    由于描绘路径比较复杂，建议使用画图工具包来生成，比如：Jasc公司的WebDraw，但要动态控制图像，你必须清楚你的每句代码都是做什么的。目前支持SVG的编辑器也开始出现，你可以利用XML SPY来创作您的SVG图象了，SWF格式的Flash也可以转换成SVG格式（http://www.ep.cs.nott.ac.uk/projects/SVG/flash2svg/），Bitmap转换成SVG(http://padc23.padc.mmpc.is.tsukuba.ac.jp/member/morik/fdssvg/)，CorelDraw的SVG滤镜下载（http://venus.corel.com/nasapps/DrawSVGDownload/index.html），Adobe Illustrator 10可以直接生成SVG格式的图象文件。
    到目前为止，我们已经可以做出比较复杂的图像了，但还不够生动，要做出更加复杂的图象，我们也可以在SVG里使用滤镜效果，就象在Adobe PhotoShop和Micromidea FireWorks里的那样，这将在以后的文章里陆续介绍。
    为了查看本文章的例子，您必须安装Adobe SVG plug-in(http://www.adobe.com/svg/)或安装Microsoft Internet Explorer 5.5以后的版本的浏览器。要看到更多的SVG的例子，访问http://lucky.myrice.com。

分享到：