# 来，让咱们一块儿手写一张图片

做为开发者，不可避免的须要各类图片，通常用的都是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)  -->
复制代码

加入文字? 只要使用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等内部的实现那么神秘而且须要专门的读写工具。它也是比较实用的。

PressONE确权签名