可缩放矢量图形(SVG)是矢量图形家族的一部分。相比其他光栅图形(JPEG、GIF 和 PNG),SVG 图形具有更多的优势。本文将探讨 SVG 图形的基本概念和在 HTML5 中的使用。学习绘制、过滤器、渐变、文本和将 SVG XML 添加到网页。
可缩放矢量图形 (SVG) 是基于矢量的图形家族的一部分。它们与基于光栅的图形不同,后者在一个数据数组中存储每个像素的颜色定义。如今,网络上使用的最常见的光栅图形格式包括 JPEG、GIF 和 PNG,每种格式都具有优缺点。
相比任何基于光栅的格式,SVG 具有多项优势:
原始像素数据是针对特定大小进行设计的。当图像不再是该大小时,显示图像的程序会猜测使用何种数据来填充新的像素。矢量图像具有更高的弹性;当图像大小变化时,数据公式可相应地调整。
本文将介绍 SVG 格式的优势,以及它们如何在 HTML5 中的 Web 设计工作中提供帮助。