Working on a KanjiVG files editor

[pascal Baillehache]

Hi everyone,

Each time someone requests for the correction of a kanji and that can't be (easily) done I think I should take some time to build a dedicated tool. Of course, I never have time and always forget about it, but this week the timing was finally right (not that I'm particularly empty handed at the moment, more because the mood was right). Then, I've made a prototype of a KanjiVG files editor and it's working enough to introduce it I think.

It's one simple html file, nothing to install, just open it in a browser (a local copy or one available online), works offline too, no ads/cookies/etc. Currently the functionalities are limited, although already enough to address some of the common requests I believe. I only wanted to quickly have something to show. However from there it wouldn't be difficult for me to add much more, eventually to make it a complete editor able to edit existing kanji or create new ones from scratch.

I'm not releasing it yet, only sharing here a demo video, and requesting for your comments. If the response is positive I'll keep working on it. If not, that's fine, I have plenty of other projects to have fun with. Be frank! :-)

https://youtu.be/OaOpwWIex2A

Waiting for your comments,

Pascal

[Ben Bullock]

On Wed, 2 Jul 2025 at 22:21, pascal Baillehache <baillehac...@gmail.com> wrote:

I'm not releasing it yet, only sharing here a demo video, and requesting for your comments. If the response is positive I'll keep working on it. If not, that's fine, I have plenty of other projects to have fun with. Be frank! :-)

https://youtu.be/OaOpwWIex2A

 

This looks like the sort of thing we need to edit the characters in a browser. 

[Chase Colburn]

This looks really good. I was also thinking of creating an editor. There are about 600 kanji in my project that don't have stroke data available that I plan to work on. What you have created so far looks very useful. Good job!

-Chase

[pascal Baillehache]

> This looks like the sort of thing we need to edit the characters in a browser. 

Thank you Ben.

> This looks really good. I was also thinking of creating an editor. There are about 600 kanji in my project that don't have stroke data available that I plan to work on. What you have created so far looks very useful. Good job!

Thank you Chase. That's motivating ! I'll keep working on it a few more days and get back to you here.

[pascal Baillehache]

Hi everyone,

KanjiVGEditor beta.000 is complete. There is a new video to introduce it here:

https://youtu.be/oHKKGjLzqIc

and an article about it on my website here:

https://baillehachepascal.dev/2025/kanjivgeditor.php

It can be used directly online here:

https://baillehachepascal.dev/Tools/KanjiVGEditor/index.html

or by copying the html file locally and opening it in your browser.

I'm eager to hear your comments!

Pascal

[Ben Bullock]

On Mon, 7 Jul 2025 at 15:07, pascal Baillehache <baillehac...@gmail.com> wrote:

Hi everyone,

KanjiVGEditor beta.000 is complete. There is a new video to introduce it here:

https://youtu.be/oHKKGjLzqIc

and an article about it on my website here:

https://baillehachepascal.dev/2025/kanjivgeditor.php

It can be used directly online here:

https://baillehachepascal.dev/Tools/KanjiVGEditor/index.html

or by copying the html file locally and opening it in your browser.

I'm eager to hear your comments!

Pascal

Thanks for uploading. It seems to have a lot of useful features.

[Chase Colburn]

Brilliant job Pascal. You just made my work infinitely easier. I really appreciate you taking the time to put this together. Hopefully it can be linked to from the KanjiVG github so others can find it easily. 

-Chase

--
--
You received this message because you are subscribed to the "KanjiVG" group.
For options and unsubscribing, visit this group at
http://groups.google.com/group/kanjivg
---
You received this message because you are subscribed to a topic in the Google Groups "KanjiVG" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/kanjivg/oUsLDSQNPrQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to kanjivg+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/kanjivg/2e98b470-3cb9-414f-85ab-743cef90678en%40googlegroups.com.

[Ben Bullock]

On Mon, 7 Jul 2025 at 15:07, pascal Baillehache <baillehac...@gmail.com> wrote:

Hi everyone,

KanjiVGEditor beta.000 is complete. There is a new video to introduce it here:

https://youtu.be/oHKKGjLzqIc

and an article about it on my website here:

https://baillehachepascal.dev/2025/kanjivgeditor.php

It can be used directly online here:

https://baillehachepascal.dev/Tools/KanjiVGEditor/index.html

I haven't tried all the features yet but here are some things I noticed:

The <title> is outside the <head> area so it fails to validate, see https://validator.w3.org/

It aligns as vertical blocks even when the browser is wide enough to accommodate the blocks horizontally. I was able to fix this by changing width 90% in divMain CSS to 100%.

At the moment there don't seem to be that many ways to manipulate the numbers except by editing text fields. As you might know a long term problem of kanjiVG has been that some of the stroke numbers are positioned badly or are missing so a big feature which would help with that would be a way to drag and drop stroke numbers.

Anyway it looks very good so far in terms of being able to edit the shapes much more easily than we were before. I haven't tried saving the file yet.

[pascal Baillehache]

> Brilliant job Pascal. You just made my work infinitely easier. I really appreciate you taking the time to put this together. Hopefully it can be linked to from the KanjiVG github so others can find it easily. 

