svg 其实就是一张图片，这张图片和我们以前接触的 jpeg 和 png 这种不同，这种图片是用代码书写出来的，并且是矢量图。

当我们打开 svg 图片的时候，就会根据代码绘制出这张图片。

由于这是由代码书写而成的图片，所以内容并不会非常复杂，也是一个体积很小，很轻量化的图片。

本节只是基础教学，如果需要详细教学，可以参考详细版 SVG 教程

svg 图片可以直接嵌入到网页中，如果将下面的代码直接复制到网页中

<svg t="1711015503812" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="4248" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
        <path
            d="M690.1 377.4c5.9 0 11.8 0.2 17.6 0.5-24.4-128.7-158.3-227.1-319.9-227.1C209 150.8 64 271.4 64 420.2c0 81.1 43.6 154.2 111.9 203.6 5.5 3.9 9.1 10.3 9.1 17.6 0 2.4-0.5 4.6-1.1 6.9-5.5 20.3-14.2 52.8-14.6 54.3-0.7 2.6-1.7 5.2-1.7 7.9 0 5.9 4.8 10.8 10.8 10.8 2.3 0 4.2-0.9 6.2-2l70.9-40.9c5.3-3.1 11-5 17.2-5 3.2 0 6.4 0.5 9.5 1.4 33.1 9.5 68.8 14.8 105.7 14.8 6 0 11.9-0.1 17.8-0.4-7.1-21-10.9-43.1-10.9-66 0-135.8 132.2-245.8 295.3-245.8z m-194.3-86.5c23.8 0 43.2 19.3 43.2 43.1s-19.3 43.1-43.2 43.1c-23.8 0-43.2-19.3-43.2-43.1s19.4-43.1 43.2-43.1z m-215.9 86.2c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1 43.2 19.3 43.2 43.1-19.4 43.1-43.2 43.1z"
            p-id="4249" fill="#1afa29"></path>
        <path
            d="M866.7 792.7c56.9-41.2 93.2-102 93.2-169.7 0-124-120.8-224.5-269.9-224.5-149 0-269.9 100.5-269.9 224.5S540.9 847.5 690 847.5c30.8 0 60.6-4.4 88.1-12.3 2.6-0.8 5.2-1.2 7.9-1.2 5.2 0 9.9 1.6 14.3 4.1l59.1 34c1.7 1 3.3 1.7 5.2 1.7 2.4 0 4.7-0.9 6.4-2.6 1.7-1.7 2.6-4 2.6-6.4 0-2.2-0.9-4.4-1.4-6.6-0.3-1.2-7.6-28.3-12.2-45.3-0.5-1.9-0.9-3.8-0.9-5.7 0.1-5.9 3.1-11.2 7.6-14.5zM600.2 587.2c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c0 19.8-16.2 35.9-36 35.9z m179.9 0c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c-0.1 19.8-16.2 35.9-36 35.9z"
            p-id="4250" fill="#1afa29"></path>
    </svg>

就会显示一张微信的图片，实际上，以上代码就是告诉浏览器，这张图片应该怎么画，然后浏览器根据这个画法，就可以自动画出一个微信的图标。


当然，如果我们把上面的代码放到一个后缀名为 svg 的文件里，这个 svg 就以一个单独的文件存在了，此时依旧可以使用 img 元素来使用这个 svg 图片。

一般来说，我们要用 svg，都可以去找一些可视化的编辑工具，例如SVG 在线编辑器 | 菜鸟工具，但我们也可以通过代码来书写 svg 图片，具体可参考 svg 详细版教程。