- HTML中的<svg>标签允许内嵌SVG图形,它在HTML 5标准出现
- 如果 svg 不是根元素,svg 元素可以用于在当前文档(比如说,一个 HTML 文档)内嵌套一个独立的 svg 片段 。 这个独立片段拥有独立的视口和坐标系统
什么是SVG
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
示例
|
<!DOCTYPE html> <html>
<head> <meta charset="UTF-8" /> <title>HTML/SVG Example</title> </head>
<body>
<svg width="150" height="100" viewBox="0 0 3 2"> <rect width="1" height="2" x="0" fill="#008d46" /> <rect width="1" height="2" x="1" fill="#ffffff" /> <rect width="1" height="2" x="2" fill="#d2232c" /> </svg>
</body>
</html> |
浏览器运行结果如下:
来自 <https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/svg>