最高效的WEB程序员学习网站
SVG手册 HTML5手册
 

美少女半身像


本章要介绍的是一个用SVG技术绘制的少女半身像(一看就知道是日本卡通人物),少女站在窗前,阳光穿透窗玻璃照射进来,洒在少女的身上。少女的头发纹理和红衣上的褶皱处理的非常好,犹如水彩画。这样的SVG图片需要使用非常精心的过滤器技术,比如,SVG渐变色技术

跟上一章的老虎的演示不同,这次是用SVG绘制的人物,人们往往对熟悉的事物更容易发现其中的细节,面对这样一个SVG绘制的美少女,我们更容易相信,SVG技术能实现你能想象的任何图像。

下载SVG源文件


咆哮的老虎


上一章中介绍的松鼠鱼图案相对来说还是比较简单。本章中将介绍给大家的就复杂一点了。是一个非常逼真的老虎头图案。SVG矢量图的优点就在于图案的清晰度,而且矢量图不会因为因为图片的放大和缩小让画质有任何的损失。你可以从这个老虎头中真切的感受到这些,不论你使用多大的屏幕,它都不会像jpg或gif等图片那样失真。

下载SVG源文件


吐泡泡的松鼠鱼


使用SVG大多是制作相对简单的图片图案,但也能制作出很复杂的图形图像,从本章开始,我们将给大家介绍一些经典的SVG图像作品。

本章给大家介绍的是一个会吐泡泡的松树鱼作品。这个作品里绘制出了一个非常有趣的卡通鱼,而且在优哉游哉的吐着泡泡。这个作品里使用了SVG动画技术,从源文件里可以看出使用了<animateMotion><animateTransform>等SVG动画标记。但从谷歌浏览器的开发路线来看,SVG动画最终将会被放弃,改用CSS动画实现。所以,以后在SVG里实现动画时,应该避免使用这些SVG动画标记。

下图的SVG源文件下载地址