10

I'm working on a Java program which creates templates for clothes. The user enters the word they want to see on the item of clothing and the system creates a PDF template. To create the template I create an SVG document programatically then use Batik to transcode the SVG to the PDF format.

My client now wants to be able to use custom fonts to create the templates. I was wondering if it's possible to use fonts like a TTF with the Batik transcoder? If so how do you go about setting up the SVG?

James Andrews
  • 3,120
  • 3
  • 28
  • 42

2 Answers2

8

First you need to transform the font file from TTF to SVG with batik's ttf2svg, once you have the converted file you have to add reference in the 'defs' section of your SVG document. this is how i did it:

Element defs = doc.createElementNS(svgNS, "defs");

Element fontface = doc.createElementNS(svgNS, "font-face");
fontface.setAttributeNS(null, "font-family", "DroidSansRegular");

Element fontfacesrc = doc.createElementNS(svgNS, "font-face-src");
Element fontfaceuri = doc.createElementNS(svgNS, "font-face-uri");

fontfaceuri.setAttributeNS(svgNS, "xlink:href", "fonts/DroidSans-webfont.svg#DroidSansRegular");

Element fontfaceformat = doc.createElementNS(svgNS, "font-face-format");
fontfaceformat.setAttributeNS(svgNS, "string", "svg");

fontfaceuri.appendChild(fontfaceformat);
fontfacesrc.appendChild(fontfaceuri);
fontface.appendChild(fontfacesrc);
defs.appendChild(fontface);
svgRoot.appendChild(defs);

when creating the text element set the font family just like any other font

Element txtElem = doc.createElementNS(svgNS, "text");

txtElem.setAttributeNS(svgNS, "style", "font-family:DroidSansRegular;font-size:" + fontsize + ";stroke:#000000;#fill:#00ff00;");
txtElem.setTextContent("some text");
svgRoot.appendChild(txtElem);

i got the info from this article: http://frabru.de/c.php/article/SVGFonts-usage hope it helps.

Hugo Giusti
  • 208
  • 2
  • 7
  • 7
    No need to convert the font to SVG. Batik can operate explicitly with TrueType fonts. Just add a CSS declaration similar to this: @font-face { font-family:'Your Font Family'; src: url('fonts/yourfontfile.ttf') format('truetype'); } – Jiří Vypědřík Nov 06 '12 at 06:55
  • @Jiří Vypědřík: Could you elaborate on how to use css to add a custom font to SVG in Batik? I can't find an example on google. (actually adding any css to Batik is almost non existent) – Krzysztof Krasoń Oct 06 '13 at 06:32
  • If I have all *.ttf fonts in a single folder, can I register them globally so that they're available for both PNGTranscoder and PDFTranscoder? I've been playing around for days and haven't been able to get anything to work yet except adding a `font-face-uri` to a local file in the SVG itself. So far, http://wiki.apache.org/xmlgraphics-fop/SvgNotes/PdfTranscoderTrueTypeEmbedding didn't work for me when using `` even thougha similar config with just FOP worked. – jon_wu Jul 01 '14 at 22:40
  • @jon_wu did you find an answer to this? I have the same problem. – csvan Apr 09 '17 at 08:20
  • I had a proof of concept working for SVG to PDF with FOP 2.2-SNAPSHOT and Batik 1.8. Basically, make a `new PDFTranscoder`, then configure it with an XML config that specifies `` for all the fonts. Since I wrote the comment, I think I was trying on a new cleaner Play stack and more recent versions so maybe that will help. FOP 2.2 was just released too. – jon_wu Apr 10 '17 at 01:06
2

Just add the following element as a child of <svg/>: <style type="text/css"> Then, similar to HTML...

Jiří Vypědřík
  • 1,288
  • 12
  • 24