SVG - svg的制作及使用

目录

 

1、实现png转svg

2、在html中使用

3、在vue中使用

---

1、实现png转svg

      参考：https://www.aspirantzhang.com/network/png_to_svg.html

     

    使用Adobe Illustrator编辑后导出SVG

   首先，只要jpg或者png图片没有太小，比如宽高都大于200px，并且没有阴影等乱七八糟的效果，我认为用Illustrator就可以做出  比较好的矢量SVG。操作流程如下：

  1. 用Illustrator打开JPG/PNG图片。

  2. 点击图片，进入选择状态，上面的工具栏点击“简单描摹”右侧的下拉箭头，选择“照片高保真度”。

视图->显示透明度网格：

这时无敌的illustrator已经把普通jpg/png转换成了矢量图。但还有一个问题，就是仔细观察的话，这个图是有白色背景的。如果你恰好需要这个背景那太好了，否则我们必须把这个背景弄掉。

去背景参考：https://blog.csdn.net/BLvren_/article/details/87449400

3. 菜单栏选择文件->存储为 SVG

 

 

 

2、在html中使用

直接把svg里面的内容拷贝至html中

 

3、在vue中使用

创建一个组件，然后再<template>标签中放入 <svg>内容，父组件再调用

 

4、另一种方法

转：https://blog.csdn.net/d_holyDancer/article/details/80964833