SVG 矢量图形

Svg: Scalable Vector Graphics

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。

特性及优点

1 用来定义用于网络的基于矢量的图形

2 使用 XML 格式定义图形

3 图像在放大或改变尺寸的情况下其图形质量不会有所损失

4 是万维网联盟的标准

5 与诸如 DOM和 XSL 之类的W3C标准是一个整体

6 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。

7 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)

8 可以与 Java 技术一起运行

9 是开放的标准

10 文件是纯粹的 XML

11 具有交互性和动态性

12 完全支持DOM

列了那么多基本可以忽的,最用的是在展示大数据方面(折线图、k线图、雷达等)

  图片的数字化将图片存储为数据有两种方案。其一为位图,也被称为光栅图。即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合。每个点发出的光有独立的频率和强度,反映在视觉上,就是颜色和亮度。这些信息有不同的编码方案,在互联网上最常见的就是RGB。根据需要,编码后的信息可以有不同的位(bit)——位深。位数越高,色越清晰,比度越高;占用的空也越大。另一决定位的精度的是其中点的数量。一个位文件就是所有构成其的点的数据的集合,它的大小自然就等于点数乘以位深。位格式是一个大的家族,包括常JPEG/JPG, GIF, TIFF, PNG, BMP

第二种方案矢量。它用抽象的角看待形,记录其中展示的模式而不是各个点的原始数据。它将片看成各个对象合,用曲线记录对象的廓,用某种色的模式描述象内部的案(如用梯度描述渐变色)。比如一留影,被看成各个人物和背景中各种景物的合。种更高角,正是人看世界在意里的反映。矢量格式有CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF,SWF, VML等等。

矢量简单的几何形,只需要几个特征数,就可以确定。比如三角形,只需要确定三个点的坐只需要确定心的坐和半径。描述它的函数已知的曲线也只需要几个参数就能确定。如正弦曲线、各种螺线等等。如果用位图记录这些几何案,需要包含线条的各个像素的数据。除了大大省空,矢量图还具有完美的伸性。因为记录的是形的特征,形的尺寸任意,都只是做着相似变换,不会出模糊和失真。相反位片放大到超出原有大小,各个像素点之空缺,即使用某种算法填充,也会出模糊锯齿象,不如矢量精确。因而矢量很适合用于记录诸如符号、图标简单形。而位图则适合于没有明显规律的、色丰富细腻片。

SVG包括3型的象:矢量(包括直线、曲线在内的)、点阵图像和文本。各种象能够组合、变换,并且修改其式,也能预处象。

 

下面为实例:

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head></head>

<body>

   <script type="text/javascript">

       //椭圆的计算公式, y^2/b^2+x^2/a^2=1

     functiondraw() {

           // 画圆弧

           var a = 45, b = 22, x0 = 10;

           var u = [];

           for (var i = -30; i < 30; i++) {

                var y = (1 - i * i / (a * a)) *b * b;

                y = Math.sqrt(y);

                //移动

                var x = i + 200;

                y = 70 + y;

                u.push(x + ',' + y.toFixed(0))

           }

            // 画圆弧

           var a = 50, b = 25, x0 = 10;

           for (var i = 40; i > -40; i--) {

                var y = (1 - i * i / (a * a)) *b * b;

                y = Math.sqrt(y);

                //移动

                var x = i + 200;

                y = 100 + y;

                u.push(x + ',' + y.toFixed(0))

           }

           point = u.join(" ")

           document.getElementById("polygon").setAttribute("points",point)

           document.getElementById("polygon2").setAttribute("points",point)

       }

       window.onload = draw

   </script>

   <div id="div"></div>

   <svg id="ad" width="750" height="300"version="1.1" xmlns="http://www.w3.org/2000/svg">

       <!--模糊特效-->

       <filter id="Gaussian_Blur">

           <feGaussianBlur in="SourceGraphic"stdDeviation="2" />

       </filter>

       <!--线性渐变-->

       <linearGradient id="orange_red" x1="0%"y1="0%" x2="100%" y2="0%">

           <stop offset="0%"style="stop-color:#000000;stop-opacity:0.1" />

           <stop offset="15%" style="stop-color:#ffffff;stop-opacity:0.2"/>

           <stop offset="85%"style="stop-color:#ffffff;stop-opacity:0.2" />

           <stop offset="100%"style="stop-color:#000000;stop-opacity:0.1" />

       </linearGradient>

       <linearGradient id="red_black" x1="0%"y1="0%" x2="0%" y2="100%">

           <stop offset="0%"style="stop-color:#ff0000;stop-opacity:1" />

           <stop offset="100%"style="stop-color:#ee0000;stop-opacity:1" />

       </linearGradient>

       <!--圆盘顶部的椭圆-->

       <ellipse cx="200" cy="82" rx="27"ry="26" style="fill:#ff0000;stroke:#ee0000;stroke-width:2;filter:url(#Gaussian_Blur)" />

       <!--圆柱体渐变特效-->

       <polygon id="polygon" points=""style="fill:#ff0000;stroke:#ee0000; stroke-width:2;filter:url(#Gaussian_Blur)"/>

        <!--圆柱体-->

       <polygon id="polygon2" points=""style="fill:url(#orange_red)" />

</svg>

</body>

</html>

生成的图片入下,感兴趣可以自己试试。

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值