关于svg，之前只是知道它相比png，更小，更清晰，是矢量图，用得最多也就是项目中的icon图标，从iconfont里下载所需的图标。
今天在搞个人网站的时候，发现做的logo看着很模糊，给人一种很low的感觉，那必然不能接受啊，咋搞？？？记得之前听说过矢量图，但是自己又不会做，而且原有的png设计还挺满足的，于是就想着搜一下有没有png转svg的在线工具，一搜还挺多，于是就找了个转，结果还可以能看出来确实是svg，清晰度一下子啊就上来了，但是还有一些不满意的地方，有很多杂点，于是就看着svg的代码，删删改改。。。
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
<!-- h -->
<path style="fill:#009fb4; stroke:none;" d="M143 61L154 59C152.366 49.8356 145.203 42.232 144 33C149.314 32.4709 155.936 28.5845 160.956 31.7569C165.967 34.9235 167.477 41.8947 169.72 46.9992C170.701 49.2323 171.624 52.4044 174.225 53.223C177.067 54.1176 181.112 52.3889 184 52C182.38 46.374 179.439 41.3081 177.027 36C175.066 31.6839 173.749 26.8967 168.96 24.858C159.825 20.9689 148.836 25.9559 140 28C139.174 23.6652 137.111 19.856 135 16C132.317 16.5224 127.623 16.7188 126.133 19.4329C124.385 22.6139 128.162 28.1071 129.424 31C133.81 41.0534 138.83 50.8485 143 61z"/>
<!-- e -->
<path style="fill:#009fb4; stroke:none;" d="M234 53L234 47C225.527 46.9766 213.268 47.3812 210 38C218.681 38.024 227.358 39.318 236 40L236 34C227.736 33.3478 219.147 33.5125 211 32C215.701 22.4708 229.359 26.3181 238 27L238 21C228.226 20.9989 215.032 17.0408 206.015 21.9198C196.91 26.8457 194.922 41.932 204.044 48.0062C212.26 53.477 224.501 53 234 53z"/>
<!-- a -->
<path style="fill:#009fb4; stroke:none;" d="M266 34C271.881 36.1331 278.717 38.0552 283.98 41.4684C285.618 42.5306 288.501 44.4063 287.654 46.7878C286.224 50.8097 279.239 46.9512 277 45.909C269.929 42.6182 256.161 37.9917 251.179 47.0941C244.574 59.1629 265.524 63.7911 273 66.7438C275.924 67.8984 279.75 70.6022 282.96 70.4074C287.872 70.1093 292.131 61.5265 294.731 58C297.574 54.1431 300.905 50.1549 299.678 45.0008C297.667 36.5512 284.895 34.0305 278 31.189C275.564 30.1851 272.082 27.8875 269.344 28.7315C266.961 29.466 266.507 31.9354 266 34z"/>
<!-- m -->
<path style="fill:#009fb4; stroke:none;" d="M55 82C62.6997 86.8246 70.3785 91.7094 78 96.6566C80.6798 98.3961 84.5521 101.734 87.9954 101.122C92.2543 100.365 94.1626 95.7912 90.8326 92.9043C85.1695 87.9948 76.113 82.2666 69 80L69 77C72.0466 75.5924 75.4474 71.8503 79 72.5926C90.7091 75.0391 100.779 94.7278 112 81C103.284 75.6465 94.5844 68.6275 85 65L85 63C88.7286 61.3489 92.6433 57.2092 97 58.2886C108.427 61.1197 118.623 79.5074 129 66C118.672 59.1658 103.382 45.7536 90 50.8434C82.0423 53.87 75.336 62.1131 69 67.5764C64.023 71.8679 57.8349 75.9712 55 82z"/>
<!-- n -->
<path style="fill:#009fb4; stroke:none;" d="M295 79C305.096 92.8658 317.136 73.3672 329 72.8164C332.687 72.6452 339.625 78.6795 337.248 82.6103C334.984 86.356 327.886 88.5527 324.17 90.5756C320.137 92.7704 316.025 94.8036 312 97C313.736 99.4336 315.759 102.521 319.001 103.006C321.818 103.428 324.689 101.307 327 100C333.254 96.4631 345.415 93.1644 348.257 85.9599C351.147 78.6337 342.506 71.5812 338.011 67.0046C336.089 65.0481 333.785 61.8418 330.83 61.5316C327.205 61.1512 323.032 64.4621 320 66.0772C311.724 70.4848 303.265 74.571 295 79z"/>
<!-- z -->
<path style="fill:#009fb4; stroke:none;" d="M33 137C35.4711 136.998 39.1827 137.6 41.2724 135.972C45.0439 133.035 45.1045 123.388 47 119C55.9001 127.974 63.26 141.885 77 142C78.3764 131.787 83.5492 122.339 84 112C81.7398 112.008 78.6311 111.569 76.7029 113.028C72.754 116.016 72.1786 125.456 71 130L69 130C65.598 122.573 58.0172 114.57 51.5756 109.564C49.2201 107.734 44.3238 105.966 41.5995 108.032C39.5254 109.604 39.3524 113.666 38.7052 116C36.7693 122.983 34.619 129.938 33 137z"/>
<!-- g -->
<path style="fill:#009fb4; stroke:none;" d="M329 137C321.411 136.426 319.701 130.727 318.463 124C318.082 121.928 318.367 118.466 316.397 117.117C314.533 115.841 311.089 116.842 309 117C309.257 122.891 311.177 128.325 312.626 134C313.482 137.352 314.102 141.028 317.144 143.142C321.954 146.484 329.616 144.929 335 144.285C348.205 142.706 362.042 142.094 375 139C370.242 130.842 373.201 120.086 364.956 113.72C356.492 107.184 333.753 107.587 328.028 118.093C325.072 123.518 327.852 131.435 329 137z"/>
<path style="fill:#005388; stroke:none;" d="M183 86L183 115C188.988 112.697 193.834 108.155 199 104.424C206.618 98.9234 216.262 93.4806 222 86L183 86z"/>
<path style="fill:#005388; stroke:none;" d="M229 86L229 114C234.817 112.143 239.124 107.962 244 104.425C251.662 98.8676 261.208 93.5507 267 86L229 86z"/>
<path style="fill:#009fb4; stroke:none;" d="M183 119L183 149C191.547 144.131 199.022 137.433 207 131.71C212.103 128.049 218.775 124.489 222 119L183 119z"/>
<path style="fill:#009fb4; stroke:none;" d="M229 119C229 128.933 229.818 139.205 228 149C237.171 143.775 245.56 136.704 254 130.373C258.495 127.002 264.119 123.903 267 119L229 119z"/>
<path style="fill:#009fb4; stroke:none;" d="M183 152L183 182C197.967 175.673 210.192 161.599 224 153C219.785 151.231 214.536 152 210 152L183 152z"/>
<path style="fill:#005388; stroke:none;" d="M138 86L138 115C147.324 110.361 155.68 102.867 164 96.6265C168.216 93.4645 173.299 90.5962 176 86L138 86z"/>
<path style="fill:#005388; stroke:none;" d="M138 120L138 149C145.874 144.981 152.93 138.676 160 133.373C165.499 129.249 171.795 125.482 176 120L138 120z"/>
<path style="fill:#005388; stroke:none;" d="M138 153L138 182C147.325 177.361 155.679 169.866 164 163.627C168.216 160.465 173.442 157.678 176 153L138 153z"/>
</svg>
直接从应用入手，这就是我要用的svg，刚转化好的时候一共900+行，我人都傻了，完全看不懂什么什么
然后试着删除一些行后发现，对应的图像就会少一点点，看到这里虽然我不知道svg的原理，但是我依然可以得到我想到的东西。
到最后，有一点细节还是需要了解一下svg的知识的，那没办法了，不可避免了，那就了解一下吧：
概念：
svg意思是可缩放的图形，本质上还是一张图片，就先入个门，了解个大概：
<svg t="1629811245611" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2501" width="200" height="200">
<path d="M691.2 230.4a102.4 102.4 0 0 1 102.4 102.4v358.4a102.4 102.4 0 0 1-102.4 102.4H332.8a102.4 102.4 0 0 1-102.4-102.4V332.8a102.4 102.4 0 0 1 102.4-102.4h358.4z m0 51.2H332.8a51.2 51.2 0 0 0-51.072 47.36L281.6 332.8v358.4a51.2 51.2 0 0 0 47.36 51.072L332.8 742.4h358.4a51.2 51.2 0 0 0 51.072-47.36L742.4 691.2V332.8a51.2 51.2 0 0 0-47.36-51.072L691.2 281.6z" fill="#429FEE" p-id="2502"></path>
<path d="M667.392 423.6288a25.6 25.6 0 0 1 2.9696 51.0208l-2.9696 0.1792H348.5696a25.6 25.6 0 0 1-2.9952-51.0464l2.9952-0.1536H667.392z" fill="#429FEE" p-id="2503"></path>
<path d="M588.8 384a25.6 25.6 0 0 1 25.4208 22.6048L614.4 409.6v102.4a25.6 25.6 0 0 1-51.0208 2.9952L563.2 512v-102.4a25.6 25.6 0 0 1 25.6-25.6zM409.6 537.6a25.6 25.6 0 0 1 25.4208 22.6048L435.2 563.2v102.4a25.6 25.6 0 0 1-51.0208 2.9952L384 665.6v-102.4a25.6 25.6 0 0 1 25.6-25.6z" fill="#429FEE" p-id="2504"></path>
<path d="M667.392 577.2288a25.6 25.6 0 0 1 2.9696 51.0208l-2.9696 0.1792H348.5696a25.6 25.6 0 0 1-2.9952-51.0464l2.9952-0.1536H667.392z" fill="#429FEE" p-id="2505"></path>
</svg>
上面这个就是我们通常用到的iconfont下载的svg图片，大多时候我们都可以找到自己想用到的图标，这就很舒服，但是有时候就差那么一点点，找不到满意的图标，总是差那么一点。这时候我们就可以下载一个类似的，然后自己改巴改巴。。。
svg有很多形式，但是常看到就是很多<path>连接成的图像，因为<path>是svg基本形状中最强大的一个，它就相当于你那个画笔，可以通过上下左右，直线，曲线，理论上可以画出任何自己想表达出来的图像，那就主要学习一下<path>吧
<path>就是通过一个个指令来告诉渲染器如何渲染图像：
-
移动命令
M x y --- 将画笔移动至某点 -
画线
L x y --- 在起止点中间连线H x --- 画水平线V y --- 画垂直线Z --- 从当前点画一条线到起点 -
曲线命令
C x1 y1, x2 y2, x y ---其他的一些曲线：二次贝塞尔曲线，三次贝塞尔曲线，弧线等等，因为没有用到的缘故就没有看，哈哈哈哈
经过上面的知识已经完全够让我修改到我满意的程度啦
