Creating Characters by SVG
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):
– http://svghanzi.appspot.com/⿻丨口
– http://svghanzi.appspot.com/⿴囗玉
– http://svghanzi.appspot.com/△木木木
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):
– http://svghanzi.appspot.com/⿺辶心
– http://svghanzi.appspot.com/△品品品
– http://svghanzi.appspot.com/⿰女囧
– http://svghanzi.appspot.com/△囧囧囧
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.
Anyway, SVG Hanzi is a very cool tool, and I’m glad to see this. Not sure if it will ever be capable of representing really complex characters, but it’s already impressive as is!
.svg){kind=link}
Thanks to @magazeta for introducing me to this project.
Thanks, this is pretty cool!
A recursive descent parser would get you those complex characters. Whether or not it gets implemented it is a personality test of the author.
I hope you’ll excuse me for a really basic question that I was reminded of when reading your post. Why is the radical ⻌ usually listed as having four strokes (e.g. at MDBG, see http://www.mdbg.net/chindict/chindict.php?page=chardict&cdcanoce=0&cdqchi=%E8%BE%B6 )? I can see only three: the “dot” on top, the vertical “hook” and the horizontal curve on the bottom.
Wow! I was wondering when someone would do this.
If you look at the SVG behind it, the code is really quite simple. The hit on the server is probably very light. It also means that anyone can tweak the positioning of components that weren’t perfect, or create more complex characters. I haven’t had luck embedding the svg into an html page in a seamless way; it floats in its own drawing area on the page. Maybe a better solution would be to pre-render a number of characters to png files, and then use those inline with html more transparently.
I need to upload the hack that solved the problem of SVG images sticking out of the line of text if you put them there. When that’s done, you could simply use an img or object tags and style them however you want.
As for the png coversion, I could even build it in, cause it is a good fallback for old IE versions, but first I need to migrate from Google App Engine to some paid hosting that would allow to install librsvg (a library to handle the conversion).
The service is indeed extremely lightweight, and I also cache the SVG code in a database, so that subsequent queries for the same character do not require any computing at all.
Happy that you liked it!
Yes, I am planning to implement recursive character descriptions at some point, but that requires some thinking.
This is a fucking awesome project for chinese characters…….. how to join this project….haha
[…] For problem characters, type one of its radicals (or better yet, more than one) into this search field: http://chise.zinbun.kyoto-u.ac.jp/ids-find If you still can’t find a Unicode character, use the DIY tool here: https://www.sinosplice.com/life/archives/2013/02/26/creating-characters-by-svg […]