最近网站开发，发现网站用到 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:///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:///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:///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:///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>
