因为 svg 文件不像 png 这种图片可以直接通过链接拿，而且很有可能会被 webpack 打包压缩。所以需要到网页上去拿。

步骤

以下步骤都是在 chrome 上操作的。

1. 找到 svg 的位置

在网页中右键 --> 检查，来到 Elements 面板，去找到所需的 svg 元素。

svg 位置

2. 复制 svg 元素代码

右击 svg 元素 --> copy --> copy element

拿到如下代码：

<svg viewBox="0 0 1024 1024"><use xlink:href="#pl-pipeline"></use></svg>

3. 复制内部 svg 代码

发现复制出来的只是容器。里面还有个 svg

里面的 svg

重复步骤 2 将里面的 svg 代码也复制出来：

<svg id="pl-pipeline" viewBox="0 0 1024 1024"><path d="M711.68 481.28H363.52A125.952 125.952 0 0 1 235.52 358.4a125.952 125.952 0 0 1 128-122.88h363.52V358.4l179.2-153.6-179.2-153.6v122.88H363.52A187.904 187.904 0 0 0 174.08 358.4a187.904 187.904 0 0 0 189.44 184.32H716.8a122.88 122.88 0 1 1 0 245.76H296.96V665.6l-179.2 153.6 179.2 153.6v-122.88h414.72a187.904 187.904 0 0 0 189.44-184.32 187.904 187.904 0 0 0-189.44-184.32z"></path></svg>

4. 拼凑成最终的 svg 文件

<svg xmlns="http://www.w3.org/2000/svg" id="assignee-_3-PPortraiture_org-user" data-name="3-Portraiture/org-user" viewBox="0 0 1024 1024">
  <use xlink:href="#pl-pipeline">
    <svg id="pl-pipeline" viewBox="0 0 1024 1024">
      <path d="M711.68 481.28H363.52A125.952 125.952 0 0 1 235.52 358.4a125.952 125.952 0 0 1 128-122.88h363.52V358.4l179.2-153.6-179.2-153.6v122.88H363.52A187.904 187.904 0 0 0 174.08 358.4a187.904 187.904 0 0 0 189.44 184.32H716.8a122.88 122.88 0 1 1 0 245.76H296.96V665.6l-179.2 153.6 179.2 153.6v-122.88h414.72a187.904 187.904 0 0 0 189.44-184.32 187.904 187.904 0 0 0-189.44-184.32z"></path>
    </svg>
  </use>
</svg>

最后

这个 svg 文件无法直接用于前端展示，但是给美术设计同学是好使的。可以进行再加工了后使用！