svg 缩放_研究：可缩放矢量图形（SVG）

矢量图形已广泛应用于印刷媒体中 。 在网站中，我们还可以使用SVG或可缩放矢量图形添加矢量图形。 根据W3.org的官方规范 ，SVG被描述为：

一种用于描述XML中的二维图形的语言。 SVG支持三种图形对象：矢量图形形状（例如，由直线和曲线组成的路径），图像和文本。

实际上 ，它 自1999年以来就存在，并且到2011年8月16日，它已成为W3C建议书 。 但是，SVG仍未得到充分利用，但是使用Vector而不是Bitmap在网站上提供图形或图像有很多优点。

SVG的优势

就在网站上提供图形服务而言，SVG与位图相比具有一些优势，其中包括：

分辨率独立

位图/光栅图形取决于分辨率 -它建立在像素上。 在特定缩放级别上调整大小时，所提供的图形将显得像素化。 对于本质上与分辨率无关的矢量图形，这不会发生，因为图形是通过数学方程式表示的，因此即使在Retina Display上 ，它也可以在任何缩放级别进行缩放，同时保持质量 。

减少HTTP请求

SVG可以直接嵌入带有svg标签HTML文档中，因此浏览器不需要发出请求即可提供图形。 这也可以提高网站的加载性能。

样式和脚本

直接嵌入svg标签也可以使我们轻松地通过CSS设置图形样式 。 我们可以像使用常规HTML标签一样更改对象属性，例如背景颜色，不透明度，边框等。 同样，我们也可以通过JavaScript处理图形。

可以动画和编辑

当SVG对象使用动画元素或通过JavaScript库（如jQuery）时，可以对其进行动画处理。 SVG对象还可以使用任何文本代码编辑器或图形软件（如Inkscape （ 免费 ）或Adobe Illustrator）进行编辑 。

文件较小

与具有类似图形表示的Bitmap相比，SVG的文件大小较小 。

使用SVG绘制基本形状

根据规范，我们可以使用SVG绘制一些基本形状，例如矩形，圆形，直线，椭圆形，折线和多边形 ，并且为了使浏览器呈现SVG图形，所有这些图形元素都需要