读书频道 > 网站 > 网页设计 > SVG精髓 : 第2版
1.2 可缩放
15-10-14    下载编辑
收藏    我要投稿   

本文所属图书 > SVG精髓 : 第2版

本书通过实例透彻讲解了SVG(可缩放矢量图形)这种标记语言的规范及应用。作者从简单的SVG应用开始,带领读者逐步探索了SVG的复杂功能,包括滤镜、变换、渐变和模式。从应用层面看,本书涵盖了动画、交互图形和动立即去当当网订购

尽管矢量图形不像栅格图形那么流行,但它可以缩放而不损失图像质量,因而在许多应用程序中具有不可估量的价值。例如,这里有两个猫图像。图 1-3是栅格图像,图 1-4是一个矢量图像。它们都显示在一个 PPI3为 72的屏幕上。


 

图 1-3:栅格形式的猫图像


 

图 1-4:矢量形式的猫图像

当显示程序放大栅格图像时,它必须以某种方式扩大每个像素。要想将图像放大至四倍,最简单的方式就是让每个像素放大为原来的四倍。如图 1-5所示,结果并不是很理想。

注 1:Macromedia已被 Adobe收购。旗下产品也分别改名。——译者注注 2:指浏览网页或者其他文件的设备或软件。——译者注注 3:PPI,即 pixels per inch,每英寸的像素点数量。——译者注


 

图 1-5:放大的栅格图像

尽管可以使用边缘检测和反锯齿这类技术优化放大后的图像,但是这些技术很耗时。此外,由于栅格图像中的所有像素都是未知的,因此并不能保证相关算法能正确检测到边缘的形状。反锯齿的结果看起来如图 1-6所示。


 

图 1-6:放大后的反锯齿栅格图像

另一方面,将矢量图像放大为原来的四倍时,只需图像显示程序将形状的所有坐标都乘以 4,然后用显示设备的完整分辨率重新绘制它们即可。因此,在如图 1-7所示的 DPI为 72的屏幕截图中,线条边缘很清晰,与放大后的栅格图像相比,锯齿明显少多了。


 

图 1-7:放大后的矢量图形

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.3 功能
下一篇:1.5 小结
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站