# 来,让我们一起手写一张图片

作为开发者,不可避免的需要各种图片,一般用的都是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"/>
复制代码
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章