help to create svg for missing character

[2600box]

i wanted the stroke order for 055ce 嗎

i have tried to follow the instructions here: https://github.com/Connum/hanzivg#how-to-create-a-new-character

but can't figure it out. i have not worked with svg before.

to start, when opening the template I cannot find the "orange character of the background layer "?

can you offer further guidance?

[2600box]

ok. i tried a different svg editor and it showed the character. here is the file produced. nothing happens when i drop it on the format.html file in chrome or firefox...

055ce.raw.svg.zip

[Connum]

Hiya,

first of all, thanks for your willingness to help!

If I'm not mistaken, this is a Traditional character, right? I was aiming for completeness of Simplified HSK characters first, but of course other additions are welcome, too. I haven't figured out a naming convention for traditional character variants, though, and there are several other issues here:

1. The format.html doesn't work with relative coordinates and negative values yet, which is used in the SVG file you provided
2. Also, your SVG editing software seems to have destroyed the necessary group structure, and the stroke numbers are missing
3. We're not aiming for complete geometrical exactness here (exactly orthogonal lines), but a handwritten style

[2600box]

yes, i am interested in traditional characters. if i can get this to work, i can see myself creating them as i progress through my learning.

i have tried several software and the only svg software i have managed to find that actually shows the orange background character is inkscape which seems to destroy the groups. can i ask what do you use?

i realised that i had not actually installed the CNstrokeorder font and this was necessary to get the handwritten style.

attached is a new version with the font. I am unclear if i am supposed to do something to make the number iterate over the strokes.
055ce.raw.svg.zip

not sure what to do about the other issues. may be just a different software?

[Connum]

I'm also using Inkscape, so it should work fine... But in the new file, the groups are still missing. I'd suggest you open the template file again and make sure that the strokes are placed inside the group with the id "kvg:StrokePaths_XXXXX", and the numbers are placed inside the group with the id "kvg:StrokeNumbers_XXXXX". Maybe it helps to display the XML Editor via Ctrl+Shift+X. There, you can re-order the strokes and numbers as well.

The numbers have to be placed manually, close to each stroke starting point. You can simply duplicate the number by selecting the "1", pressing Ctrl+D and dragging the copy to the new location, then change the text to "2", and so on.

Regarding the style of the strokes, please refer to the existing files. We should aim for a consistent style, e.g. rounded strokes with Bezier curves instead of simply adding coordinates via a simple click.

Regarding naming conventions, I'd suggest the following: If the Traditional and Simplified characters each have an own unicode hex code (in this example 嗎/吗, 55CE vs 05417), we just name them accordingly, because there is no collision. Should there be a case where the same character hex code has different stroke order or stroke variations between Traditional/Simplified, the simplified character should use the normal hex code in its file name, and the Traditional character should be suffixed with "_trad", e.g. "0000_trad.svg".

[2600box]

thanks for guidance. i made some progress. have a look. the non raw was exported from the format.html

do i need to colour code the strokes manually?

Archive.zip

[2600box]

so i tested it with the colorizer and it seems quite good to me. one thing i can't figure out is that my character appears much smaller than kanjivg depictions when rendered. any idea how to rectify that?

[Connum]

Nice work! I loaded your raw file into format.html again after re-positioning the numbers a bit (trying to put them as closely to the starting points as possible, and positioning numbers for horizontal lines to the left, and for vertical lines on top.

With format.html, I then created groups for the different components. The character decomposition functionality at https://www.mdbg.net/chinese/dictionary?cdqchi=%E5%97%8E is a great resource for that (available via the double-arrow icon right to the character). Paste the character itself as "element" of the root group, and the different components similarly. Don't forget to choose the position (left/right/top/bottom...) and set the radical. Also don't forget to set the type attribute for each stroke.

If you checked out the repo on a (local) web server, you can also view /compare.php?hanzi=嗎 to get links to different sources for the stroke order/radical/composition information. (If not, it would be a good idea, because you can also run test.php to check for any errors. For instance, the svg was using a transform on the numbers group, which should be avoided. Instead, move each single number instead of the group as a whole).

I fixed all that and now the file passes all the tests when loaded into format.html or running test.php.
055ce.zip

I'll add it to the repo now! Thanks again!

so i tested it with the colorizer and it seems quite good to me. one thing i can't figure out is that my character appears much smaller than kanjivg depictions when rendered. any idea how to rectify that?

Hmmm... The SVG files have the same size, and the character does not seem to be noticeably smaller than the rest - can you share a screenshot of your character size issue?

[2600box]

great! upon loading your version up in format.html i see there are no errors and the groups and whatnot make sense. I will hopefully get it right next time.

for the size issue, your black & white version fills the viewbox, but when it is renders in colour, it is only a quarter of the viewbox. the rendered version i have open in inkscape below was rendered with ./kanji_colorize.py --characters 嗎 but you can see this is the same as what happens in anki.

looking at the xml of the svg files I can't see why, but maybe this will help?

[2600box]

i was returning to look at this and did some different things, like taking 媽 svg which renders at the correct size, and changing the radical to 嗎. it renders at large size until i put it through format.html and then it renders small, the same as the original 嗎... if however, i just take 媽 and run it through format.html it renders fine. i am at a loss

i also noticed that somewhere along the line, our new svg of 嗎 was malformed, with the horizontal strokes of 馬 not extending fully. i think i fixed this correctly and made a pull request. #5

[2600box]

figured it out. if I change all id="hvg:055ce to id="kvg:055ce then the colouriser works as expected with the correct rendering, so this is a limitation of the _kanji_colouriser which guess could be fixed in an updated fork of _hanzi_colouriser.

[Connum]

I don't have the time currently to look into this myself, but I'll have a look asap. I half expected that third party tools processing kanjivg files might need an update to work with hanzivg files, but I wanted to use an own namespace for the sake of differentiation. It should be a matter of adapting some regexes or DOM queries to make it work.

[2600box]

sounds great. hope that i can help along the way.

[2600box]

just an extra data point on this, i have found the animhanzi did the same thing, they are using codes like kvg:054ea instead of hvg. https://github.com/parsimonhi/animHanzi

[Connum]

I have made some progress with adapting the kanji-colorizer plugin for use with HanziVG in Anki >2.1
If you'd like to give it a try, extract this into an arbitrarily named subfolder of %AppData%\Anki2\addons21 (this is the Windows path, for a different OS use Tools > Add-ons > View Files): https://github.com/Connum/hanzi-colorize/releases/download/testrelease/HanziColorizerAnkiAddon.zip

[Connum]

Did you find the time to give this a try yet? Otherwise, I'd close this issue soon for now.