什么是SVG《HTML5系列教程26》

在HTML文档中我们可以嵌入各种各样的图片资源，然而不同的图片在特定的条件下显示的效果却大相径庭。比如在一样分辨率下，栅格图像和矢量图像显示效果就相差甚远。所以这次我们要介绍一个叫做SVG的元素，那么什么是SVG呢？SVG有什么优势呢？它都能够做些什么呢？

1.什么是SVG

Scalable Vector Graphics 是SVG的全称，是一种用来绘制矢量图的HTML5标签，是一个基于可扩展标记语言，用于绘制二维可缩放矢量图形的标准

SVG是一种使用XML来描述二维图形的语言，允许三种类型的图形对象：矢量图形、图像和文本。SVG是可伸缩的矢量图形，用来定义用于网格的基于矢量的图形，它使用XML格式定义图形，图像在放大或缩小的情况下，其图形质量不会有损失，SVG还是万维网联盟的一个标准。

SVG有哪些优势

SVG与其他图像格式都用于展示图形，但是SVG却有着更多的优势，具体体现在以下方面：

SVG可被多种工具读取和编辑，甚至是记事本。
SVG与JPEG和GIF图像相比，尺寸更小，可压缩性更强。
SVG是可伸缩的矢量图形。
SVG图像可以在如何分辨率下被高质量地打印。
SVG图像在放大或缩小的情况下，期图像质量不会下降。
SVG可以与Java技术一起运行。
SVG是开放的标准。
SVG是一种XML文本

3.将SVG直接嵌入HTML5页面

我们先来看一个实例，这个实例的效果是在一个HTML5页面中绘制一副图形，代码如下：

在这段代码中，SVG代码以＜svg＞元素开始，包括开启标签＜svg＞和关闭标签＜/svg＞。xmlns属性定义了SVG的命名空间。version属性定义所使用的SVG版本。

＜circle＞标签用来创建一个圆。cx和cy属性定义圆中心的x和y坐标。如果忽略这两个属性，那么圆点会被设置为（0,0）.r属性定义圆的半径。stroke和stroke-width属性克制如何显示形状的轮廓。我们把圆的轮廓设置为2px宽，黑色变宽。fill属性设置形状内的颜色。我们把填充颜色设置为红色。

在谷歌浏览器中显示的效果如下图：