# 來，讓咱們一塊兒手寫一張圖片

做爲開發者，不可避免的須要各類圖片，通常用的都是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確權簽名