开始学习svg

最新推荐文章于 2024-06-20 23:01:49 发布

pughua

最新推荐文章于 2024-06-20 23:01:49 发布

阅读量824

点赞数

文章标签：浏览器图形 flash xml html 数据库

本文链接：https://blog.csdn.net/pughua/article/details/2477950

版权

一、要学习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>

width="500" height="200">

</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">

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>