将SVG作为图像
1. 将图像包含在 HTML 标记的
元素内
当图像是页面的基本组成部分时，推荐这种方式。
代码语言：javascript复制<img src="radar.svg" title="雷达图" alt="雷达图">
<div class="txt">将SVG作为图像div>对于栅格图像，其固有尺寸就是它的像素尺寸。对于 SVG，则：
① 如果文件中的根元素 带有明确的 height 和 width 属性，则它们会被用作文件的固有尺寸； ② 如果只指定 height 或者 width ，并且 带有 viewBox 属性，那么将用 viewBox 计算宽高比，图像会被缩放已匹配指定的尺寸； ③ 如果 带有 viewBox 属性而没有尺寸，则 viewBox 的 height 和 width 将被视为像素长度。 ④ 没有如何尺寸，浏览器应该为嵌入内容应用默认 HTML 尺寸，通常是 150 像素高，300 像素宽。
2. 将图像作为另一个元素的 CSS 样式属性插入
当图像主要用来装饰时，推荐这种方式。
代码语言：javascript复制div.bg-radar {
background-image: url("radar.svg");
background-size: 100% 100%;
}<div class="bg-radar">div>
<div class="txt">将SVG作为CSS背景div>将 SVG 文件作为图像呈现时，无论上述哪种方式，都有一定局限性。图像渲染（SVG 代码被转换为栅格图像用于显示）时与主页面是分离的（主页面样式对 SVG 无效），而且无法在两者之间进行通信。根据浏览器以及用户的安全设置不同，SVG 文件内定义的脚本也可能不会运行，URL #片段也可能被忽略（见上述示例）
将SVG作为对象
代码语言：javascript复制<object data="radar.svg" type="image/svg xml" title="雷达图">
<p>不支持svgp>
<img src="radar.png" />
object>
<div class="txt">将SVG作为对象div>其会被缩放以适配元素的宽高，并且不会继承定义在父文档中的任何样式。
与 区别：(1) 使用 src 引用源数据文件，而不是 data 属性；(2) 不能包含任何子内容，如果嵌入失败就没有备选项。内联 SVG<div> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> <circle>circle> svg> div> <div class="txt">将SVG作为CSS背景div>主文档中的样式会被 SVG 继承；也可以在主样式表内为 SVG 元素定义样式。circle { stroke: blue; stroke-width: 2px; }如果 svg 中有 </code> 或 <code><script></code> 内容，需要去掉 <code><![CDATA[]]></code></p>