Thanks Chase. I'm glad to hear that.

> I haven't tried all the features yet but here are some things I noticed:

> The <title> is outside the <head> area so it fails to validate, see https://validator.w3.org/

> It aligns as vertical blocks even when the browser is wide enough to accommodate the blocks horizontally. I was able to fix this by changing width 90% in divMain CSS to 100%.

> At the moment there don't seem to be that many ways to manipulate the numbers except by editing text fields. As you might know a long term problem of kanjiVG has been that some of the stroke numbers are positioned badly or are missing so a big feature which would help with that would be a way to drag and drop stroke numbers.

> Anyway it looks very good so far in terms of being able to edit the shapes much more easily than we were before. I haven't tried saving the file yet.

Thank you very much for the feedback, Ben. 

I have corrected the <title> tag problem and checked that it now passes the validation.

I have modified the CSS to make better use of the available width.

You can edit the position of the text label with the 'translate' tool. First select the label you wish to translate, then select 'transform'>'translate', then translate the label by dragging your mouse in the graphical area. Also check the demo video from 07:40 for an example.

[pascal Baillehache]

Clarifying something about the text selection: it can't be selected directly in the graphical area, you have to click on the element in the structured data area.

[Ben Bullock]

On Tue, 8 Jul 2025 at 10:13, pascal Baillehache <baillehac...@gmail.com> wrote:

You can edit the position of the text label with the 'translate' tool. First select the label you wish to translate, then select 'transform'>'translate', then translate the label by dragging your mouse in the graphical area. Also check the demo video from 07:40 for an example.

Thanks for the guidance on how to do that with the mouse. Moving/adding numbers to the characters has been one of the more annoying problems and this looks like it will be a big help. 

[pascal Baillehache]

Great ! If you have ideas of other functionalities that would be good to add feel free to ask. I'm willing to keep working on it little by little, but for now I'm just waiting to see if you and Chase find bugs in the beta version. Once everything seems fine I'll tag it as v1.0 and then I'll see how to improve that tool.

[pascal Baillehache]

Hi everyone,

I had some time available to work on KanjiVGEditor this week. 

Without further comments from you I assumed the app in its current state was good enough to tag as an initial version. So I went through the whole code, made a lot of cleaning, found and corrected a few bugs, and tagged it as version.01.000.000. I haven't added any new features, but now I have a clean state to keep working on.

It's also now available as a Git repository on CodeBerg: 

https://codeberg.org/baillehache_pascal/KanjiVGEditor 

The ready-to-use online version is still available and up to date:

https://baillehachepascal.dev/Tools/KanjiVGEditor/index.html

Cheers,

Pascal

[Ben Bullock]

Thank you for your work Pascal.

--

--
You received this message because you are subscribed to the "KanjiVG" group.
For options and unsubscribing, visit this group at
http://groups.google.com/group/kanjivg
---

You received this message because you are subscribed to the Google Groups "KanjiVG" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kanjivg+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/kanjivg/024d49ab-98b9-4b20-8917-92da271ac21en%40googlegroups.com.

[pascal Baillehache]

Hi Ben,
Looking for which features to add next to KanjiVGEditor I came back to your previous messages. As you mentioned the position of stroke numbers as a long term problem I'm thinking of what could be done to help with that. 

Here are some ideas:
1) Add the possibility to select numbers in the drawing area (currently possible only in the structure area) would make it easier to use.
2) Automatically add missing numbers and remove duplicates. When adding, simply positioning the number next to the start of its stroke and let the user refine the position manually.
3) Automatically position the numbers. That would require to define what is a "good" position. Is that simply "as near as possible to the beginning of the stroke without overlapping strokes and numbers" ?
1) and 2) are easy, so I think I'll go ahead and do it. 3) is doable but requires much more work, and I would need your help to define what is a "good" position. Do you think it's worth it ?

[Ben Bullock]

These all sound like good ideas, although the automatic positioning of numbers might take a lot of work. The main thing which I think would make this useful is the ability to get and put the edited images from a Github repository. That way people can use it to edit their own repository of KanjiVG.

To view this discussion visit https://groups.google.com/d/msgid/kanjivg/ee968e1e-a672-458a-868d-1a7f69a3cc15n%40googlegroups.com.

[pascal Baillehache]

I'm not sure to understand. Do you mean, you'd like to be able to pull/commit/push from/to a remote GitHub repository directly from the app ?

[Ben Bullock]

On Sun, 7 Sept 2025 at 11:28, pascal Baillehache <baillehac...@gmail.com> wrote:

I'm not sure to understand. Do you mean, you'd like to be able to pull/commit/push from/to a remote GitHub repository directly from the app ?

It would be nice to be able to at least load the image from a URL rather than a file on the local computer.

 

To view this discussion visit https://groups.google.com/d/msgid/kanjivg/26cf85ab-87f4-4a7c-88cb-167ae56d9c3dn%40googlegroups.com.

[pascal Baillehache]

