认识一下svg图用在html中的结构是什么样子的吧

这个是项目中的图

这个是学习过后的图片

为什么差距这么大呢？

写这篇文章的原因主要是帮助大家更了解这个图片的创建过程，而不是项目中的真正运用，本篇文章是我基于这篇文章学习的，大家也可以看看，好了，接下来是我自己对svg图的理解

segmentfault.com/a/119000001…

svg是什么格式，怎么这么好用？

他是一种开放标准的矢量图形语言，可让你设计高分辨率的Web图形页面。可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中。

为什么这么好用

他具备jpg和png等格式无法具备的优势：可以任意放大图形显示，不会以牺牲图像质量为代价；可在svg图像中保留可编辑和可搜寻的状态；因为svg比其他格式的图像文件要小很多，所以下载也快

讲了这么多好处，接下来一起来看看怎么用吧

1、首先你要有svg的图片

2、在代码中将所有的svg图片管理起来

<svg>
中间每一个svg图片用symbol包裹，并附上id管理
 <symbol id="one" width="128" height="100" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z" />
    </symbol>
  这个就是一整个图啦
</svg>

3、如何使用这个图

用svg包裹一层use标签，然后加上xlink：href="symbol的Id"取出就就可以使用了
  <svg>
    <use xlink:href="#one"> </use>
  </svg>

看起来是不是很简单

当然，在项目中我们可不是这么使用的哦！

下面给大家介绍vue中是如何利用webpack提供的require.contextAPI 来创建自己的svg图片吧！

1、创建一个文件夹，用于管理svg图片

如图所示

在svg同级目录创建index.js，当然，如果你使用 vue-element-admi项目会在icons 文件夹中自动生成哦

这里假设没有

1、生成一个检测工具，用于检测所有的svg文件，false是否找子文件夹
js有require方法，

Context是require属性，有三个回调第一个是svg文件目录第二个是要不要找子目录第三个是正则RegExp

const req = require.context('./svg', false, /\.svg$/)

2、利用对象的keys属性让他变成数组，map映射成为想要的数组

const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

大概的原理就是这样的，希望对您有所帮助

如有不足之处，请多指教

svg矢量图是什么，怎么使用，越来越流行的一种图片格式，我不允许你们不知道，快来get一下前端如何使用吧