转载

SVG Python 打造自己的专属Badge

接着，我就找了个图形工具简单地先设计了下面的一个Badge:

生成的格式是SVG，接着我就打开SVG看看里面发现了什么。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg height="150px" version="1.1" viewbox="0 0 1006 150" width="1006px" 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 fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"> <rect fill="#5E6772" height="150" id="Rectangle-1" style="mix-blend-mode: hue;" width="640" x="0" y="0"></rect> <rect fill="#2196F3" height="150" id="Rectangle-1" style="mix-blend-mode: hue;" width="366" x="640" y="0"></rect> <text fill="#FFFFFF" font-family="Helvetica" font-size="120" font-weight="normal" id="PHODAL"> <tspan x="83" y="119">PHODAL</tspan> </text> <text fill="#FFFFFF" font-family="Helvetica" font-size="120" font-weight="normal" id="idea"> <tspan x="704" y="122">idea</tspan> </text> </g> </svg>

看了看代码很简单，我就想这可以用代码生成——我就可以生成出不同的样子了。

SVG与SVGWrite

SVG就是一个XML

> 可缩放矢量图形（Scalable Vector Graphics，SVG) ，是一种用来描述二维矢量图形的XML 标记语言。

要对这个XML进行修改也是一件很容易的事。只是，先找了PIL发现不支持，就找到了一个名为SVGWrite的工具。

> A Python library to create SVG drawings.

示例代码如下:

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()

发现和上面的样式几乎是一样的，就顺手做了剩下的几个。然后想了想，我这样做都一样，一点都不好看。

高级Badge

第一眼看到

SVG Python 打造自己的专属Badge

我就想着要不和这个一样好了，不就是画几条线的事么。

     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()

就有了下面的图，于是我又按照这种感觉来了好几下

SVG Python 打造自己的专属Badge