Actually I thought of doing that from the beginning but then I thought, "and once the user has edited the kanji, what ? (s)he needs to save it on disk anyway". I couldn't see the workflow and then I did load/save from/to disk only.
I can do it, however it raises new questions. How to specify the URL ? Direct input of something like "https://raw.githubusercontent.com/KanjiVG/kanjivg/refs/heads/master/kanji/00021.svg" isn't very user friendly, right ? To hide the URL and to choose only the kanji looks better. Then, what if the user wants to load from a forked repository, or another branch ? So, when loading from URL, ask for the user/repository/branch/kanji (with defaults set to KanjiVG main) ? Is that how you see it ? If it is, I'll add it.
Coming back to the commit/push functionalities. I read a bit about it because I had never done it as a feature of a web app. I think I can do it, however my big concern is that it then requires user credentials and dealing with the GitHub API. Nothing impossible, but the scope of the web app suddenly inflates a good deal. Given the small amount of time I can dedicate to this project I'm not really eager to go that far. My initial goal was to make a simple SVG editor tailored for KanjiVG files. I'd prefer version control tasks to be handled by the user externally as (s)he does usually.

[Ben Bullock]

Hi Pascal

It's OK if you don't have any more time to add the features so please don't worry about that. I personally actually do not even have a copy of the files on the computer which I'm using to type this so I would have to load and save to a URL. Someone requested an addition of characters so now your editor exists we can direct him there.

Thanks again for your work so far.

To view this discussion visit https://groups.google.com/d/msgid/kanjivg/c0ec39cc-22c6-43f7-98fc-2b708d4820a2n%40googlegroups.com.

[pascal Baillehache]

Hi Ben,

Thanks for your explanation. Now I think I see your use case. With the "pull" feature one could use KanjiVGEditor to, at least, look at the data from a device where there is no local copy of the repository.

I've released a new version with the following additions/modifications:

* selection of a number in the graphical display
* pull data from a GitHub public repository
* remove duplicate numbers, add missing numbers (positioned next to the first control of the path), sort numbers
* automatically scale the background image to match the KanjiVG size
* prevent the user from deleting groups StrokePaths and StrokeNumbers

The online version is up to date:
https://baillehachepascal.dev/Tools/KanjiVGEditor/index.html

See my updated blog post for explanations about the new features if necessary:
http://localhost/Website/2025/kanjivgeditor.php

Looking for what could be done next, I think I would like to enable the user to choose a font and display a character in the background of the graphical area, to be used as a template when creating a new kanji. Currently only an image can be selected. I'd like to test with the originally used font, but I see it isn't free...

To view this discussion visit https://groups.google.com/d/msgid/kanjivg/CAN5Y6m86Kn9QAxNYDrJJS3dfxhc3Yw6mv2QJgEqUCxpWHMUm3A%40mail.gmail.com.

[Ben Bullock]

Thanks for your work on this very useful-looking editor. 

On Sun, 14 Sept 2025 at 18:43, pascal Baillehache <baillehac...@gmail.com> wrote:

Hi Ben,

Thanks for your explanation. Now I think I see your use case. With the "pull" feature one could use KanjiVGEditor to, at least, look at the data from a device where there is no local copy of the repository.

I've released a new version with the following additions/modifications:

* selection of a number in the graphical display
* pull data from a GitHub public repository

I couldn't see that in the interface or the blog post.

 

* remove duplicate numbers, add missing numbers (positioned next to the first control of the path), sort numbers
* automatically scale the background image to match the KanjiVG size
* prevent the user from deleting groups StrokePaths and StrokeNumbers

The online version is up to date:
https://baillehachepascal.dev/Tools/KanjiVGEditor/index.html

See my updated blog post for explanations about the new features if necessary:
http://localhost/Website/2025/kanjivgeditor.php

Maybe this is the correct URL:

https://baillehachepascal.dev/2025/kanjivgeditor.php

 

Looking for what could be done next, I think I would like to enable the user to choose a font and display a character in the background of the graphical area, to be used as a template when creating a new kanji. Currently only an image can be selected. I'd like to test with the originally used font, but I see it isn't free...

I think there is some open source google font but probably not the style we want.

 

To view this discussion visit https://groups.google.com/d/msgid/kanjivg/CAO6Lod4ceW150WAS01%2Btdxv3FN0YfmVhU-bS7WYuGV82xve3hg%40mail.gmail.com.

[pascal Baillehache]

* pull data from a GitHub public repository

I couldn't see that in the interface or the blog post.

I've double checked now and I think the updated versions are online. Maybe you're looking at cached versions ? 

In the app you can check the version number at the bottom, and in the blog post new paragraphs were added at the end.

 

Maybe this is the correct URL:

https://baillehachepascal.dev/2025/kanjivgeditor.php

You're right. Thanks for pointing out that mistake.

 

I think there is some open source google font but probably not the style we want.

Indeed.

I've looked a little about this and understand I can't do it the way I initially planned. But I'll keep thinking about it.

 

[pascal Baillehache]

Here is a screenshot of what the font functionality would look like. I've used the Google Noto Serif JP font as an example. All the "mechanics" is solved, the only problem from there would be to have access to a font with the appropriate style.