作为开发者，不可避免的需要各种图片，一般用的都是JPEG，或者是PNG。但是有些恼人的是，这些图片你如果稍微需要修改调整，都不得不去选一个图片处理工具，也非得需要一个比较趁手的鼠标才行。
要是可以手写的话，就像写代码一样的创建和修改图片，就特别符合一个程序员的品味了。幸运的是，SVG可以做到这一点。
SVG是 Scalable Vector Graphics 的缩写。也就是可伸缩向量图的意思。它可以允许用户使用 XML 格式的文本创建图形。
比如说，你需要一个直径为10的圆形，那么可以这样写：
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<circle cx="5" cy="5" r="5"></circle>
</svg>
你可以把它保存到一个扩展名为.svg的文件内，并使用浏览器打开查看，它看起来是这样的：
我曾经用它来创建展位图片，比如我有一个展示书的网站，在测试期间，我希望显示一些数字0-99，外部套一个圈的图片，这样就不必急着找那些书的图片了，并且这些图可以在小型大型图片的时候，我也不必为不同的尺寸单独准备图片，因为SVG是可以缩放大小而不影响图片质量的。
那么，我可以这样写SVG：
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100">
<circle cx="50" cy="50" r="48" stroke="black" stroke-width="8" fill="yellow"></circle>
<text x="50%" y="50%" fill="red" dominant-baseline="middle" text-anchor="middle" font-size="80"
font-weight="bold">1</text>
</svg>
对于不同的数字，我只要替换标签<text>的内容即可，想要什么数字都可以。
我之前再做一个垃圾分类的小程序，我想要找一个像样的垃圾回收的图片作为LOGO和小程序内的图片。我在网上发现了上海垃圾分类指南，但是图片的质量真的不怎么样，而且使用OS X自带的截屏来切图的时候，总是切不好，不是多了就是少了的。我没有合适的图片工具，也不想要去找，我就想像是编码一样的手写一个图片，然后指定绝对的大小。虽然只有做也需要调整，但是我不需要额外的工具，只要文本工具就好了。
于是，我在网上找到了一个比较接近于我希望的样子的SVG，对它多余的一些图片元素删掉，然后加入文字，把文字和图片对齐，对图片内的多边形进行了红黑绿蓝的填充分别表示不同的垃圾分类。成果像是这样：
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 356.314 356.314" style="enable-background:new 0 0 356.314 356.314;" xml:space="preserve"
width="200">
<style>
.heavy { font: bold 30px sans-serif; }
.heavy1 { font: bold 30px SimSun; }
</style>
<g>
<g>
<rect style="fill:#3E4A57;"
x="10" y="10" width="310" height="310" rx="50" />
</g>
<g>
<polygon style="fill:#8DCD6F;" points="195.753,161.987 171.69,120.309 171.69,120.31 136.71,120.311 136.709,120.31
115.863,156.419 131.551,154.423 137.94,169.661 154.373,141.198 173.721,174.708 162.359,181.268 194.738,185.39
207.358,155.287 "/>
<polygon style="fill:#8DCD6F;" points="103.807,177.315 79.743,218.995 79.746,218.993 97.236,249.286 97.236,249.287
138.929,249.287 129.356,236.699 139.36,223.546 106.493,223.546 125.84,190.036 137.201,196.596 124.581,166.494 92.202,170.615
"/>
<polygon style="fill:#8DCD6F;" points="162.956,249.125 211.084,249.125 211.08,249.123 228.57,218.829 228.571,218.829
207.725,182.722 201.609,197.307 185.217,195.22 201.65,223.684 162.956,223.684 162.956,210.563 143.198,236.544
162.957,262.524 "/>
</g>
<text x="100" y="80" fill="white" font-size="30" font-family="SimSun">RECYCLE</text>
<text x="80" y="300" fill="white" font-size="30" font-family="SimSun">可回收垃圾</text>
</g>
</svg>
看着来还不错：
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
RECYCLE 可回收垃圾
加入文字? 只要使用text标签：
<text x="100" y="80" fill="white" font-size="30" font-family="SimSun">RECYCLE</text>
加入多边形填充？只要对polygon的style设置一下
<polygon style="fill:#8DCD6F;">
想要引入此图片，只要像是引用png一样，引入对应的文件即可：
<image src="1.svg"/>
你可以放大它或者缩小它，只要指定不同的width和height即可。它会跟着你要求的大小做缩放处理，因为它是矢量的，这样的优良特性似的不管你放大多少，图片都不会失真的：
<image src="1.svg" width="100" height="100"/>
总结
Web 标准 SVG 提供了一种程序员喜欢的图片风格，你可以手写它而不必非要一个全能大型的工具。借助现有的SVG图片仓库，你可以稍加修改，变成符合你需要的图片。它是纯文本的，是可读可以修改的，不行PNG等内部的实现那么神秘并且需要专门的读写工具。它也是比较实用的。
