Font path rendering with SVG

Question

I am trying to Render the Character "ٹ" according to my Font Style but it is not working. It is rendering the default font, not mine. Is there anything I am missing? Here is the code:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="300"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
>
<style type="text/css">
<![CDATA[
.FontFirstSVGFont{font-family:'UrduMe';}
]]>
</style>

<defs>
<font>
<font-face font-family="UrduMe"/>
<glyph unicode="ٹ">
<path
       style="fill:#000000;display:inline"
       id="path2998-7"
       d="m 248.80153,132.52792 c 0.46657,1.42688 0.86292,2.86169 1.10703,4.34417 0.21353,1.48506 0.24006,2.98718 0.25784,4.48467 0.11018,1.53762 -0.35352,2.9685 -1.0374,4.3219 -0.62849,1.26291 -1.7467,2.13138 -2.79106,3.03163 -3.45764,2.48125 -7.51307,4.50988 -11.09046,6.47621 -0.17847,0.0981 -0.40332,0.0718 -0.59377,0.14388 -0.17196,0.0651 -0.32277,0.17624 -0.48416,0.26437 -3.57755,1.4532 -0.77971,0.34289 8.12117,-4.70226 0.15165,-0.086 -0.29818,0.18065 -0.44778,0.27014 -0.5096,0.30482 -1.00878,0.62432 -1.51903,0.92808 -3.63536,2.85541 -7.96723,4.60704 -11.89092,7.04128 -0.68242,0.44521 -1.509,0.3911 -2.25848,0.58876 -0.36196,0.0955 -0.69559,0.27788 -1.05034,0.39735 -1.18947,0.13829 -2.27649,0.56323 -3.42916,0.84582 -1.29616,0.25558 -2.62208,0.27738 -3.93841,0.30174 -1.25342,0.064 -2.46043,0.45152 -3.71879,0.58898 -1.3722,0.11971 -2.75088,0.12419 -4.12722,0.13161 -1.42834,0.003 -2.85668,-4.6e-4 -4.28502,-0.002 -1.42941,-0.002 -2.85882,-0.002 -4.28823,-0.002 -1.42863,-1.6e-4 -2.85726,-1.2e-4 -4.28589,-1.1e-4 -1.42856,2e-5 -2.85712,3e-5 -4.28568,3e-5 -1.42857,1e-5 -2.85714,1e-5 -4.28571,1e-5 -1.42858,0 -2.85715,0 -4.28572,0 -1.42857,0 -2.85714,0 -4.28571,0 -1.42857,0 -2.85715,0 -4.28572,0 -1.42857,0 -2.85714,0 -4.28571,0 -1.42857,0 -2.85714,0 -4.28572,0 -1.42857,0 -2.85714,0 -4.28571,0 -1.42857,0 -2.85714,0 -4.28571,0 -1.42858,0 -2.85715,0 -4.28572,0 -1.41237,0.0473 -2.77618,0.0373 -4.15305,-0.27943 -1.06526,-0.36707 -2.25827,-0.66819 -3.28149,-1.14728 -1.2846,-0.36239 -2.07933,-0.96272 -2.6568,-2.17411 -0.5636,-1.35683 -0.32478,-2.62017 0.172,-3.93834 0.3759,-1.26602 0.95058,-2.43099 1.71603,-3.50322 3.04415,-3.71883 7.69107,-5.88367 12.17848,-7.47721 0.22748,-0.0598 0.45495,-0.11958 0.68243,-0.17938 l -2.9715,3.59976 0,0 c -0.21155,0.0816 -0.63464,0.24478 -0.63464,0.24478 -3.34997,1.56272 -12.72241,7.08308 1.91183,-1.51996 0.17645,-0.10372 -0.3694,0.17989 -0.53802,0.2959 -0.46285,0.31844 -0.5614,0.49932 -0.92158,0.93184 -0.89958,0.8502 -1.51428,1.96779 -1.85321,3.15349 -0.40227,1.09422 -1.02063,1.99027 -0.53466,3.18536 0.42747,0.96036 1.31012,1.14817 2.23928,1.50124 1.04412,0.35302 2.06732,0.79011 3.15441,0.98825 1.32691,0.21652 2.6721,0.10137 4.01162,0.12735 1.42857,0 2.85714,0 4.28571,0 1.42857,0 2.85714,0 4.28571,0 1.42858,0 2.85715,0 4.28572,0 1.42857,0 2.85714,0 4.28571,0 1.42857,0 2.85715,0 4.28572,0 1.42857,0 2.85714,0 4.28571,0 1.42857,0 2.85714,0 4.28572,0 1.42857,0 2.85714,0 4.28571,0 1.42857,0 2.85714,0 4.28571,-1e-5 1.42856,-1e-5 2.85712,-2e-5 4.28568,-3e-5 1.42867,1e-5 2.85734,-1e-5 4.28601,3.5e-4 1.42956,4.7e-4 2.85912,0.001 4.28868,0.003 1.4264,0.002 2.85287,0.006 4.27921,-0.009 1.35694,-0.0226 2.7185,-0.0499 4.06344,-0.24918 1.2535,-0.20898 2.4891,-0.54937 3.77254,-0.49116 1.28307,-0.0581 2.57541,-0.13981 3.81153,-0.51839 1.12568,-0.34384 2.28448,-0.51586 3.40261,-0.88607 1.08435,-0.33852 2.2301,-0.48909 3.20329,-1.12841 3.55497,-1.53796 0.23861,-0.12655 -8.04875,4.73494 -0.15798,0.0927 0.34089,-0.13726 0.49967,-0.22853 0.72845,-0.41873 0.19741,-0.20223 0.87007,-0.73548 0.15359,-0.12176 0.33292,-0.20695 0.49938,-0.31042 0.58058,-0.49053 1.25751,-0.88993 1.91941,-1.26865 3.17736,-1.81803 6.34646,-3.6506 9.53303,-5.45244 0.15967,-0.0903 0.33552,-0.14838 0.50328,-0.22258 3.36197,-1.18169 7.98338,-4.47388 -7.48222,4.5222 -1.22952,0.71519 2.57237,-1.68067 1.57187,-0.92605 1.08044,-0.75498 2.09708,-1.62578 2.96877,-2.61974 0.66343,-1.21211 1.39377,-2.41446 1.27302,-3.85933 -0.007,-1.45351 -0.0117,-2.91101 -0.17721,-4.35708 -0.20466,-1.46774 -0.54097,-2.90613 -1.15962,-4.261 l 9.35095,-4.99945 z"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccccccccccccccccccssssssssssccccccccccccsccccccsssssssssccscccccccsscsccsccccccc" />
    <path
       style="fill:#000000"
       id="path4565"
       d="m 197.46353,125.32287 c -0.0449,0.72849 -0.0359,1.45912 -0.0351,2.18861 8.1e-4,0.7445 0.003,1.489 0.004,2.2335 7.5e-4,0.71647 8e-4,1.43293 8.1e-4,2.1494 10e-6,0.71446 0,1.42891 -1e-5,2.14337 -2e-5,0.71478 -2e-5,1.42955 -2e-5,2.14431 0,0.71483 0,1.42965 0,2.14446 0,0.71483 0,1.42965 0,2.14448 0,0.59567 0,1.19135 0,1.78704 0,0 -4.76702,2.37697 -4.76702,2.37697 l 0,0 c 0,-0.59568 0,-1.19137 0,-1.78704 0,-0.71483 0,-1.42965 0,-2.14446 0,-0.71482 0,-1.42965 0,-2.14447 0,-0.71477 0,-1.42954 -3e-5,-2.14429 0,-0.71446 -1e-5,-1.42891 0,-2.14337 3e-5,-0.71675 8e-5,-1.43348 8e-4,-2.15023 8.1e-4,-0.746 0.003,-1.49202 0.004,-2.23802 7.7e-4,-0.7178 0.01,-1.43688 -0.0351,-2.15359 0,0 4.82657,-2.40667 4.82657,-2.40667 z"
       inkscape:connector-curvature="0" />
    <path
       style="fill:#000000"
       id="path4567"
       d="m 192.28689,143.76975 c 0.14887,-0.64006 0.40618,-1.23426 0.73307,-1.80422 1.29718,-1.89354 3.63047,-2.41626 5.65441,-3.63337 1.41757,-0.85248 -2.88458,1.62361 -4.32689,2.43541 0.24825,-0.15527 0.28643,-0.18283 0.54654,-0.33003 16.27015,-9.2076 -2.96612,1.64562 0.83073,-0.50333 1.62104,-0.91746 3.2491,-1.82298 4.87362,-2.73448 0.65472,-0.20946 1.34915,-0.22057 2.03117,-0.23586 0.72867,-0.008 1.45741,-0.003 2.18607,4.3e-4 0.8016,0.0865 1.12479,0.67388 1.29824,1.37185 0.11743,0.70087 0.10165,1.4145 0.0993,2.12235 -0.0208,0.44148 0.0628,1.22872 -0.42002,1.50401 -1.61453,0.92061 -3.25995,1.78833 -4.88994,2.6825 -0.41563,0.0392 -0.84291,0.0516 -1.23356,0.21618 -0.16774,0.0706 -0.3136,0.18397 -0.47725,0.26324 -0.59703,0.22689 -1.2437,0.24916 -1.87597,0.27429 -0.72282,0.0191 -1.44601,0.0143 -2.16899,0.0127 -0.73172,-0.003 -1.46344,-0.003 -2.19515,-0.004 -0.73065,-4.5e-4 -1.46129,-4.4e-4 -2.19193,-4.4e-4 -0.73042,0 -1.46086,2e-5 -2.1913,3e-5 -0.73043,2e-5 -1.46087,2e-5 -2.1913,2e-5 -0.51497,0.10671 -1.01378,0.27338 -1.44405,0.57212 0,0 4.18095,-3.29452 4.18095,-3.29452 l 0,0 c 0.51216,-0.1987 1.03035,-0.37936 1.59146,-0.35509 0.73043,0 1.46088,-2e-5 2.19131,-2e-5 0.73043,-1e-5 1.46087,-4e-5 2.19132,0 0.7307,6e-5 1.46142,1.5e-4 2.19212,9.4e-4 0.73171,9.3e-4 1.46342,0.003 2.19513,0.004 0.71803,-4.3e-4 1.43706,0.003 2.15375,-0.046 0.61486,-0.0573 1.22359,-0.15077 1.77536,-0.44114 0.55837,-0.23608 1.1622,-0.25117 1.73097,-0.44922 -1.45279,0.82783 -2.91678,1.63711 -4.35835,2.4835 -0.0748,0.0439 0.17109,-0.0375 0.25078,-0.0718 0.40783,-0.17594 0.43554,-0.59131 0.4171,-0.97615 0.003,-0.66978 0.0199,-1.34319 -0.0628,-2.0094 -0.10662,-0.53573 -0.29244,-0.80195 -0.89653,-0.7837 -0.72485,-0.001 -1.45021,-0.008 -2.1746,0.0219 -0.65493,0.0415 -1.31901,0.10063 -1.90197,0.42407 1.43921,-0.81825 2.87768,-1.63777 4.31766,-2.45474 0.0913,-0.0518 -0.18056,0.107 -0.27155,0.15921 -1.61679,0.92857 -3.26603,1.80485 -4.85178,2.78331 -1.39822,0.86273 2.85566,-1.62998 4.28882,-2.43595 0.18356,-0.10317 -0.68637,0.44237 -0.54328,0.32207 -1.61745,0.92267 -3.23186,1.85048 -4.85237,2.768 -1.43853,0.8145 2.86947,-1.6418 4.30646,-2.4589 0.57215,-0.32534 -0.56978,0.31771 -0.69113,0.45724 -0.0646,0.0743 -0.11123,0.16212 -0.16678,0.24317 -0.39913,0.44448 -0.68838,1.02487 -0.77529,1.61075 0,0 -4.88364,2.28944 -4.88364,2.28944 z"
       inkscape:connector-curvature="0" />
</glyph>

</font>
</defs>

<text x="100" y="100" class="FontFirstSVGFont">
ٹ
</text>

</svg> 

If I draw the paths within <glyph>, then the font is created successfully but when I attach to the unicode "ٹ" it is not rendered...

Answer 1

Opera, Webkit and Batik (to name a few) have support for the SVG Tiny 1.2 subset of svgfonts, which allow you to specify a 'd' attribute on the <glyph> element for defining the glyph. It's similar to a single path element.

In your example you could concatenate the 'd' attributes of the three <path> elements into a string, and set that as 'd' on the <glyph> element. That should work.