So, I have an graphics automation chain that has been happily running on a headless linux environment using programmaticaly generated/altered SVGs and PhantomJS (currently 1.9.0) as a final rendering engine. I have some dynamic text replacement requirements, and resulting dynamic font scaling and adjustment needs... I've been using embedded SVG fonts and some crappy embedded javascript, which works fine, except for two things:

1) The client has some requests for fonts with ligatures (which SVG font format does not support)

2) We are kicking around a live preview option and would love to just be able to serve the SVG up to the webpage without rendering out a png/jpeg/whatever on our server before hand. keep the load down, make the clients CPU do the heavy lifting, all that.

In the interest of these issues I have been playing around with WOFF fonts, as the support for SVG fonts was never VERY good, and now that Chrome doesn't support them any more with the switch to the Blink engine, if I want the client do do my work I need something compatible with as many common browsers as possible...

So here's the issue: My automatic scaling fails miserable when I use a WOFF (or OFT or TTF) font and the @font-face function.

what I have been doing is just embedding the SVG font in my graphic in the defs and referencing with the DOM like any other SVG element. This does the things I expect and need when combined with java script like this:

<script id="multiscaler1" type="text/javascript">
    var texta = document.getElementById(&quot;text8093&quot;);
    var textb = document.getElementById(&quot;text8100&quot;);
    var textpatha = document.getElementById(&quot;textPath8097&quot;);
    var textpathb = document.getElementById(&quot;textPath8104&quot;);
    var patha = document.getElementById(&quot;path8091&quot;);
    var pathb = document.getElementById(&quot;path8089&quot;);
    var charcounta = textpatha.getNumberOfChars();
    var charcountb = textpathb.getNumberOfChars();
    var fontsizea = 10;
    var fontsizeb = 10;
    var offseta = -13;
    var offsetb = -13;
    var spacing = 0;
    while ( ((textpatha.getComputedTextLength() + (spacing * charcounta)) &lt; patha.getTotalLength()) &amp;&amp; (fontsizea &lt; 43) )
    {
        fontsizea += .5;
        offseta += 0.2
        textpatha.setAttribute(&quot;font-size&quot;, fontsizea);
        texta.setAttribute(&quot;transform&quot;, &quot;translate(&quot; + offseta + &quot;,0)&quot;);
    }
    while ( ((textpathb.getComputedTextLength() + (spacing * charcountb)) &lt; pathb.getTotalLength()) &amp;&amp; (fontsizeb &lt; 43) )
    {
        fontsizeb += .5;
        offsetb += 0.2
        textpathb.setAttribute(&quot;font-size&quot;, fontsizeb);
        textb.setAttribute(&quot;transform&quot;, &quot;translate(&quot; + offsetb + &quot;,0)&quot;);
    } 
</script>

Pretty crap, I know, but I'm a production manager and graphic artist, not a coder :P and it looks like this:

enter image description here

Which is what I want... (but of course only works on browsers that support SVG fonts...)

now, when I add this little beauty to my deffs

<style type="text/css">
@font-face {
  font-family: Narrow-Bold;
  src: url('WOFFFONTS/Narrow-Bold.woff');
}
</style>

and remove the SVG font data I get this:

enter image description here

Oh dear. That's not right at all. I've dicked around with my spacing values (which are there to deal with another situation where I change the character spacing to maximize font size based on string length...) and can get it to do this:

enter image description here

also quite wrong :/

What gives here? Any help? Frankly, it'd be lovely to switch all to WOFF (or @font-face linked OTF or TTF fonts, which BTW, do the same thing) fonts as I'd have a lot fewer 20,000+ line SVGs without embedding fonts all over the damn place...

I have tried different font conversion tools and even a trick I found in some google search results wherein you build the WOFF from the SVG, not the TTF or OTF... same results.

??

Below is a simplified example of a working self-contained SVG with embedded SVG font using the free Delicious Bold font. Obviously this will only work on a browser that supports SVG fonts. The embedded font was created from a fresh download of the OTF with FontForge For Windows Release 2015-06-12. I also created a WOFF version of the same font the same way (all default settings, ignoring the warning about "non-standard ems advance" in the TTF definition) and added an @font-face link with a different name that will point to the WOFF when it is in the same directory as the SVG. By editing the font-face="xxxxxx" in the text/textpath element of the SVG you can quickly switch between the embedded SVG font, (which works fine) the linked WOFF font (which scales incorrectly) and the system version of the font family ,if installed (which perhaps of note, renders slightly differently from the embedded SVG font, but also scales correctly)

This behavior is consistent across all tested browsers (Opera-latest for Windows 7 64bit, Mozilla-Latest Linux Ubuntu 14, Chrome-latest Windows 7/8 64bit, Safari 5.1.7 for Windows (supports SVG fonts), and PhantomJS 1.9.7 Linux CentOS 6.4 final (supports SVG fonts). It is also consistent across all fonts tested (many...) and font conversion engines (squirrel-font, FontForge, Birdfont...)

As the self contained SVG is too large to paste into the body, here's a link to it pasted into a JSfiddle project.

Yes, I do realize I could solve this by rendering with Apache batik, but: 1) Batik is slooooooooooooow. Sooooo sloooooooooooooooooooooooooow... OMG is it slow. 2) I want to be able to offload as much of the CPU load from my server as possible, the exact REVERSE of what batik will do 3) That's not the point, damnit!

  • Hi JawzX, if you do no receive an answer here. You might want to try posting at stackoverflow.com – AndrewH Jun 26 '15 at 18:02
  • Thanks, I am a Stack Overflow member and have already cross-posted this. so far it's gotten much more attention here, but no answers either place... – JawzX Jun 26 '15 at 18:12
  • 1
    You should consider placing a bounty in 2 days but on SO rather than here. You should also consider revising your question into making it more compact and straight forward, maybe combining the 3 images into one. You might get more readers. – Alin Sep 14 '15 at 19:13
  • 1
    Very much TL;DR – Zach Saucier Mar 1 '16 at 14:41
  • 1
    wasn't aware TL;DR was a valid criticism outside of redit. – JawzX Mar 2 '16 at 20:45

I work with SVGs a lot, as I'm a web designer. If I want to maintain the shape (font style) of my text, I open Adobe Illustrator, write what I want and 'Create Outlines' out of it. It's not that time consuming, just make sure you copy the text before Outlining it to keep an editable version.

  • I'm working In a full production environment with hundreds of customer orders per day, I can't afford the time to export to paths in illustrator. I am still running an outdated system as it is the FASTEST, and that's what really matters for my purposes... – JawzX May 7 '16 at 1:31

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.