Access a node of external SVG font within an existing SVG through <use xlink:href />

Question

I have a SVG container inside of my HTML page. Also I have bunch of svg fonts which are available in 'fonts' folder beside of my page. My svg fonts are like this:

<?xml version="1.0" ?>
<svg fill="black" stroke="none" >
<defs>
  .
  .
  .
  <symbol id="A"><path d="M 1.736448, 0.202368 Q 1.736448, 0.108800 1.690752, 0.054400 Q 1.642880, -0.006528 1.551488, -0.006528 Q 1.501440, -0.006528 1.464448, 0.035904 Q 1.427456, 0.078336 1.427456, 0.128384 Q 1.427456, 0.143616 1.441600, 0.172992 Q 1.455744, 0.202368 1.455744, 0.215424 Q 1.455744, 0.295936 1.349120, 0.561408 Q 1.249024, 0.811648 1.190272, 0.898688 Q 0.979200, 0.848640 0.737664, 0.705024 Q 0.583168, 0.615808 0.328576, 0.424320 Q 0.304640, 0.287232 0.282880, 0.150144 Q 0.237184, -0.026112 0.137088, -0.026112 Q 0.069632, -0.026112 0.031552, 0.023936 Q -0.006528, 0.073984 -0.006528, 0.143616 Q -0.006528, 0.200192 0.009792, 0.313344 Q 0.026112, 0.426496 0.026112, 0.488512 Q 0.026112, 0.550528 0.071808, 0.583168 Q 0.143616, 1.009664 0.237184, 1.229440 Q 0.382976, 1.575424 0.668032, 1.727744 L 0.765952, 1.769088 Q 0.844288, 1.769088 0.894336, 1.684224 Q 0.966144, 1.562368 1.081472, 1.429632 Q 1.103232, 1.405696 1.299072, 1.198976 Q 1.436160, 1.196800 1.436160, 1.066240 Q 1.436160, 1.051008 1.433984, 1.035776 Q 1.523200, 0.892160 1.625472, 0.628864 Q 1.736448, 0.335104 1.736448, 0.202368 M 0.985728, 1.120640 Q 0.826880, 1.279488 0.724608, 1.425280 Q 0.554880, 1.296896 0.496128, 1.164160 Q 0.476544, 1.118464 0.402560, 0.822528 Q 0.617984, 0.970496 0.985728, 1.120640 " /></symbol>
  <symbol id="B"><path d="M 1.779968, 0.796416 Q 1.779968, 0.548352 1.451392, 0.341632 Q 1.183744, 0.174080 0.761600, 0.067456 Q 0.398208, -0.026112 0.152320, -0.026112 Q 0.087040, -0.026112 0.040256, 0.011968 Q -0.006528, 0.050048 -0.006528, 0.113152 Q -0.006528, 0.204544 0.091392, 0.239360 Q 0.143616, 0.256768 0.265472, 0.265472 Q 0.163200, 0.448256 0.163200, 1.014016 Q 0.163200, 1.238144 0.178432, 1.462272 L 0.145792, 1.462272 Q 0.084864, 1.462272 0.045696, 1.499264 Q 0.006528, 1.536256 0.006528, 1.597184 Q 0.006528, 1.769088 0.450432, 1.769088 Q 0.844288, 1.769088 0.946560, 1.762560 Q 1.303424, 1.740800 1.505792, 1.653760 Q 1.771264, 1.538432 1.771264, 1.305600 Q 1.771264, 1.140224 1.584128, 1.059712 Q 1.779968, 0.959616 1.779968, 0.796416 M 1.490560, 1.320832 Q 1.429632, 1.492736 0.720256, 1.492736 Q 0.635392, 1.492736 0.461312, 1.488384 Q 0.448256, 1.249024 0.446080, 1.129344 Q 0.530944, 1.142400 0.678912, 1.151104 Q 0.850816, 1.159808 0.913920, 1.166336 Q 1.127168, 1.190272 1.490560, 1.320832 M 1.499264, 0.781184 Q 1.368704, 0.896512 1.109760, 0.896512 Q 0.979200, 0.896512 0.776832, 0.868224 Q 0.504832, 0.831232 0.446080, 0.826880 Q 0.496128, 0.498304 0.496128, 0.387328 Q 0.496128, 0.324224 0.485248, 0.300288 Q 0.800768, 0.359040 1.059712, 0.454784 Q 1.464448, 0.604928 1.499264, 0.781184 " /></symbol>
  <symbol id="C"><path d="M 1.788672, 0.554880 Q 1.788672, 0.280704 1.429632, 0.110976 Q 1.135872, -0.028288 0.824704, -0.028288 Q 0.515712, -0.028288 0.278528, 0.110976 Q -0.004352, 0.276352 -0.004352, 0.563584 Q -0.004352, 0.789888 0.097920, 1.064064 Q 0.208896, 1.362176 0.385152, 1.549312 Q 0.589696, 1.766912 0.824704, 1.766912 Q 1.024896, 1.766912 1.329536, 1.655936 Q 1.692928, 1.523200 1.692928, 1.366528 Q 1.692928, 1.305600 1.649408, 1.262080 Q 1.605888, 1.218560 1.544960, 1.218560 Q 1.531904, 1.218560 1.401344, 1.283840 Q 1.242496, 1.366528 1.131520, 1.407872 Q 0.953088, 1.473152 0.824704, 1.473152 Q 0.611456, 1.473152 0.441728, 1.109760 Q 0.293760, 0.798592 0.293760, 0.554880 Q 0.293760, 0.415616 0.491776, 0.332928 Q 0.646272, 0.267648 0.809472, 0.267648 Q 1.070592, 0.267648 1.218560, 0.328576 Q 1.407872, 0.409088 1.503616, 0.611456 Q 1.551488, 0.713728 1.636352, 0.713728 Q 1.703808, 0.713728 1.746240, 0.668032 Q 1.788672, 0.622336 1.788672, 0.554880 " /></symbol>
  <symbol id="D"><path d="M 1.771264, 0.909568 Q 1.771264, 0.724608 1.499264, 0.489600 Q 1.262080, 0.285056 0.926976, 0.126208 Q 0.600576, -0.028288 0.417792, -0.028288 Q 0.324224, -0.028288 0.248064, 0.006528 Q 0.150144, 0.050048 0.150144, 0.132736 Q 0.150144, 0.232832 0.232832, 0.269824 Q 0.163200, 0.428672 0.163200, 0.504832 Q 0.163200, 0.626688 0.189312, 0.892160 Q 0.213248, 1.146752 0.211072, 1.281664 L 0.206720, 1.481856 Q -0.006528, 1.468800 -0.006528, 1.623296 Q -0.006528, 1.714688 0.076160, 1.747328 Q 0.126208, 1.766912 0.235008, 1.766912 Q 0.752896, 1.766912 1.192448, 1.586304 Q 1.771264, 1.349120 1.771264, 0.909568 M 1.488384, 0.940032 Q 1.488384, 1.166336 1.090176, 1.323008 Q 0.816000, 1.431808 0.493952, 1.468800 L 0.496128, 1.327360 Q 0.498304, 1.190272 0.474368, 0.929152 Q 0.448256, 0.659328 0.448256, 0.530944 Q 0.448256, 0.476544 0.472192, 0.424320 L 0.474368, 0.424320 Q 0.522240, 0.313344 0.517888, 0.276352 Q 0.676736, 0.326400 1.031424, 0.522240 Q 1.427456, 0.737664 1.466624, 0.829056 Q 1.488384, 0.879104 1.488384, 0.940032 " /></symbol>
  <symbol id="E"><path d="M 1.925760, 1.551488 Q 1.925760, 1.423104 1.742976, 1.388288 Q 1.679872, 1.377408 1.460096, 1.377408 Q 1.090176, 1.377408 0.504832, 1.301248 Q 0.500480, 1.144576 0.485248, 1.042304 Q 0.842112, 1.098880 1.144576, 1.098880 Q 1.407872, 1.098880 1.407872, 0.935680 Q 1.407872, 0.872576 1.361088, 0.827968 Q 1.314304, 0.783360 1.249024, 0.783360 Q 0.992256, 0.783360 0.419968, 0.720256 Q 0.409088, 0.607104 0.409088, 0.515712 Q 0.409088, 0.374272 0.452608, 0.285056 Q 0.456960, 0.285056 0.874752, 0.313344 Q 1.127168, 0.330752 1.296896, 0.330752 Q 1.823488, 0.330752 1.823488, 0.147968 Q 1.823488, 0.084864 1.779968, 0.035904 Q 1.736448, -0.013056 1.673344, -0.013056 Q 1.584128, -0.013056 1.407872, 0.003264 Q 1.231616, 0.019584 1.142400, 0.019584 Q 0.990080, 0.019584 0.686528, -0.004352 Q 0.382976, -0.028288 0.230656, -0.028288 Q 0.015232, -0.028288 0.015232, 0.128384 Q 0.015232, 0.241536 0.126208, 0.276352 Q 0.097920, 0.391680 0.097920, 0.524416 Q 0.097920, 0.670208 0.139264, 0.905216 Q 0.187136, 1.188096 0.195840, 1.281664 Q -0.026112, 1.286016 -0.026112, 1.431808 Q -0.026112, 1.549312 0.050048, 1.577600 Q 0.067456, 1.581952 0.215424, 1.590656 Q 0.241536, 1.766912 0.382976, 1.766912 Q 0.441728, 1.766912 0.484160, 1.723392 Q 0.526592, 1.679872 0.530944, 1.621120 Q 1.085824, 1.703808 1.769088, 1.703808 Q 1.832192, 1.703808 1.878976, 1.658112 Q 1.925760, 1.612416 1.925760, 1.551488 " /></symbol>
  .
  .
  .
