skishore / makemeahanzi

Free, open-source Chinese character data
https://www.skishore.me/makemeahanzi/
Other
1.85k stars 464 forks source link

How did you generate the SVGs files ? #14

Closed Ydalb closed 7 years ago

Ydalb commented 7 years ago

Hey,

I was wondering how did you generate the SVGs (from the "svgs" folder), from the graphics.txt ? Do you have some kind of script somewhere you could share ?

I tried to match all lines of graphics.txt to files in the svgs folder, but it seems that, when you order the svg files by "number" ASC, some files doesn't match the line in graphics.txt.

Regards, Quentin

skishore commented 7 years ago

Hi Quentin,

All of the data from this project was produced by the code in the tool branch. In particular, the dictionary, graphics, and SVGs are exported from a database that that tool operates on.

As you note, though, it's possible to pull out a script that produces an SVG from the graphics file alone. Those images are produced by the "exportSVGs" function here.

That function is a thin wrapper around a Blaze HTML template and some Javascript that produces the appropriate template variables. The one thing that makes extracting that into a script slightly tricky is including a library to render the template. Right now, I'm using this one, but it might not work outside a Meteor environment.

Would you be interested in trying to pull that code out? I think it would help others, as well - for example, it would solve issues like https://github.com/skishore/makemeahanzi/issues/13.

Ydalb commented 7 years ago

Thanks for your quick answer @skishore !

I noticed that there is a small "offset" (like 5), meaning that the line X of graphics.txt correponds to the svg n° X+5.

Maybe some svgs files are "outated" and we just need to refresh them.

I'm trying to get the logic of how the SVG files was generated (I see the path / medians / clipPath stuff but some info are missing to me, like the attribute "stroke-dasharray="XXX YYY".

I'm going to look in you links and I'll come back with some answers I hope :D

skishore commented 7 years ago

Huh. I don't see the offset you mentioned (for example, the first SVG file I see is 11904.svg, corresponding to the first character ⺀). Both graphics.txt and the SVGs should be sorted by Unicode code point. Is it possible that you have an old copy of graphics.txt?

Ydalb commented 7 years ago

Hum, indeed, there is no offset in both my version (downloaded in may) and the current one lol. I think I did something wrong :D

I moved all data to an SQL database, and I probably fucked up my script :P

I guess this issue is solved now :v

skishore commented 7 years ago

I'll close it for now, but if you extract the SVG generation into a script, I'll take a look! Actually, I think there are even more helpful ways to expose the data. For example, the project could include a small Javascript library that takes a DOM element, a time delay, and a character's graphics.txt row and renders a stroke order animation there - what do you think?

Ydalb commented 7 years ago

Oh yeah ! It would be very nice ! I'll keep you in touch if I make it.