Creating Characters by SVG
26 Feb 2013
A new project called SVG Hanzi (SVG 漢字/SVG 汉子) allows anyone to piece together an image of a character by specifying its structure and component parts. Very cool!
From the site:
> SVG Hanzi is a web service that can be used to obtain a picture of any Chinese character in SVG format.
> It is only necessary to visit a link that looks like http://svghanzi.appspot.com/[Character Code].
> Character Code here should consist of an Ideographic Description Character ⿰, ⿱, ⿲, ⿳, ⿴, ⿵, ⿶, ⿷, ⿸, ⿹, ⿺, ⿻ or △
(Those weird symbols above represent the main structural patterns of Chinese characters, such as ⿰ for 知, ⿺ for 道, etc. △ is used to denote structures like 品 or 鑫.)
In case it’s not clear, this tool allows you to construct a character by just sticking a string of symbols and characters into a URL, which is then output as an SVG image.
Some examples (click through to view the resulting SVG character output in a pumped-up font size):
Those are all actual characters, of course. I quickly realized that this tool can be used to contract the character creations I love so much (and used to do the hard way, in Photoshop):
Finally, since SVG Hanzi doesn’t force you to use only character components as input (and Unicode character will work), I couldn’t resist these “hacks” (I’m using screenshots just in case SVG Hanzi ever goes down and to not hit the server so hard, but in each case, the image was originally output by SVG Hanzi and then captured by screenshot):
This all reminds me of the Character Description Language created for Wenlin, only simpler, and more universally accessible, since it uses a simple string of symbols to create an SVG, which all modern browsers can display.
Thanks to @magazeta for introducing me to this project.