svg 超详细 制作
最近网站开发，发现网站用到 svg。感觉这么简单东西，随便弄弄就行。结果倒腾半天没弄好。还是去学习了一下。经验分享一下吧。给遇到同样问题的程序狗们一点指引，少走弯路。
网站上的点赞，点完后，显示已点赞。
我做的效果图
这种图不是普通的加个 jpg或者png就行。它是跟html标签差不多可以，指定属性就改变颜色的
<svg style="fill:red" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="1024px" height="1024px" viewBox="-31.873 29.659 1024 1024"
enable-background="new -31.873 29.659 1024 1024" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="" stroke="" stroke-miterlimit="10" d="M999.127,161.027
M475.127,939.027 M40.5,899.659c0,0-40-355.999-40-441.999s82-92,82-92s176-10,220-8s22,38,58,36s134-174,102-236s-2-138,70-154
s134,30,180,110s30,208,30,208s104,0,146,0s70,48,86,94s-26,154-28,148s2,30,16,74s-18,64-20,64s16,38,0,80
c-16,41.999-38,49.999-38,51.999s22,22-22,82s-98,68-98,68s-384,0-386,0s-46-22-56-20s-36,20-36,20h-174
C72.5,983.659,40.5,899.659,40.5,899.659z M514.127,273.395c0-128,28-192,38-202s94,4,124,122s-14,195.631-14,195.631
s304,4.369,226,2.369s54-20,34,86s-88,64-64,68s54,66,42,104s-52,36-46,37s44-3,32,59s-68,56-68,60s44,16,26,54s-70,56-70,56
s-306,0-354,0s-54-28-54-28v-430C408.127,405.395,514.127,401.395,514.127,273.395z M274.313,915.198v-484h-198c0,0-26-5.999-28,18
c-2,24,40,442,40,442s20,24,34,24S274.313,915.198,274.313,915.198z"/>
</svg>
像这样，指定一下 style fill 就能变成红色
具*作过程
打开 ai 新建文件
2 钢笔工具
绘制 三个路径
两个小的路径，选中 右击 排列 置于顶层 三个路径放到一起
ctrl F11
选择
使用奇偶填充规则
然后选中 三个对象 依次点击 对象 复合路径 建立
存储为web格式，选择 svg即可
都看到这里了，是时候打赏一下啦！！！！！！！！！！！！！！！
谢谢大爷
谢谢大爷
谢谢大爷
谢谢大爷
谢谢大爷
谢谢大爷
谢谢大爷
谢谢大爷
谢谢大爷
谢谢大爷
谢谢大爷
谢谢大爷
谢谢大爷
谢谢大爷
得到的代码
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
]>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="1024px" height="1024px" viewBox="-69.934 -169.91 1024 1024"
enable-background="new -69.934 -169.91 1024 1024" xml:space="preserve">
<defs>
</defs>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#040000" stroke="#000000" stroke-miterlimit="10" d="M792.066,0.5
l60.242,454.217L0.5,443.874V0.5H792.066z M437.464,69.174l20.481,321.688l321.688-43.373L757.945,78.813L437.464,69.174z
M39.873,78.813l9.638,285.542l308.434-18.072L344.692,69.174L39.873,78.813z"/>
</svg>
然后把 绿色那俩地方删掉
用style 填充颜色即可
代码+效果图
红色代码为 设置的颜色代码
<svg style="fill:green" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="1024px" height="1024px" viewBox="-69.934 -169.91 1024 1024"
enable-background="new -69.934 -169.91 1024 1024" xml:space="preserve">
<defs>
</defs>
<path fill-rule="evenodd" clip-rule="evenodd" fill="" stroke="" stroke-miterlimit="10" d="M792.066,0.5
l60.242,454.217L0.5,443.874V0.5H792.066z M437.464,69.174l20.481,321.688l321.688-43.373L757.945,78.813L437.464,69.174z
M39.873,78.813l9.638,285.542l308.434-18.072L344.692,69.174L39.873,78.813z"/>
</svg>