SVG, XML & font-family

2
votes

I'm hoping to get a little more information on the best way to format text within SVG The w3 offers this http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#text_methods

But doesn't specify how I can build a font stack, I've tried treating the following xml code like css (as some suggested) but I've had no luck.

font-family:Times New Roman;
-inkscape-font-specification:Times New Roman

Question. How can I build a font stack for svg as per css?

(I'm not so interested in font-face or svg fonts because I believe from what I've read that they are not so widely supported at the moment.)

I've tried to format the text in these modes within the xml, but no luck;

 font-family:Verdana,Times New Roman;
 font-family:'Verdana,"Times New Roman"';
 font-family:Verdana,"Times New Roman";
 font-family:'Verdana,Times New Roman';

EDIT I've also found this from w3 http://www.w3.org/TR/SVG/text.html#FontPropertiesUsedBySVG which tells me to follow css, as per http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-specification but putting it in like css (font-family:"Times New Roman",Times,serif;) doesn't work.

2
svgfont-family
What viewer(s) have you tried? Provide a full example? - Erik Dahlström
I'm using <object> so I'm thinking as a fall back to clear fonts in the xml and apply a font-family to the <object>. But this would be a horrible work around (if it even works) because I'd be limited to one font stack per svg. - EnglishAdam
Maybe getting closer to the issue, you are aware that style doesn't inherit into <object> tags, right? If you want inheritance you'll have to include the svg inline in the document. - Erik Dahlström
My comment was just me wondering how I might work around this, I hadn't actually tried to use css to format the text, is it something that might happen in the future? I'm editing the fonts in the xml editor in Inkscape and I've tried using notepad++ too. - EnglishAdam
Have you tried using inline svg? i dont usually have any problems with my css then.. - raddrick

2 Answers

4
votes

The font-family property is the same as CSS defines, so you can specify a font stack if you want.

An example using attributes:

<svg xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="100" 
   font-family="'Times New Roman', Times, serif" font-size="48">
    Some text
  </text>
</svg>

or better yet, using class:

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    .seriftext {
      font-family: 'Times New Roman', Times, serif;
      font-size: 48px;
    }
  </style>
  <text x="10" y="100" class="seriftext">
    Some text
  </text>
</svg>
0
votes

Check the xml output that Inkscape generates. Inkscape generates a faulty font-family value of "font-family:Sans". I'm guessing this is supposed to be "Sans-Serif" but has got truncated at the dash. This value is appended to the end of the style string so you might not see it when you look at the xml in a text editor. If you edit the style string to put your own font-family definition but don't remove the incorrect definition (because you haven't seen it) nothing will change.

 <!--this wont work. Two font-family specs (scroll to the end).-->       
    style="font-family:arial,sans-serif;font-size:40px;font-style:normal;font-family:Sans"

    <!--this wont work either. Well you'll get the default Serif font-->
    style="font-family:Sans;font-size:40px;font-style:normal;font-weight:normal;"

    <!--this will work-->
    style="font-family:arial,sans-serif;font-size:40px;font-style:normal;font-weight:normal;"

    <!--so will this-->
    style="font-family:Arial,Sans-Serif;font-size:40px;font-style:normal;font-weight:normal;"

    <!--and this-->
    style="font-family:tahoma,arial,Sans-Serif;font-size:40px;font-style:normal;font-weight:normal;"

 <!--this too-->
style="font-family:Times New Roman, Serif;font-size:40px;font-style:normal;font-weight:normal;"

Example:

<text
   style="font-family:Times New Roman, Serif;font-size:40px;font-style:normal;font-weight:normal;">
    <tspan
     x="60"
     y="60">
    The rain in spain
    </tspan>
</text>