Custom radicals - SVG images download?

WaniKani
1

I know it can be pulled through the API but I am not an API wizard. Does anyone have a simple ZIP file with the custom radicals that I can download? …And ideally in black? ………THANK UUUU

2

Here you go:

4 Likes
3

um… did you leave out one? I can’t find “scooter”

4

Weird—the API returns a character for scooter: “⻌”, so I filtered it out. But you are right, WK itself still displays it as an image. It does not seem that I can tell just from the API which radicals are displayed as images on WK.

Anyway, here is a link to the scooter svg:
https://cdn.wanikani.com/images/88-subject-114-with-css-original.svg?1520987069

If you find more SVGs missing from my zip-file, let me know.

5

huh! weird! if there is a character for it why do we need an image. thanks.

6

Originally, they were thinking of using SVGs for all radicals so they could be dealt with in the same way. But it looks like they haven’t gone down that path. (yet?)

I think all but about 10 radicals have SVGs, and I think the reason those few don’t is because they are new.

Anyway, here’s some Javascript that will fetch, zip, and download all of the radicals that have SVG files:

code 
var include_style = true;
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/jszip/3.3.0/jszip.min.js').then(function(){
    wkof.ItemData.get_items().then(function(items){
        var radicals = items.filter(item => item.object == 'radical');
        var radicals_with_svgs = radicals.filter(item => item.data.character_images.filter(ci => ci.content_type == 'image/svg+xml' && ci.metadata.inline_styles == include_style).length > 0);
        var radical_info = radicals_with_svgs.map(item => ({name:item.data.slug, url:item.data.character_images.filter(ci => ci.content_type == 'image/svg+xml' && ci.metadata.inline_styles == include_style)[0].url}));
        var fetchers = radical_info.map(radical => function(){
            console.log('Fetching "'+radical.name+'"');
            return $.get({url:radical.url, dataType:'text'})
                .then(svg => radical.svg = svg);
        });
        var do_sequentially = funcs => funcs.reduce((promise, func) => promise.then(result => func().then(Array.prototype.concat.bind(result))), Promise.resolve([]));
        do_sequentially(fetchers)
        .then(function(svgs){
            svgs = svgs.filter((x, i) => i%3==0);
            console.log('Done!');
            var zip = new JSZip();
            for (var i = 0; i < radical_info.length; i++) {
                zip.file(radical_info[i].name+'.svg',radical_info[i].svg);
            }
            zip.generateAsync({type:"base64"}).then(function (base64) {
                location.href="data:application/zip;base64," + base64;
            });
        })
    })
})

Just copy it and paste it in the Javascript Console (press F12 and click on the Console tab, then paste the code above and press enter).
It takes a second or two before it starts showing the files downloading.

There are two versions of the SVGs: with and without CSS styles.
The ones ‘with’ styles will display fine in your browser if you just click on the svg file, but they have a fixed font thickness and color (black).

The code above downloads the SVGs with styles. If you want the ones without, just change the first line to false.

If you want the ones without styles, use the following style as a template in your html:

svg.radical * {
    stroke: #000;
    stroke-linecap:square;
    stroke-miterlimit:10;
    stroke-width:68px;
    fill: none;
}

[edit: For some reason, my ad blocker had a problem with one of the SVGs with styles, so I had to specifically unblock it. It has something to do with the name of the file]

1 Like
7

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.