SVG如此强大!

Other 2013-08-16 矢量,绘图,svg,HTML,xml

过去

虽然很早就隐约听说过svg,但毕竟没有深入研究对其了解不多,再加上近期HTML5的画布大张旗鼓的宣扬就把flash与svg给盖住了。在HTML5画布出现之前,页面矢量一直都是flash的天下。为这我还曾经牺牲了一年的时间学习制作flash,不少大学里都有flash教材与课程,可见flash的普及度。

可惜,flash太吃内存,甚至被乔布斯骂成垃圾。于是svg还是由点小存量,但IE这个满身bug的程序经常独树一帜,对svg也是一样支持很不好,很多财大气粗的boss甚至还在用IE6指着程序猿破口大骂:你们做的什么烂网站,页面这么难看。

如果你没有听说过svg或者也不知道矢量是什么东东那不要紧,矢量就是无限放大都没有齿距。

为什么要说svg呢?因为这个东西经历了flash的冲击以及画布的追逐,却能在今年1月成为w3c标准,由此看来svg的确有它特别之处。

svg简单教程

svg与xml关系紧密,svg是使用 XML 来描述二维图形和绘图程序的语言。

我们使用svg画一个矢量圆

<?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="red" stroke-width="3" fill="blue"/>
</svg>

点击这里查看效果

如果提示:

可能你第一行留空了,xml格式要求声明语句必须在文档的第一行声明。

在HTML中嵌入svg

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<html xmlns:svg="http://www.w3.org/2000/svg">

        <head>
                <meta charset="utf-8" />
        </head>

        <body>
                <p>这是HTML页面</p>

                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="300">
                        <rect x="50" y="50" rx="5" ry="5" width="300" height="100" style="fill:#CCFFFF;stroke:#000;" />
                        <text x="55" y="90" style="fill:#000099;font-size:36;">Hell word</text>
                </svg>
        </body>
</html>

效果:

点击这里查看代码

svg的滤镜

svg有多种常用滤镜,如:高斯模糊,线性渐变,放射性渐变,透明(设置可以单独设置边框透明)等等。

给个高斯模糊例子

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

	<defs>
		<filter id="Gaussian_Blur"><feGaussianBlur in="SourceGraphic" stdDeviation="3" /></filter>
	</defs>

	<ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#0000ff;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)" />

</svg>

效果:

点击这里查看效果

表现能力并不比图片效果差,关键还是矢量的。

关于svg的更多资料与滤镜效果请大家参阅W3School

文字链接:《SVG如此强大!

文章地址:http://www.qttc.net/201308364.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 0

    Hi,你想第一个做沙发么?