如何使用 SVG ？

前端教程SVG

前面了解了 SVG 本质上就是 XML 代码，那这些代码放在哪里运行呢？

SVG 作为图片使用

<img>

SVG 可以像 png，jpg 文件一样被 <img> 使用，并且不会因窗口缩放而模糊。

新窗口打开

<picture>

如果设备可能不支持 SVG，还可以使用 <picture> 进行 fallback 处理：

<picture>
    <source type="image/svg+xml" srcset="some-awesome.svg" />
    <img src="fallback.png" alt="some description" />
</picture>

<object>

可以将 SVG 文件作为插件嵌入到 <object> 中，此时 SVG 里的动画和脚本功能都会保留。

新窗口打开

SVG 作为 HTML 元素使用

SVG 也可以作为普通的元素（element）插入 HTML 文档中，我们称此为 inline SVG。

此时，SVG 可以像其他 HTML 元素一样用 CSS 控制样式，用 JavaScript 控制交互。

新窗口打开

TIP

这种方式是目前 Web 开发中最常用的方式。

SVG 作为 CSS 资源

SVG 文件还可以作为 CSS 的资源，例如背景图片：

新窗口打开

小结

本节介绍了 SVG 的几种使用方式，接下来我们正式介绍 SVG 语法。