</defs>
</svg>

I want to have some specific words in my SVG container using these fonts. For example for word "HELLO". How can I access those nodes of (external) svg fonts to do this? I tried something like this with some sample transformations, but it didn't work (e.g my font name is fontName.ttf.svg):

<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <clipPath id="svgcPath">
            <rect stroke-width="0" fill="white" height="100%" width="100%" y="0" x="0" id="svgcPathRect"/>
        </clipPath>
    </defs>
    <g xmlns="http://www.w3.org/2000/svg" id="svgContainer">
        <g clip-path="url(#svgcPath)" clip-rule="nonzero" transform="matrix(1,0,0,1,0,0)" xmlns="http://www.w3.org/2000/svg">
            <g id="testText">
                <g>
                    <g style="fill:#000000; opacity: 1;">
                      <use transform="matrix(11.688311688311689,0,0,-11.688311688311689,0,27.35)" 
                            xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                            xlink:href="fonts/fontName.ttf.svg#H">
                      </use>
                    </g>
                    <g style="fill:#000000; opacity: 1;">
                      <use transform="matrix(11.688311688311689,0,0,-11.688311688311689,14.4248046875,27.35)" 
                            xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"                         
                            xlink:href="fonts/fontName.ttf.svg#E">
                      </use>
                    </g>
                    <g style="fill:#000000; opacity: 1;">
                      <use transform="matrix(11.688311688311689,0,0,-11.688311688311689,25.599609375,27.35)" 
                            xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                            xlink:href="fonts/fontName.ttf.svg#L">
                      </use>
                    </g>
                    <g style="fill:#000000; opacity: 1;">
                      <use transform="matrix(11.688311688311689,0,0,-11.688311688311689,35.87451171875,27.35)" 
                            xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                            xlink:href="fonts/fontName.ttf.svg#L">
                      </use>
                    </g>
                    <g style="fill:#000000; opacity: 1;">
                      <use transform="matrix(11.688311688311689,0,0,-11.688311688311689,46.1494140625,27.35)" 
                            xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                            xlink:href="fonts/fontName.ttf.svg#O">
                      </use>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

What am I doing wrong and how can I fix it?

Answer 1

maybe this links will be helpful:

1. font face in svg w3c
2. font face element
3. font face uri

Answer 2

You have to reference it from the tag via ID with batik and Chrome. Here is my snippet.

<defs>
  <font-face font-family="MgOpen Canonica" unicode-range="U+0-7F">
    <font-face-src>
      <font-face-uri xlink:href="MgOpenCanonicaRegular.svg#MgOpenCanonicaRegular" />
    </font-face-src>
  </font-face>
</defs>
<text fill="black" font-size="160px" font-family="MgOpen Canonica"
  text-anchor="end" x="100%" xml:space="preserve" y="325">T</text>

My font file that I had converted from TTF to SVG using Batik via a custom maven plugin plugin starts with

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs >
<font id="MgOpenCanonicaRegular" horiz-adv-x="425" >
    <font-face font-family="MgOpen Canonica"

I made my own Maven plugin to do this because the current release of batik-maven-plugin in codehaus hasn't been updated and does not work correctly for my needs.

Complete examples are available in https://github.com/trajano/trajano-logo