SVG 是 Scalable Vector Graphics 的缩写。它是一种基于可扩展标记语言 (XML) 的二维图形矢量图像格式。它支持交互性和动画。这意味着 SVG 文件中存在的每个属性和每个元素都可以进行动画处理。 SVG 图像行为在 XML 文本文件中定义。可以搜索、索引、编写脚本、压缩它们，并且可以使用任何文本编辑器以及 Inkscape 等绘图软件创建或编辑它们。几乎所有现代 Web 浏览器都支持 SVG。
缩放 SVG 很棘手的原因是它不像其他图像格式那样缩放。 SVG 图像具有明确定义的纵横比：宽度与高度的比率，这使得难以随着父容器的变化而缩放。其他图像很容易缩放，因为浏览器确定图像的高度、宽度和纵横比，并相应地调整所有内容。因此，将这些属性赋予 SVG 应该是满足我们要求的第一步。虽然设置高度和宽度几乎没有设置纵横比，但我们的目标是超出纵横比的缩放。视图框可以正确地满足我们的目的。 viewBox 是
第一种方法：
- 首先，我们创建一个占屏幕总宽度 30% 和屏幕总高度 20% 的容器。
- 接下来，我们使用
标签创建一个 SVG 图像（矩形）并指定高度、宽度和填充属性。 - viewBox = “0 0 100 100” ：定义一个坐标系，x=0，y=0，width=100 个单位，height=100 个单位。
- 因此，包含宽度=50px 和高度=50px 的矩形的 SVG 将填充 SVG 图像的高度和宽度，并且所有尺寸均等比例缩放。更改 x 和 y 坐标可能会产生不同的结果，但我们会将自己限制在规定的值内。
例子：
HTML
HTML
输出：
- 全屏：
全屏
- 最小化屏幕：
最小化屏幕
第二种方法：
- 第二种方法演示了
标签中存在的 svg 图像的缩放。
- 在这种情况下，浏览器会根据当前屏幕大小自动调整图像纵横比。
- 重要的是在 img 标签中提及高度或宽度作为属性，否则 Internet Explorer 可能会将 width = ”auto” 和 height =”auto” 更改为它可以接受的某个值。
例子：
HTML
输出：
- 全屏：
全屏
- 最小化屏幕：
最小化屏幕