[TOC]
## 概況
### 背景
前幾天，再次看到一些CI的Badge的時候，就想著要做一個自己的Badge:
Badge
接著，我就找了個圖形工具簡單地先設計了下面的一個Badge:
Demo
生成的格式是SVG，接著我就打開SVG看看里面發現了什么。
~~~
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1006px" height="150px" viewBox="0 0 1006 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.7 (28169) - http://www.bohemiancoding.com/sketch -->
<title>phodal</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-1" fill="#5E6772" style="mix-blend-mode: hue;" x="0" y="0" width="640" height="150"></rect>
<rect id="Rectangle-1" fill="#2196F3" style="mix-blend-mode: hue;" x="640" y="0" width="366" height="150"></rect>
<text id="PHODAL" font-family="Helvetica" font-size="120" font-weight="normal" fill="#FFFFFF">
<tspan x="83" y="119">PHODAL</tspan>
</text>
<text id="idea" font-family="Helvetica" font-size="120" font-weight="normal" fill="#FFFFFF">
<tspan x="704" y="122">idea</tspan>
</text>
</g>
</svg>
~~~
看了看代碼很簡單，我就想這可以用代碼生成——我就可以生成出不同的樣子了。
### ShowCase
Finally
代碼： GitHub:?[https://github.com/phodal/brand](https://github.com/phodal/brand)
### SVG與SVGWrite
SVG就是一個XML
> 可縮放矢量圖形（Scalable Vector Graphics，SVG) ，是一種用來描述二維矢量圖形的XML 標記語言。
要對這個XML進行修改也是一件很容易的事。只是，先找了PIL發現不支持，就找到了一個名為SVGWrite的工具。
> A Python library to create SVG drawings.
## 步驟
### Step 1: 基本圖形
示例代碼如下:
~~~
import svgwrite
dwg = svgwrite.Drawing('test.svg', profile='tiny')
dwg.add(dwg.line((0, 0), (10, 0), stroke=svgwrite.rgb(10, 10, 16, '%')))
dwg.add(dwg.text('Test', insert=(0, 0.2)))
dwg.save()
~~~
然后我就照貓畫虎地寫了一個：
~~~
import svgwrite
dwg = svgwrite.Drawing('idea.svg', profile='full', size=(u'1006', u'150'))
shapes = dwg.add(dwg.g(id='shapes', fill='none'))
shapes.add(dwg.rect((0, 0), (640, 150), fill='#5E6772'))
shapes.add(dwg.rect((640, 0), (366, 150), fill='#2196F3'))
shapes.add(dwg.text('PHODAL', insert=(83, 119), fill='#FFFFFF',font_size=120, font_family='Helvetica'))
shapes.add(dwg.text('idea', insert=(704, 122), fill='#FFFFFF', font_size=120, font_family='Helvetica'))
dwg.save()
~~~
發現和上面的樣式幾乎是一樣的，就順手做了剩下的幾個。然后想了想，我這樣做都一樣，一點都不好看。
### Step 2: 高級Badge
第一眼看到
Idea Prototype
我就想著要不和這個一樣好了，不就是畫幾條線的事么。
~~~
def draw_for_bg_plus():
for x in range(y_text_split + rect_length, width, rect_length):
shapes.add(dwg.line((x, 0), (x, height), stroke='#EEEEEE', stroke_opacity=0.3))
for y in range(rect_length, height, rect_length):
shapes.add(dwg.line((y_text_split, y), (width, y), stroke='#EEEEEE', stroke_opacity=0.3))
for x in range(y_text_split + max_rect_length, width, max_rect_length):
for y in range(0, height, max_rect_length):
shapes.add(dwg.line((x, y - 4), (x, y + 4), stroke='#EEEEEE', stroke_width='2', stroke_opacity=0.4))
for y in range(0, height, max_rect_length):
for x in range(y_text_split + max_rect_length, width, max_rect_length):
shapes.add(dwg.line((x - 4, y), (x + 4, y), stroke='#EEEEEE', stroke_width='2', stroke_opacity=0.4))
draw_for_bg_plus()
~~~
就有了下面的圖，于是我又按照這種感覺來了好幾下
Finally
