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.

Once again 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.

Edit on 2025/09/04. This project is now available on CodeBerg !

Edit on 2026/02/23. Article updated to match the version 1.2.

Demo videos are available on YouTube here. 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.

When you create a new default kanji or load one the raw data gets automatically decoded and the app displays a structured representation of the kanji in the data area and graphical one in the graphical area. You can switch between the raw data and its structured representation with the "raw" and "structure" buttons.

Instead of loading a SVG file from your local disk, you may want to pull it from a public GitHub repository. It is possible with the "pull" functionality (button next to "load"). Click on "pull", select the repository's user, name, branch (all set by default to the main branch of the official KanjiVG repository) and the kanji hexadecimal value (remember you have a tool to convert between kanji and hexadecimal at the bottom of the raw text area), then click "pull" (or "cancel" if you changed your mind).

To help navigate the complex structure of a Kanji with lot of groups and elements it is possible to "fold" groups. A folded group's elements and subgroups are not displayed in the structured representation (but still displayed in the graphical area). Also, only "id" and "kvg:element" attributes are shown for folded groups. To fold/unfold a group, click on the 📁/📂 icons.

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 by clicking on "element" and then "add" buttons. The created element is added at the end of the group, with some default attributes. And of course these elements can also be deleted with the "delete" button (except for the root StrokePaths and StrokeNumbers elements).

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. Text element can also be selected by clicking on the text in the graphical area.

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 "edit" and then "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.

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. 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 image is automatically scaled to the 109x109px format of KanjiVG files.

The "edit" button gives access to the "copy", "cut" and "paste" buttons. There usage is obvious: cut or copy a selected element or group, and paste the cut or copied element or group into another selected one. In the context of KanjiVGEditor it is useful for: moving an element or group from a group to another one, or duplicate an element or group during the creation/edition of a kanji. Note that it is possible to copy/cut/paste between several instances of KanjiVGEditor. One can for example open the several individual components of a kanji (eg 魚 and 完), copy them and paste them one by one to form a new kanji (eg 鯇). See the videos linked above for example of the whole process.

Within the "element" menu the "before" and "after" buttons allow to reorder elements inside their parent group. As the order of the elements must follow the stroke order, this functionality is useful when editing or creating new kanji. Keep in mind that pasted or added element are always at the end of their group by default.

In the "tools" menu, the "add missing numbers", automatically create the missing stroke numbers and leave unchanged those already existing. The "reset all numbers" buttons in the other hand deletes all the existing stroke numbers and recreate them. In both case the order of the text element in the structure follows the increasing order, and newly created number are placed next to the beginning of the corresponding stroke. When creating a new kanji these tools alleviate most of the work, leaving only to the user the responsibility for fine tuning the position of the number in the graphical area.

Another tool helping with the creation of a new kanji is "reset all id", which automaticaly set the value of "id" attributes. To do so, it uses the "id" attribute of the root group ("kvg:StrokePaths_XXXXX") to get the hexadecimal value of the kanji, and then calculate the "id" of all other elements ("kvg:XXXXX-gY" and "kvg:XXXXX-sY").

Finally the raw data 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). 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 you're using it, I would definitely appreciate it.