Inkscape软件工具绘制SVG矢量图，并在VUE项目中引用.

目录

矢量图.

首先，什么是矢量图？

矢量图用途.

下载链接.

示例(先随便画一张图下面讲如何引用到vue项目里).        ​

svg文件在前端vue页面引用.

首先在vue项目里创建一个放svg的文件夹.

然后在文件中修饰一个变量 然后在导出这个变量 .

进入需要引入svg图的页面。

在js里mounted里面写出  因为是需要初始化页面之后对dom节点操作.

现在代码块已经完成，然后找到之前保存的svg，用notepad++或者记事本打开 .

粘贴进去，如图(整整400行代码).

完成如图.

附 ：

矢量图.

首先，什么是矢量图？

        矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关。

矢量图用途.

        适用于图形设计、文字设计和一些标志设计、版式设计等。以及前端需要的logo或者很多工业用图。SVG在前端开发中变得越发流行，利用好SVG优化器工具，你可以提高工作效率并简化工作流程。

下载链接.

 ------------Inkscape 正版下载链接

https://download.csdn.net/download/xuboyuan11/85186979?spm=1001.2014.3001.5503

示例(先随便画一张图下面讲如何引用到vue项目里).        

svg文件在前端vue页面引用.

首先在vue项目里创建一个放svg的文件夹.

如图.

然后在文件中修饰一个变量 然后在导出这个变量 .

如图.

//这里将文字起为LOGOSVG   ​单引号里面后面放之前导出来的svg代码
//修饰一个变量
const LOGOSVG =`---------------`
//导出
export default {LOGOSVG,
}

进入需要引入svg图的页面。

在js里mounted里面写出  因为是需要初始化页面之后对dom节点操作.

  main.innerHTML  获取或设置元素的html内容—可以自动解析html标签

<template><el-row><el-col :span="5" :offset="3"><div class="pansvg"><div id="maindiv"></div></div></el-col></el-row>
</template>
<script>
//导入
import mySVG from "../com/js/svg.js";
export default {//方法mounted() {var main = document.getElementById("maindiv");main.innerHTML = mySVG.LOGOSVG;},
};
</script>
<style scoped>
.pansvg {zoom: 0.1;padding-right: 80%;
}
</style>

现在代码块已经完成，然后找到之前保存的svg，用notepad++或者记事本打开 .

这里需要注意

一般图中圈住的这个指向自己盘里的路径 可以把这一行删除，然后再复制，不然会报错而且错误提示不清晰容易被误导.

粘贴进去，如图(整整400行代码).

完成如图.

附 ：

        通过这种简单的例子再结合起之前发(在VUE项目里做一个组件)如链接,就可以做出各种各样复杂的组合与独一无二的页面.https://blog.csdn.net/xuboyuan11/article/details/124191332?spm=1001.2014.3001.5502