Vue2+webpack项目中如何生成svg精灵图

原创

已于 2024-04-01 14:10:12 修改 · 670 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

于 2023-06-30 21:26:33 首次发布

SVG是一种基于XML的矢量图形格式，适用于Web环境，支持任意缩放。文章介绍了SVG的使用方法，包括直接作为imgsrc导入、内联使用SVG标签以及通过webpack和svg-sprite-loader工具进行优化和生成SVG精灵图，以提高性能和简化代码结构。

svg是什么

SVG是一种基于XML的矢量图形格式，可以任意缩放大小不失真。用于在Web和其他环境中显示各种图形；它允许我们编写可缩放的二维图形，并可通过CSS或JavaScript进行操作。

使用方法

一、直接使用

当成img图src导入， src=“1.svg”
缺点：多发一次请求

<!-- 精灵图----- -->
    <div>
      <img src="../../assets/svg/eye.svg" alt="">
    </div>

二、以svg标签的形式使用

好处：节约请求
缺点：页面结构不清晰，一旦svg图片稍大，占用很大的html结构空间

先svg包symbol元件，生成svg精灵图
页面svg利用use 通过 id 使用精灵图中的小图

   <!-- 1.声明精灵图 -->
    <svg style="display:none;">
        <!-- 2.svg标签改成symbol 就变为了精灵图的一个元件 在元件上声明id属性 -->
        <symbol id="one" width="400" height="400">
          <path d="M 50 50 H 150" stroke="blue" stroke-width="5" fill="none" />
        </symbol>
        <symbol id="two" width="150" height="150">
         <path  d="M80 80 A45 45, 0, 0, 0, 125 125" />
        </symbol>
    </svg>
     <!-- 3.根据id调用精灵图中的svg -->
    <svg>
        <use xlink:href="#one" ></use>
    </svg>
    <svg>
        <use xlink:href