How do I create kanji (Japanese letters) animations from SVG data in Objective-C?

Question

I've seen several iPhone/iPad apps that show animated kanji. For those of you who are unfamiliar with kanji, stroke order is a very important part of kanji studying so if you are doing an app showing the animated stroke order is an essential part.

All the apps I've seen that do this, credit the KanjiVG project as their source for the stroke order data. After some research I found that the KanjiVG project gives you the data in SVG format encoded in XML.

Having never programmed graphics before (and being relatively new to iOS) I'm at a loss to where to keep looking for info.

I think I need to:

1. Parse the XML into SVG.
2. Render the SVG.

...but I'm not sure. For what I could see how this is done in the iPhone/iPad apps I bought, the animations all look surprisingly similar so there must be a common library that these guys are using that I'm failing to find (probably because I don't know exactly what I'm looking for!)

Any pointers that anyone can give me will be greatly appreciated.

Cheers!

Answer 1

This ended up being SO MUCH easier than I originally thought. The XML provided by the KanjiVG project not only contains all the kanji "parts" but the SVG data aswell!

So you get this:

<kanji midashi="会" id="4f1a">
<strokegr element="会">
    <strokegr element="人" position="top" radical="general">
        <stroke type="㇒" path="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88"/>
        <stroke type="㇏" path="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59"/>
    </strokegr>
    <strokegr element="云" position="bottom">
        <strokegr element="二">
            <stroke type="㇐" path="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0"/>
            <stroke type="㇐" path="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29"/>
        </strokegr>
        <strokegr element="厶">
            <stroke type="㇜" path="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95"/>
            <stroke type="㇔" path="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82"/>
        </strokegr>
    </strokegr>
</strokegr>
</kanji>

And if you create your SVG file out of only the path attributes of the stroke nodes then you get a nice SVG drawing! Like this:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1"  baseProfile="full"> 
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" style="fill:none;stroke:black;stroke-width:2" />
<path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" style="fill:none;stroke:black;stroke-width:2" />
<path d="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0" style="fill:none;stroke:black;stroke-width:2" />
<path d="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29" style="fill:none;stroke:black;stroke-width:2" />
<path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" style="fill:none;stroke:black;stroke-width:2" />
<path d="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82" style="fill:none;stroke:black;stroke-width:2" />
</svg>

Copy the above SVG XML and paste it into a plain text file. Name this file something that ends in .svg and drag it into Firefox. There it is, a graphic representation of the Kanji!

So now that I have all the "raw" SVG info it's just a matter of finding the appropriate SVG renderer.

Answer 2

I wrote a javascript renderer for KanjiVG data a few years back that animates stokes. It might serve as a working example for you or even a solution depending on what you want to do.

The approach I took was to break the KanjiVG stroke data into a set of javascript data files, write my own code for drawing cubic and quadratic curves and then write an event queue function that takes kanji, looks them up and enqueues the rendering of each stroke in an array.

The source is not obfuscated in any way and contains the odd comment. Best of luck!

Answer 3

There is no need to translate the KanjiVG data into SVG data, because it already is SVG data. From their wiki:

Any KanjiVG file is 100% SVG-compliant and can be opened by one's favorite SVG viewer/editor to be seen as-is.

The reason the data looks so different is that they're using SVG Groups to store extra information. But the KanjiVG data itself should still render fine using any standards-compliant SVG library.

Answer 4

You can also consider "AnimCJK project" (https://github.com/parsimonhi/animCJK) as source for kanji svg data. The principle is slightly different from "KanjiVG project" (http://kanjivg.tagaini.net/) and the underlying font is different (kaisho style), but extracting the path data is simple. Using a regex such as #<path[^>]+id="z[0-9]+d[0-9]+"[^>]+d="([^"]+)"[^>]+># does the job.

Answer 5

I'm interested in this as well. Have you gotten any further? I am able to display the kanji from an svg file this way by creating a UIwebview. In this example my file is k1.svg, and the image was drawn after hitting a button (the sender). I'm working on getting it animated now

-(void) doSVG:(id)sender {

    NSString *filePath = [[NSBundle mainBundle]
                          pathForResource:@"k1" ofType:@"svg"];

    NSURL *fileURL = [[NSURL alloc] initFileURLWithPath:filePath];
    NSURLRequest *req = [NSURLRequest requestWithURL:fileURL];
    //[kanjiView setScalesPageToFit:YES];
    [yourWebView loadRequest:req];  

}

My question to you is, have you found an easy way to get all the svg info out of the xml file from kanjiVG?