chess svg from path to text

[sugizo]

background
can't have pieces style

expectation
nice to have different pieces style

solution
use text instead of path when drawing chess pieces

attached the example output when using svg text to draw chess pieces

heres the code for king white on picture above (using unicode white king default without font family = ♔)

<style type="text/css">
    .st1{text-anchor:middle;}
    .st2{dominant-baseline:central;}
    .st3{font-size:45px;}
    .st4{font-family:"";}
</style>
    <text x="22.5" y="22.5" class="st1 st2 st3 st4">&#9812;</text>

heres the code for king white on picture above (using non unicode king = k for font family = chess)

<style type="text/css">
    .st1{text-anchor:middle;}
    .st2{dominant-baseline:central;}
    .st3{font-size:45px;}
    .st4{font-family:"Chess";}
</style>
    <text x="22.5" y="22.5" class="st1 st2 st3 st4">k</text>

[niklasf]

Unfortunately we can't use this approach and stay SVG Tiny compatible.

[sugizo]

In particular, SVG Tiny was defined for highly restricted mobile devices such as ; it does not support styling or scripting.

ref
https://en.wikipedia.org/wiki/SVG#Mobile_profiles

base on that, think you can use different approach from example above into :
e.g. for unicode

<text x="22.5" y="22.5" text-anchor="middle" dominant-baseline="central" font-size="45px" font-family="" >
&#9812;
</text>

e.g. for font

<text x="22.5" y="22.5" text-anchor="middle" dominant-baseline="central" font-size="45px" font-family="Chess" >
k
</text>

then anyone who want to change the chess piece could modify by pass the font family