SVG - 概述

什么是 SVG？

  • SVG（可扩展矢量图形）是一种基于 XML 的语言，用于定义基于矢量的图形。

  • SVG 旨在通过网络显示图像。

  • 作为矢量图像，SVG 图像无论如何缩小或调整大小都不会损失质量。

  • SVG 图像支持交互性和动画。

  • SVG 是 W3C 标准。

  • 其他图像格式（例如光栅图像）也可以与 SVG 图像结合在一起。

  • SVG 与 XSLT 和 HTML 的 DOM 很好地集成。

优点

  • 使用任何文本编辑器创建和编辑 SVG 图像。

  • SVG 图像基于 XML，可搜索、可索引、可编写脚本和可压缩。

  • SVG 图像具有高度可扩展性，因为无论如何缩小或调整大小，它们都不会损失质量

  • 任何分辨率下均具有良好的打印质量

  • SVG 是一个开放标准

缺点

  • 与二进制格式的光栅图像相比，文本格式的大小更大。

  • 即使对于小图像，尺寸也可以很大。

例子

以下 XML 片段可用于在 Web 浏览器中绘制一个圆圈。

<svg宽度=“100”高度=“100”>
   <circle cx =“50”cy =“50”r =“40”行程=“红色”行程宽度=“2”填充=“绿色”/>
</svg>

将 SVG XML 直接嵌入 HTML 页面中。

测试SVG.htm

<html>
   <title>SVG 图像</title>
   <正文>
   
      <h1>示例 SVG 图像</h1>
      
      <svg宽度=“100”高度=“100”>
         <circle cx =“50”cy =“50”r =“40”行程=“红色”行程宽度=“2”填充=“绿色”/>
      </svg>
   
   </正文>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。在 Internet Explorer 中，需要 activeX 控件才能查看 SVG 图像。

SVG 如何与 HTML 集成

  • <svg> 元素指示 SVG 图像的开始。

  • <svg> 元素的 width 和 height 属性定义 SVG 图像的高度和宽度。

  • 在上面的示例中，我们使用 <circle> 元素来绘制圆形。

  • cx和cy属性代表圆心。默认值为 (0,0)。r属性代表圆的半径。

  • 其他属性描边和描边宽度控制圆的轮廓。

  • fill 属性定义圆的填充颜色。

  • 结束</svg>标签表示SVG图像的结束。