没有合适的资源?快使用搜索试试~ 我知道了~
SVG可缩放矢量图形教程
5星 · 超过95%的资源 需积分: 12 18 下载量 64 浏览量
2013-08-31
23:18:12
上传
评论
收藏 833KB PDF 举报
温馨提示
试读
45页
SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C(World Wide Web ConSor—tium国际互联网标准组织)在2000年8月制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。
资源推荐
资源详情
资源评论
我应该学习这个教程吗?
第 1 页(共
3 页)
本教程辅助开发人员理解可伸缩向量图形()背后的概念以将它们作为静态文档或动态生成的内
容创建。
XML 经验不是必需的,但熟悉至少一种标记语言(如 HTML)是有用的。有关基本的 XML 信
息,请参阅教程 Introduction to XML 。在本教程的结束部分的单个脚本编制示例中用到了
JavaScript,不过相当简单。
本教程的内容
第 2 页(共
3 页)
可伸缩向量图形(SVG)使得用文本指定出现在页面上的图像成为可能。例如,传统图形需要
指定矩形的每一个像素,而 SVG 只要说明矩形存在,并指出它的大小、位置和其它属性即可。
它的好处有很多,包括轻松地从数据库信息生成图形(如图或图表)的能力,以及向图形添加动
画和交互性的能力。
本教程演示了构建 SVG 文档必需的概念,如基本形状、路径、文本和绘制模型,还有动画和
脚本编制。
关于作者
第 3 页(共
3 页)
Nicholas Chase 曾参与了 Lucent Technologies、Sun Microsystems、Oracle 和 Tampa
Bay Buccaneers 等公司的网站开发。Nick 曾经当过高中物理教师、低级放射性废物设施经
理、在线科幻杂志编辑、多媒体工程师以及 Oracle 讲师。最近,他担任过位于美国佛罗里达
州 Clearwater 的 Site Dynamics Interactive Communications 的首席技术官,他还写
了三本有关 Web 开发的书,包括 Java and XML From Scratch(Que)。他喜欢倾听读者
的意见,可以通过 nicholas@nicholaschase.com 与他联系。
向量图形与光栅图形的比较
第 1 页(共
5 页)
在万维网历史的大部分时间里,浏览器显示的图形都是光栅格式的。在光栅图像(如 GIF 或
JPEG 图像)中,文件包含图像中每个像素的颜色值。浏览器读取这些值并做出相应行动。它仅
认识到单独的部分,而没有整体概念。
总的说来,这一系统有其优势,例如忠实再现摄影图像的能力,但它在某些情形下显得不足。例
如,尽管浏览器能以不同大小显示一个图像,通常会产生锯齿边缘,在这些地方,浏览器不得不
为那些在原始图像中不存在的像素插入或猜测数值。此外,光栅文件格式的二进制性质使得难以
(尽管不是不可能)基于数据库信息动态地创建图像,并且动画最多也仅限于“翻动书本”类型的
动画,即快速连续地显示单独图像。
向量图形,通过指定为确定每个像素的值所需的
指令
而不是指定这些值本身,克服了这些困难中
的一部分。例如,向量图形不再为一个直径一英寸的圆提供像素值,而是告诉浏览器创建一个直
径一英寸的圆,然后让浏览器(或插件)做其余事情。
这消除了光栅图形的许多限制;使用向量图形,浏览器只要知道它必须画一个圆。如果图像需要
以正常大小的三倍来显示,那么浏览器只要按正确的大小画圆而不必执行光栅图像通常的插入
法。类似地,浏览器接收的指令可以更容易地与外部信息源(如应用程序和数据库)绑定,要对
图像制作动画,浏览器只要接收有关如何操纵属性(如半径或颜色)的指令即可。
Web 上的向量图像
第 2 页(共
5 页)
Web 上的第一个向量图像可能是虚拟现实标记语言(VRML)图像。VRML 寻求将 HTML 的
简易性带到图像创建中来,然而尽管有一些示例给人以深刻的印象,但它的本来目的是为了 3D
造型,而且它太过复杂以至于从未真正流行起来。
接着是 Macromedia Flash 的介入。Flash 电影是用 Macromedia 的 Flash 应用程序所创
建,它允许创建相当复杂的动画,并且将动画与声音和交互性绑定在一起。因为 Flash 文件主
要包含有关如何创建图像的指令,所以它们比传统的 Web 电影小得多(例如 QuickTime 电
影)— 而且它们可以缩放。
但是,Flash 文件仍然是二进制文件,这使得动态创建它们比较困难(尽管不是不可能)。而
且对从浏览器可以进行的脚本编制有所限制。
使用文本定义图像
第 3 页(共
5 页)
可伸缩向量图形通过使用 XML 定义图像、动画和交互性解决了这些问题中的许多问题。浏览
器读取(或者更准确地说,浏览器的插件读取)这些基于文本的指令,然后执行这些指令。例如,
一个简单的 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="100" xmlns="http://www.w3.org/2000/svg">
<rect x="25" y="10" width="280" height="50"
fill="red" stroke="blue" stroke-width="3"/>
</svg>
这个文档指示浏览器创建一个矩形,并提供属性信息,如位置(x, y)、大小(height, width)、
颜色(fill, stroke)和线宽(stroke-width)。(全部文档在基本 SVG 文档中讨论。)
动画和交互性
第 4 页(共
5 页)
因为这一结构,SVG 非常适合于动画和交互性。要更改图形元素的大小、位置或颜色,脚本只
要调整相应的属性即可。
事实上,SVG 有为事件处理而专门设计的属性(很象 HTML),甚至还有特别适合于动画的元
素。例如,下面这一文档创建一个在 8 秒期间沿一条特定路线来回移动并无限重复的棍状图形:
<?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="500" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- Box around the image -->
<rect x="1" y="1" width="498" height="298"
fill="none" stroke="blue" stroke-width="2" />
<!-- Visible path -->
<path d="M0,300 S150,100 200,200 S400,400 500,0"
fill="none" stroke="red" stroke-width="2" />
<!-- Group of elements to animate -->
<g stroke-width="5" stroke="black">
<!-- Stick figure pieces -->
<circle cx="0" cy="-45" r="10" fill="black"/>
<line x1="-20" y1="-30" x2="0" y2="-25"/>
<line x1="20" y1="-30" x2="0" y2="-25"/>
<line x1="-20" y1="0" x2="0" y2="-10"/>
<line x1="20" y1="0" x2="0" y2="-10"/>
<line x1="0" y1="-10" x2="0" y2="-45"/>
<!-- Animation controls -->
<animateMotion path="M0,300 S150,100 200,200 S400,400 500,0"
dur="8s" repeatCount="indefinite"
rotate="auto" />
</g>
</svg>
因为这完全基于指令,所以一个不是艺术家的人(象本教程的作者)即使不能创造真正的艺术,
也可以创建基本的图形和动画。
动态创建图形
第 5 页(共
5 页)
SVG 基于文本的性质也允许轻松地“实时”创建图形,因为生成图形只不过是将正确的值输出到
页面而已。例如,正象 Java servlet、ASP 页面或 CGI 脚本能从数据库输出数值一样,SVG
可以输出图表或图。下面的图像显示了一个既含有 HTML 表中的纯文本数据又含有 SVG 版本
数据的 HTML 页面:
创建这个 SVG 的服务器端应用程序和创建 HTML 表的一样,而且使用相同数据(缩放 1000
倍以适应页面):
<?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="500" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- Box around the image -->
<rect x="0" y="25" width="450" height="120"
fill="none" stroke="blue" stroke-width="2" />
<!-- Headers -->
<text x="15" y="50">Home page</text>
<text x="15" y="75">Product info</text>
<text x="15" y="100">Contact us</text>
<text x="15" y="125">Technical support</text>
<!-- Chart elements -->
<g fill="yellow" stroke="red" stroke-width="3">
<rect x="150" y="40" height="15" width="273.993"/>
<rect x="150" y="65" height="15" width="99.932"/>
剩余44页未读,继续阅读
资源评论
- JingXQ2015-04-12很好的学习资源
YANGJJZZ
- 粉丝: 0
- 资源: 6
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功