在 html 中嵌入 svg 有两种方式：1. 内联 svg，即将 svg 代码直接写入 html，优点是减少请求且便于用 css 和 js 控制；2. 外部引用 svg 文件，可通过 img、object 或 iframe 标签引入，其中 object 支持交互，iframe 隔离上下文。选择方式取决于是否需要交互和复用性，该方法完整支持响应式设计与动画功能，并可用于数据可视化及性能优化。
SVG 标签在 HTML 中主要用于嵌入可缩放矢量图形。它允许你在网页上展示高质量的图形，而不会像位图那样在放大时失真。SVG 标签定义了一个矢量图形容器，你可以在其中使用各种 SVG 元素（如 path, circle, rect 等）来绘制图形。
SVG 标签的使用非常灵活，可以内联在 HTML 中，也可以作为独立的文件引入。
如何在 HTML 中嵌入 SVG？
嵌入 SVG 主要有两种方式：内联 SVG 和外部引用 SVG 文件。
立即学习“前端免费学习笔记（深入）”；
1. 内联 SVG:
直接将 SVG 代码嵌入到 HTML 文档中。这种方式的优点是减少了 HTTP 请求，并且 SVG 代码可以像其他 HTML 元素一样被 CSS 和 JavaScript 控制。
<svg width="100" style="max-width:90%"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>
2. 外部引用 SVG 文件:
使用 <img> 标签、<object> 标签或 <iframe> 标签引用外部 SVG 文件。
-
<img>标签:<img src="image.svg" alt="SVG Image" width="100" height="100">
这种方式简单直接，但 SVG 的交互性和脚本功能可能会受到限制。
-
<object>标签:<object data="image.svg" type="image/svg+xml" width="100" height="100"> Your browser does not support SVG </object>
<object>标签提供了更好的 SVG 支持，包括脚本和交互性。 -
<iframe>标签:<iframe src="image.svg" width="100" height="100"></iframe>
<iframe>标签将 SVG 文件嵌入到一个独立的上下文中，这可以防止 SVG 代码与主页面的 CSS 和 JavaScript 冲突。
选择哪种方式取决于具体的需求。内联 SVG 适合于需要高度控制和交互性的图形，而外部引用则适合于简单的图形或者需要复用的图形。
SVG 在响应式设计中的应用
SVG 的可缩放性使其非常适合响应式设计。你可以通过 CSS 控制 SVG 的大小，使其适应不同的屏幕尺寸。
一种常见的方法是使用 viewBox 属性。viewBox 定义了 SVG 图形的坐标系统，浏览器会根据 viewBox 和 width/height 属性来缩放 SVG 图形。
<svg viewBox="0 0 100 100" width="100%"> <circle cx="50" cy="50" r="40" fill="red" /> </svg>
在这个例子中，viewBox="0 0 100 100" 定义了一个 100x100 的坐标系统，width="100%" 则使 SVG 图形占据其父元素的全部宽度。
SVG 与 CSS 动画
SVG 可以与 CSS 动画结合使用，创建各种动态效果。你可以使用 CSS 选择器来选择 SVG 元素，并使用 CSS 属性来控制其外观和行为。
<svg width="200" height="200">
<rect x="0" y="0" width="50" height="50" fill="blue">
<animate attributeName="x" from="0" to="150" dur="2s" repeatCount="indefinite" />
</rect>
</svg>这个例子使用 <animate> 元素来创建一个简单的水平移动动画。你也可以使用 CSS @keyframes 规则来定义更复杂的动画。
SVG 在数据可视化中的应用
SVG 非常适合用于创建数据可视化图表，例如折线图、柱状图和饼图。SVG 提供了丰富的图形元素和属性，可以方便地绘制各种图表。
可以使用 JavaScript 库（如 D3.js 或 Chart.js）来简化 SVG 图表的创建过程。这些库提供了各种工具和函数，可以帮助你根据数据生成 SVG 代码。
SVG 的优化技巧
为了提高网页的性能，需要对 SVG 文件进行优化。以下是一些常见的优化技巧：
- 压缩 SVG 文件: 可以使用工具（如 SVGO）来压缩 SVG 文件，删除不必要的元数据和空格。
- 使用 CSS 控制样式: 尽量使用 CSS 来控制 SVG 的样式，而不是直接在 SVG 代码中设置样式。这可以提高代码的可维护性和可重用性。
- 减少路径点的数量: 减少 SVG 路径中点的数量可以降低文件大小，并提高渲染速度。
-
使用 symbol 和 use 元素:
symbol元素可以定义一个可重用的图形模板，use元素可以引用这个模板。这可以减少代码的重复，并提高性能。
SVG 的兼容性问题
虽然现代浏览器对 SVG 的支持非常好，但在一些旧版本的浏览器中可能存在兼容性问题。为了解决这些问题，可以使用一些 polyfill 库，例如 SVGeezy。这些库可以检测浏览器是否支持 SVG，如果不支持，则使用其他技术（如 PNG 或 JavaScript）来模拟 SVG 的效果。
