-1

I have an SVG with a custom font defined in the defs section. When I load it up in Safari everything's fine. Unfortunately, when I try to convert it, with Python and ImageMagick for example, to a png the information about the font gets lost.

I'd like to know, if it is possible (and if yes how :D) to convert that image and retain the font in the resulting image... preferably using python.

For example: Imagine you have an SVG that describes a musical sheet and a special font is used for the notes. So there is a defs section, which describes different font-families for different purposes.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="productSvg" class="playbackCanvas" style="width: 582px; height: 757px;" viewBox="0 0 13285.3 17280">
  <defs>
    <style type="text/css">
      @font-face {
      font-family: 'MyFont';
      src: url('MyFont-Normal.otf');
    }
    @font-face {
      font-family: 'Helvetica';
      ...
    }
    </style>
  </defs>
  <text font-size="95" font-family="Helvetica" x="2" y="2" id="abc" style="fill: rgb(0, 0, 0); stroke-width: 0;">x</text>
  <text font-size="120" font-family="MyFont" x="6035" y="2681" style="fill: rgb(0, 0, 0); stroke-width: 0;">4 fr</text>
...

No problem in a browser. At least in Safari. It did not work as well in Chrome in my tests.

Anyways, I found a way to convert the SVG with a custom font using ImageMagick.

convert -font "MyFont-Normal" example.svg example.png

Unfortunately, I can't pass multiple fonts as Arguments. Therefore, the text with the Helvetica font-family will also have the special font.

  • What do you mean "retain the font in the resulting image"? You mean like get an actual font file from it? – Zach Saucier Aug 8 '17 at 1:02
  • Ah come on. The downvote wasn't necessary right? I mean... it's a good question. – Nima Mousavi Aug 8 '17 at 15:05
  • PNG images are raster images which can't contain any font information. Its not possible. – Billy Kerr Aug 8 '17 at 15:16
  • Well I don't care, if any font information is in the image or not. What I want is to capture what is seen in the SVG as an image. So a smart way to create an image using multiple fonts. – Nima Mousavi Aug 8 '17 at 15:18
  • 1
    Hey @Nimi, could you at least add the answer here for any passers-by that have the same issue? – PieBie Aug 17 '17 at 13:58
0

This one is for @PieBie. So this is how I solved the problem. As indicated in the comments, it is possible to call inkscape from the command line and the command can also be called from python. The following steps were necessary to make it work on my machine.

  • Install inkscape
  • If the svg includes custom fonts make sure that inkscape has access to them. I'm on mac so I had to install my custom fonts to /Library/Fonts
  • Use the -e option to export your image

In my case the command looked like this:

inkscape /path/to/svg -e ~/blub.png -w 1000 -h 1300

I added the -w and -h options, because my png turned out to be huge without the constraints.

In python it might look something like the following

import subprocess

#Some other code that creates the SVG or scrapes it from the internet might be here

subprocess.Popen(["inkscape", "/path/to/svg", "-e", "~/blub.png", "-w", "1000", "-h", "1300"])

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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