KanjiVG is a database of Japanese kanji which provides the shape of each kanji in SVG format, extended with information about the kanji's components. It's a wonderful resource for any work related to kanji, and I've personally used it for my work on simulation of japanese calligraphy. It's also well maintained, with updates released regularly. However, editing the data file is a bit cumbersome due to the fact that SVG data are extended with extra information. A SVG graphical editor software may be convenient to edit the strokes' shape but not so much to edit the extra data. Editing these data in a text file directly is easy but editing the graphical components at the same time becomes nearly impossible. Thus, a dedicated tool would certainly help with maintaining this database. In this article I introduce my attempt to build such a tool, which I call KanjiVGEditor.

As usual I've decided to make this tool as a single file web app. Html only this time, to make it works even as a local copy, and zero dependencies of course. Then, to use it you just need to have a copy of the KanjiVGEditor file (download here), open it in a browser and start working. If you're connected to Internet you can also simply access the copy available on my website here. That way anyone should be able to use it without any installation or settings needed, in various environments (although I have only tested it in Chrome and Firefox on Linux). Comments, requests and bugs report are welcome, email me.

A demo video of the beta.000 version is available on YouTube here (if you're not scared of my terrific frenglish!). What's below serves as a user manual (click on images to enlarge).

The app is divided into two parts. On the left the data area, on the right the graphical area.

The 'new' button populates the data area with the kanji 一 to have something to start with, for tests or creation of a new kanji from scratch.

However, one would probably more often start with already existing data from KanjiVG, which can be loaded with the 'load' button (assuming you have a copy of the database). Name of files in the database are hexadecimal values of the UTF code for the kanji, which isn't obvious to know. The conversion tools at the bottom of the raw data helps with that: enter a kanji and it gives you its hexadecimal value. The conversion tool also works the other way around, if you enter a hexadecimal value it will give you the corresponding kanji.

After loading data, the 'decode' button parse these data into a structured representation and graphical representation of the kanji. You can return anytime to the raw data with the 'encode' button.

Clicking on an element in the structured data selects it (thick border). Corresponding graphical elements then appear in red in the graphical area. Text, individual stroke, or group of strokes can be selected.

One can add subgroups, paths or text to the currently selected group with the 'add' button. The created element is added at the end of the group, with some default attributes.

One can also edit the attributes' value of each element. An attribute with an empty value will be deleted when encoding back to raw data. Suggested values, if any, are displayed in the input area when the value is empty. Double clicking on an empty input with suggested value set these suggestions as the current value (it can be easier to edit the suggested values than typing them).

Missing attributes can be added to the currently selected element with the 'attribute' button. An attribute can't be added to an element if the element already contains it.

In the graphical area, the 'select' button allows to select a path element by clicking on one of its controls. The nearest control to the mouse pointer is displayed in blue. The selected element is displayed in red, other elements are displayed in black.

A selected element can be edited in the graphical area in several ways. First the 'transform' button gives access to the 'translate' and 'scale' tools (click on '<' to get out of the 'transform' tools). After choosing one of these, drag the mouse on the graphical area to move and scale the selected element. Modification in the graphical area are automatically and immediately reflected in the data area, and vice-versa. Scaling is not available on text element, to change the size of a text element one can edit the 'style' attribute of the texts group.

If you make a mistake, you can undo the last actions with the 'undo' button. Undo also applies to the last modifications in the data area.

The 'draw' button gives access to path edition tools: 'edit', 'add', 'remove' (click on '<' to get out of the 'draw' tools). The 'edit' tool allows to edit the shape of the path by dragging the controls position with the mouse.

The 'add' button allows to extend a path. Click on the first or last anchor to add a segment at the beginning or end of the path, respectively. Click on a handle to add a new anchor at the center of the corresponding segment. The 'remove' button allows to delete an anchor in the path by clicking on it, however a path must have at least one segment and nothing will happen if one tries to remove an anchor from a path having only two.

Finally, the 'view' button gives access to zoom in/out and move the view in the graphical area. The 'reset' button sets the view back to its unzoomed and centered state.

The 'background' button allows to choose an image as background, to be used as a template when editing the shape of a kanji. The image's dimensions must be 109x109px and light color are recommended to avoid blocking the view of the paths and texts. One may need to click in the graphical area for the background to appear after selecting the file.

The creation of a new kanji from scratch can represent a relatively large amount of work. To make it easier the 'copy' and 'paste' button can be very useful. The 'copy' button saves in memory the currently selected element, and the 'paste' button add the copied element into the currently selected element (which must be a group). Copy and paste action can be done within the same instance or accross several ones (ie several kanji opened in different windows). One can use them as follow. The kanji 鯇 doesn't exist in the KanjiVG database (at time of writing), but we already have its constituent 魚 and 完. Then, open these two kanji, each one in a different window, and in a third window start a new kanji with the 'create' button. Delete the default path in the new kanji as we won't use it, then copy the 魚 group and paste it in the new kanji, and repeat with the 完 group (be aware that some browsers may ask confirmation the first time you copy/paste data for security reason). Data in KanjiVG files are ordered following the writing order, so take care to create your kanji in the right order! Set the backgroung image of 鯇 and transform/draw the pasted elements as needed.

One would also have to add the stroke numbers, which I haven't done in the screenshots above cause I'm lazy. Stroke numbers are not copied because paths and texts are treated separately in different groups. That's pity and not obvious to automate so I left it aside for now.

The shape of the new kanji is now done, and most of its attributes are already correct as they are also copy/pasted. However, one attribute that needs to be changed for sure is the id of the new kanji. In KanjiVGEditor, the 'id' attribute of the first top group is used as a reference. By default it is "kvg:StrokePaths_00000" in a newly created kanji. In our example case we would correct it to "kvg:StrokePaths_09bc7". All other elements id still have their copied value and must be corrected. Another tedious task that KanjiVGEditor takes care of with the 'id' button. Clicking that button automatically resets the value of all 'id' attributes according the reference one (yes, it also takes care of the number of groups and segments!). Other attributes may need to be modified by the user to complete the new kanji creation, notably the 'kvg:element' of the top group.

Once the new kanji is completely ready, click on 'encode' to get the raw data, which can be saved by clicking on 'save' to get a file ready to be pushed in the KanjiVG database (except for the license tag which you will have to add yourself as needed). Here again for security reason the output folder may be forced to a default one, check your browser settings, but at least the filename is correctly set to the hexadecimal value of the kanji.

And that's all folks! I hope this tool may be helpful and encourage people to keep improving the wonderful KanjiVG database. Don't hesitate to get in touch to let me know what doesn't work, could be improved, or simply tell how your using it, I would definitely appreciate it.