svg矢量图的使用

svg矢量图的使用

今天学习了矢量图的三种使用方法，迫不及待想要和大家分享。

一、什么是 SVG

SVG 是可缩放矢量图形，用户可以用代码来直接描绘图像。区别于 JPG 和 PNG 的需要用引擎来加载的图片，它直接用画布绘制，所以是无损失的。

二：svg的优点

1. 减少页面请求的压力
2. SVG比其他的图片都要更小
3. SVG是一种可伸缩的图片
4. SVG 图像可以在任何分辨率下轻松打印
5. SVG 可以自定义

三：使用方法：

3.1 单个的使用：

引入单个 ：图片形式引入 我们直接在iconfont 里面下载。下载格式为svg格式。直接保存在 我们项目中的图片文件夹中。

我们在 data中呢定义这个图片的路径

 data: function() {
    return {
      homeIcon: require("../assets/home.svg")
    };
  },

在页面中我们：

    <img :src="homeIcon" alt="">//动态的绑定这个src 赋值

3.2 标签方式的引用：

3.3同时下载多个：

第一步：从iconfont挑选图标加入购物勾选下载代码

第二步：解压并打开demo_index.html，找到symbol复制其中的svg代码

第三步：粘贴到vue项目public中的index.html中

第四步：使用svg

总结：使用方法就这三种，希望能够帮助到大家~