开始学习svg
来源：互联网 发布：汽车诊断软件笔记本 编辑：程序博客网 时间：2024/06/07 03:18
一、要学习svg，首先要了解svg是什么
1. 向量图形与光栅图形的比较 在万维网历史的大部分时间里，浏览器显示的图形都是光栅格式的。在光栅图像（如 GIF 或 JPEG 图像）中，文件包含图像中每个像素的颜色值。浏览器读取这些值并做出相应行动。它仅认识到单独的部分，而没有整体概念。总的说来，这一系统有其优势，例如忠实再现摄影图像的能力，但它在某些情形下显得不足。例如，尽管浏览器能以不同大小显示一个图像，通常会产生锯齿边缘，在这些地方，浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值。此外，光栅文件格式的二进制性质使得难以（尽管不是不可能）基于数据库信息动态地创建图像，并且动画最多也仅限于“翻动书本”类型的动画，即快速连续地显示单独图像。向量图形，通过指定为确定每个像素的值所需的指令而不是指定这些值本身，克服了这些困难中的一部分。例如，向量图形不再为一个直径一英寸的圆提供像素值，而是告诉浏览器创建一个直径一英寸的圆，然后让浏览器（或插件）做其余事情。这消除了光栅图形的许多限制；使用向量图形，浏览器只要知道它必须画一个圆。如果图像需要以正常大小的三倍来显示，那么浏览器只要按正确的大小画圆而不必执行光栅图像通常的插入法。类似地，浏览器接收的指令可以更容易地与外部信息源（如应用程序和数据库）绑定，要对图像制作动画，浏览器只要接收有关如何操纵属性（如半径或颜色）的指令即可。
2. Web 上的向量图像
Web 上的第一个向量图像可能是虚拟现实标记语言（VRML）图像。VRML 寻求将 HTML 的简易性带到图像创建中来，然而尽管有一些示例给人以深刻的印象，但它的本来目的是为了 3D 造型，而且它太过复杂以至于从未真正流行起来。接着是 Macromedia Flash 的介入。Flash 电影是用 Macromedia 的 Flash 应用程序所创建，它允许创建相当复杂的动画，并且将动画与声音和交互性绑定在一起。因为 Flash 文件主要包含有关如何创建图像的指令，所以它们比传统的 Web 电影小得多（例如 QuickTime 电影）— 而且它们可以缩放。但是，Flash 文件仍然是二进制文件，这使得动态创建它们比较困难（尽管不是不可能）。而且对从浏览器可以进行的脚本编制有所限制。除了本文描述的svg之外，还有另外两种GML、VML基于XML的可用来描述矢量图，感兴趣的可以baidu一下。
3.用浏览器能不能浏览svg文件
相信大家看了前面的内容，已经知道了答案。由于目前浏览器没有集成svg，想要正常的浏览调试svg程序，就得安装相应的控件如SVGView。安装控件后可以就像浏览有flash的网站般浏览内嵌svg的网站和svg文件。
下面是一段内嵌svg文件的html文件：
<html>
<head><title>SVG Demonstration</title></head>
<body>
<h2 style="text-align: center">SVG Demonstration</h2>
<p>A page may have other code besides the SVG image.</p>
<object type="image/svg+xml" data="test.svg"
width="500" height="200">
<img src="NonSVG.gif" alt="SVG 图像的静态版本" />
</object>
<p>Using objects allows the browser to decide what to display.</p>
</body>
</html>
下面是test.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 xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="100"
fill="none" stroke="purple">
<animate attributeType="CSS" attributeName="stroke-width"
from="1" to="50" dur="500ms" repeatCount="indefinite" />
</rect>
<circle cx="400" cy="100" r="50" fill="red">
<animateMotion path="M0,300 S150,100 200,200 S400,400 500,0"
dur="500ms" repeatCount="indefinite" rotate="auto" />
</circle>
<circle cx="250" cy="100" r="50" fill="red">
<animateColor attributeType="CSS" attributeName="fill"
from="rgb(255,0,0)" to="rgb(0,0,255)" dur="8s"
repeatCount="indefinite"/>
</circle>
<rect x="333" y="49" width="50" height="50" fill="none"
stroke="purple">
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="3" additive="sum"
begin="3s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="translate" from="0,0" to="-222,-45" additive="sum"
begin="3s" dur="6s" fill="freeze" />
</rect>
<circle cx="250" cy="100" r="50" fill="red">
<set attributeName="r" to="100" begin="1s" dur="5s" fill="remove" />
</circle>
</svg>
- 开始学习svg
- Canvas-开始玩svg
- 学习SVG
- svg学习
- SVG 学习
- svg学习之svg动画
- IE9开始支持SVG格式
- SVG与perl SVG学习笔记
- SVG学习资源
- svg 模型操作学习
- SVG学习资料分享
- SVG学习要点
- svg基础学习笔记
- SVG基础学习
- HTML5 学习---------(SVG 基础)
- SVG滤镜学习
- svg学习笔记(一)
- HTML5学习(五)----SVG
- 在vc中实现获取汉字拼音的首字母（转载）
- 充分发掘Subversion的资源库共享功能
- 人工智能
- Windows下架设Subversion服务器
- ORACLE常用日期转换处理
- 开始学习svg
- 2008年05月24日---我的软件设计师考试
- C#中的文件操作（读取文件与写入文件）
- 修改My Eclipse的workspace
- LPSTR LPCSTR LPWSTR LPCWSTR PSTR的区别
- 十个习惯让你精通新的开发技术
- ASP.net页面的执行过程
- 纪念512地震遇难者
- asp技术问题
