Comments (15)
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...
from hanzivg.
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:
- The format.html doesn't work with relative coordinates and negative values yet, which is used in the SVG file you provided
- Also, your SVG editing software seems to have destroyed the necessary group structure, and the stroke numbers are missing
- We're not aiming for complete geometrical exactness here (exactly orthogonal lines), but a handwritten style
from hanzivg.
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?
from hanzivg.
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".
from hanzivg.
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?
from hanzivg.
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?
from hanzivg.
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?
from hanzivg.
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?
from hanzivg.
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
from hanzivg.
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.
from hanzivg.
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.
from hanzivg.
sounds great. hope that i can help along the way.
from hanzivg.
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
from hanzivg.
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
from hanzivg.
Did you find the time to give this a try yet? Otherwise, I'd close this issue soon for now.
from hanzivg.
Related Issues (4)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hanzivg.