学习背景：
在制作ai.4.plus欢迎页svg图片时，需要将svg通过js的方式写入js代码中，
这时候发现js代码里只有一个path元素，因此需要将生成的多个path元素的svg图片优化一下，将多个path优化成一个。
遍寻互联网，最终发现：蓦然回首，那人却在灯火阑珊处。
记录一下，已备后用。
方法如下：
1.用png转svg网站convertio（convertio.co/zh/png-svg/）将透明png图片转换为svg格式；
2.用网站vecta（vecta.io/nano）将svg格式图片转换为压缩svg并下载；
3.下载后右键用代码编辑器打开，复制对应的width、height、viewbox、path，分别替换到网站源码/public/assets/index-5559eec2.js中的对应位置，最终代码：
("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1706.666717529297",height:"661.333353042603",viewBox:"0 0 1280 496","xmlns:v":"https://vecta.io/nano",class:"w-40 mx-auto h-24"},[o("path",{d:"M201 47.7c-8.5 1-29.1 5.7-39.3 9-31.9 10.2-57.6 26.1-80.7 49.9-17.8 18.3-26.3 30.5-37.1 52.9-11.5 23.9-17.6 47.1-18.9 71.3-2 40.9 3.6 69.6 20.3 103.7l7.4 15.1-3.3 18.4c-9.2 50.3-10.7 61.2-9.4 66.7 1.3 6 4.7 9.5 11.2 11.5 5.8 1.7 11 .1 44.7-13.7 15.7-6.4 29.2-11.4 30-11.2.9.3 7.5 3.2 14.6 6.5 27.7 12.8 49.4 18 78.6 18.9 94.9 3.1 177-59.2 200.9-152.6 12.5-49.2 4.6-104.3-21.3-148.4-32-54.3-88.1-90.6-150.9-97.6-9.1-1-39-1.3-46.8-.4zM257 79c28.1 5.7 56.1 19.3 78.7 38.1 28.4 23.8 48.7 59.1 56.5 98.1 3.2 16.4 3.2 47.2 0 63.6-13.6 68.6-64.7 120.5-132.6 134.8-16.4 3.4-40.3 4.3-56.6 2-23.4-3.3-43.7-10.1-62.2-20.7-5.6-3.3-11.9-6.4-14-7-5.1-1.3-9-.2-32.8 9.6L74.8 405c-1.3 0-1-2.9 3.3-29.3 4.9-30.2 5-32 2.3-37.2-13.7-26.4-18.6-38.4-22.3-55.6C45.7 225 62.7 166.3 104 125c12.6-12.5 25.4-21.9 41-29.9 17.9-9.2 33.7-14.5 52.6-17.6 13.2-2.2 45.4-1.4 59.4 1.5zM127.5 230.6c-5.2 1.9-8.1 4.8-10.1 10.1-1.6 4-1.6 4.6 0 8.8 2 5.2 6.1 9 11.6 10.6 3.3 1 4.4.9 8.4-1.1 4.9-2.3 7.6-5.4 9.4-10.8 2.4-7-4.4-16.7-12.8-18.5-1.4-.3-4.3.1-6.5.9zm94-.4c-5.1 1.8-8.2 4.6-10.5 9.4-2 4-2.1 5.1-1.1 8.4 1.6 5.5 5.4 9.6 10.6 11.6 4.2 1.6 4.8 1.6 9 0 5.1-2 9-6.1 10.4-11.2 2.8-10.1-8.8-21.5-18.4-18.2zm93 0c-7.5 2.7-13.3 10.7-12 16.7 1.1 5.2 5.9 10.7 10.9 12.6 4.3 1.7 4.9 1.7 8.9.1 2.4-.9 5.3-2.7 6.5-3.9 3.1-3.3 5.4-9.6 4.7-12.6-2.1-8.8-11.9-15.4-19-12.9zm373-118c-.3.7-.4 20.4-.3 43.8l.3 42.5 50 .3 98.3-.4 48.2-.6V155v-42.7l-36.2-.6c-64.6-1.2-159.8-.9-160.3.5zM851 155v15h-64.5H722v-15-15h64.5H851v15zm-345.9 42.2L460 261.5l.2 19.5.3 19.5 48.7.3 48.8.2.2 23.8.3 23.7h19 19l.3-23.7.2-23.7 11.8-.3 11.7-.3.3-16.8.2-16.7h-12-12l-.2-66.8-.3-66.7-23.2-.3-23.1-.2-45.1 64.2zM558 221v46h-30.9c-17.1 0-31.2-.4-31.5-.9-.8-1.2 60.4-91.1 61.9-91.1.3 0 .5 20.7.5 46zm470-87.1l-7.5.6-39.7 106L941 347.7c0 1 4.8 1.3 20.9 1.3h20.8l1.6-4.3c2.6-6.7 18.7-52 18.7-52.4 0-.1 20.2-.3 44.9-.3h44.8l9.9 28.5 9.9 28.5h20.5c11.3 0 21-.4 21.6-.8.8-.5-9.4-29.2-33.2-93.2l-39.8-107-5.4-14.5-20.3-.1c-11.2 0-23.8.2-27.9.5zm36.7 78.6l14.9 42.7c.5 1.7-1.4 1.8-31.5 1.8-17.7 0-32.1-.3-32.1-.6s6.1-17.7 13.6-38.7l15.1-42.5c1.2-3.4 2-4.2 3.6-4 1.7.3 4.1 6.3 16.4 41.3zM1183 241v108h20.5 20.5V241 133h-20.5-20.5v108zm-535-8v14l25.3.1c13.8 0 25.9.3 26.8.7 1.4.6.9 3.6-3.7 24.2-3.1 14.2-4.8 23.9-4.3 24.5.6.6 29.5 1.1 75.9 1.3l75 .4v5c0 8-4 32-5.9 35.3-3.1 5.5-6.9 6.2-53.6 9.6-8.2.6-15.4 1.4-15.8 1.9-.5.4 1.1 7.4 3.5 15.6l4.4 14.8 8.9-.2c20.3-.7 50.9-3.3 59.3-5.1 11.3-2.5 15.5-4.6 21.3-10.8 5.2-5.5 7.1-10.4 9.4-23.8 2.9-17.5 7.4-68 6.1-69.2-.4-.5-33.8-.9-74.2-1.1l-73.4-1c0-.4 1-5.5 2.1-11.5l2.2-10.7h93.3H924v-14-14H786 648v14z"})],-1)
最终效果：
相关网站：
在学习的过程中，除了发现以上两个工具网站外，还发现两个不错的代码网站：
1.创建新笔 (codepen.io)，可以同屏编辑html、css、js并实时预览效果，界面也很漂亮；
2.SVG Path Builder (codepen.io) SVG 路径生成器可以同屏编辑html、css、js并实时预览svg效果；
3.菜鸟教程在线编辑器 (runoob.com)，可以在线编辑html代码，并实时预览svg效果。
svg相关知识：
1.SVG是一种标记语言，可扩展矢量图形，由万维网联合会（W3C）开发，用于在XML中描述二维矢量和混合矢量/光栅图形。同时支持动画、交互式图像和说明性脚本。不支持三维物体的描述。SVG的基础是VML格式的标记语言和PGML。
2.PNG是一种使用无损压缩算法来压缩的栅格图形数据存储格式。开发PNG这种格式是为了取代GIF。PNG支持三种主要类型的光栅图像：灰度图像、颜色索引图像和彩色图像。 PNG格式通过一种压缩形式存储图像信息。
