svg 教程：简介、优缺点、示例以及与 html 的集成

SVG 是一种 Google XML 格式语言，用于开发图形，目标是快速开发和高性能。

它具有以下功能 -

• SVG（可缩放矢量图形）是一种基于 XML 的语言，用于定义基于矢量的图形。
• SVG 旨在通过网络显示图像。
• 与矢量图像一样，SVG 图像无论如何缩小或调整大小都不会降低质量。
• SVG 图像支持交互性和动画。
• SVG 是 W3C 标准。
• 其他图像格式（例如光栅图像）也可以使用 SVG 图像进行标记。
• SVG 与 HTML 的 XSLT 和 DOM 很好地集成。

优点

SVG 具有以下优点 -

• 使用任何文本编辑器创建和编辑 SVG 图像。
• 基于 XML，SVG 图像可搜索、可索引、可编写脚本且可压缩。
• SVG 图像具有高度可扩展性，因为无论如何缩小或调整大小，它们都不会损失质量。
• 无论分辨率如何，都具有良好的打印质量。
• SVG 是一个开放标准。

缺点

SVG 具有以下缺点 -

• 与二进制格式的光栅图像相比，文本格式尺寸较大。
• 即使是小图片，尺寸也可能很大。

示例

以下 XML 片段可用于在浏览器中绘制圆圈。 ？直接在 Opera 中查看 SVG 图像，无需任何插件。在 Internet Explorer 中，需要 ActiveX 控件才能显示 SVG 图像。

SVG 如何与 HTML 集成

• 该元素代表 SVG 图像的开始。
• 元素的 width 和 height 属性定义 SVG 图像的高度和宽度。
• 在上面的示例中，元素用于绘制圆形。属性
• cx 和 cy 表示圆的中心。默认值为 (0,0)。 r 属性表示圆的半径。
• 其他属性描边和描边宽度控制圆的轮廓。属性
• fill 定义圆的填充颜色。
• 结束标签表示SVG图像的结束。