今儿个心血来潮，想搞个能自己生成svg图片的网站玩玩。这玩意儿平时看着挺高大上，咱也能捣鼓出来。

准备工作

我啥也不懂，就到处乱搜。后来发现，要生成svg，就是生成一堆描述图形的文本。 既然是文本，那用啥不是写？我直接用个最顺手的文本编辑器。

开干

我得知道svg这玩意儿长啥样。于是我随便找个svg图片，用文本编辑器打开瞅一眼。好家伙，密密麻麻一堆代码，看得我头晕。不过仔细瞅瞅，也就那么几个标签：

• svg：这是最大的框框，告诉浏览器，这里面是个svg图片。
• circle：画个圈圈。
• rect：画个方块。
• line：画条线。
• path：这个厉害，啥都能画，就是写起来麻烦点。

知道这些，我就开始照葫芦画瓢。比如，我想画个红色的圆，就写：

<svg><circle cx="50" cy="50" r="40" fill="red" /></svg>

这里面的 cx 和 cy 是圆心的位置，r 是半径，fill 是填充颜色。

然后我想再画个蓝色的方块：

<svg><rect x="10" y="10" width="30" height="30" fill="blue" /></svg>

x 和 y 是方块左上角的位置，width 和 height 是宽度和高度。

就这样，我一点点拼凑，把我想画的图形都用代码写出来。把这些代码保存成一个 .svg 文件，就大功告成。

分享一下

我把自己做的小破站分享给朋友，他们都觉得挺好玩。虽然功能简单，但好歹是自己亲手做出来的，成就感满满！

整个过程没啥高深的技术，就是需要点耐心和细心。只要你肯动手，你也能做出自己的svg生成网站！