没有合适的资源?快使用搜索试试~ 我知道了~
svg教程,可伸缩矢量图形
4星 · 超过85%的资源 需积分: 5 15 下载量 106 浏览量
2008-12-05
00:52:07
上传
评论
收藏 243KB DOC 举报
温馨提示
试读
27页
什么是SVG? •SVG 指可伸缩矢量图形 (Scalable Vector Graphics) •SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 •SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 •SVG 是万维网联盟的标准 •SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
资源推荐
资源详情
资源评论
SVG 教程
SVG 意为可缩放矢量图形(Scalable Vector Graphics)。
SVG 使用 XML 格式定义图像。
在我们的 SVG 教程中,你将学习 SVG 的相关知识。
开始学习 !
SVG 实例
通过实例学习 !
实例
SVG 参考手册
在 ,我们为您提供完整的 参考手册,其中列出了所有 推荐标准(
)中的 的元素。
参考手册
SVG 简介
SVG 是使用 XML 来描述二维图形和绘图程序的语言。
学习之前应具备的基础知识:
继续学习之前,你应该对以下内容有基本的了解:
基础
如果希望首先学习这些内容,请在本站的首页选择相应的教程。
什么是 SVG?
指可伸缩矢量图形
用来定义用于网络的基于矢量的图形
使用 格式定义图形
图像在放大或改变尺寸的情况下其图形质量不会有所损失
是万维网联盟的标准
与诸如 和 之类的 标准是一个整体
SVG 的历史和优势
在 !!年一月,被确立为 标准。
参与定义 的组织有:太阳微系统、"#、苹果公司、$%以及柯达。
与其他图像格式相比,使用 的优势在于:
可被非常多的工具读取和修改(比如记事本)
与 &'(和 $)图像比起来,尺寸更小,且可压缩性更强。
是可伸缩的
图像可在任何的分辨率下被高质量地打印
可在图像质量不下降的情况下被放大
图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
可以与 &*技术一起运行
是开放的标准
文件是纯粹的
的主要竞争者是 )。
与 )相比,最大的优势是与其他标准(比如 和 )相兼容。而 )则是未开源的私
有技术。
目前,不是所有的浏览器都支持 ,这也是 普及的最大障碍。+、),-和 都支
持 ,而微软也计划这么做。
编辑器的数量正在增长,"#*.也支持 。
查看支持 的软件和服务
目前,只有安装插件(比如 "#/)才能查看 文件。
查看 SVG 文件
如果你使用的浏览器不支持 文件,就需要下载并安装 查看器。
注意:),-.和 0天生就支持 。如果你使用这些浏览器中任何的一款,那么恭喜你,
你不需要下载 查看器了。
从 "# 下载免费的 查看器 。 *1*/
SVG 一个例子
SVG 使用 XML 编写。
SVG 实例
下面的例子是一个简单的 文件的例子。文件必须使用 *1后缀来保存:
<?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>
查看例子(仅用于支持 的浏览器)
(如需查看 源代码,请打开此例,然后在窗口中右击。选择“查看源代码”。)
代码解释:
第一行包含了 声明。请注意 #属性!该属性规定此 文件是否是“独立的”,或含有
对外部文件的引用。
#233意味着 文档会引用一个外部文件 4在这里,是 文件。
第二和第三行引用了这个外部的 。该 位于
“566////166666*1##7。该 位于 ,含有所有允许的
元素。
代码以 8*19元素开始,包括开启标签 8*19和关闭标签 86*19。这是根元素。/#和
1属性可设置此 文档的宽度和高度。*属性可定义所使用的 版本,-:属性
可定义 命名空间。
的 89用来创建一个圆。-和 ;属性定义圆中心的 -和 ;坐标。如果忽略这两个属性,那
么圆点会被设置为 !<!。属性定义圆的半径。
=和 =4/#属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 -宽,黑边框。
>属性设置形状内的颜色。我们把填充颜色设置为红色。
关闭标签的作用是关闭 元素和文档本身。
注释:所有的开启标签必须有关闭标签!
HTML 页面中的 SVG
SVG 文件可通过以下标签嵌入 HTML 文档:<embed>、<object> 或者 <iframe>。
HTML 页面中的 SVG
下面,你会看到三种把 文件嵌入 页面的不同方法。
使用 <embed> 标签
8:#9标签被所有主流的浏览器支持,并允许使用脚本。
注释:当在 页面中嵌入 时使用 8:#9标签是 "#/推荐的方法!然而,
如果需要创建合法的 ,就不能使用 8:#9。任何 规范中都没有 8:#9标签。
语法:
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
注释:?11属性指向下载插件的 @A。
使用 <object> 标签
8B9标签是 C的标准标签,被所有较新的浏览器支持。它的缺点是不允许使用脚本。
注释:假如您安装了最新版本的 "#/,那么当使用 8B9标签时 文件无法工
作(至少不能在 $(中工作)!
语法:
<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
注释:#属性指向下载插件的 @A。
使用 <iframe> 标签
8,:9标签可工作在大部分的浏览器中。
语法:
<iframe src="rect.svg" width="300" height="100">
</iframe>
我期望....
如果仅仅通过引用 的命名空间,就能够把 元素之间添加到 代码中,那就太棒了,这像
这样:
<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>
SVG 形状
SVG 有一些预定义的形状元素,可被开发者使用和操作。
有一些预定义的形状元素,可被开发者使用和操作:
矩形 89
圆形 89
椭圆 89
线 89
折线 8;9
多边形 8;19
路径 89
下面的章节会为您讲解这些元素,首先从矩形元素开始。
剩余26页未读,继续阅读
资源评论
- 拼搏最美2012-07-18该教程很基础,对初学者很有用!
ice_u
- 粉丝: 6
- 资源: 20
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功