4

I'm converting SVG's to PNG using ImageMagick and all works like a charm until I tried adding custom fonts using @font-face and then in the SVG file. In Batik this worked fine but now in ImageMagick I just cant get it to work.

I can change the fonts to the ones listed in "convert -list font" but I will probably have to change fonts often so I want to point to the font-file on convert somehow instead using font-face or other solution doesnt matter.

The SVG files can also contain multiple font-families and my ImageMagick install includes rsvg delegate.

Any ideas? Thanks!

Carl
  • 169
  • 1
  • 9
  • If you can't get ImageMagick working, consider doing the conversion with `inkscape`, which can also be called at the command line. I don't know what its @font-face support is like, but I should be interested to know if you look into it. – halfer Mar 23 '12 at 10:18
  • I do all my SVG -> PNG using ImageMagick and all work well except the fonts. I will try to install them using type.xml but I would prefere not to.. – Carl Mar 23 '12 at 10:38
  • Notwithstanding, a working Inkscape is better than a partially working ImageMagick. Is it not worth a try, given how easy it is to kick off a conversion on the CLI? – halfer Mar 23 '12 at 10:40
  • True but I had it working before using Batik but since I'm running it from PHP I would prefere a solution that I can use from PHP. Batik did the job using system() but pretty slow. I'll give Inkscape a go later and see how it does, just very impressed by the ImageMagick speed so far. – Carl Mar 23 '12 at 10:53
  • I get conversion times of ~0.7 sec on a dev laptop for fairly complex documents - of course as always it's a case of "how long is a piece of string" and highly server-dependent. But coupled with a queue system (Gearman in my case) I think it will be a very effective solution. – halfer Mar 23 '12 at 11:22
  • have you ever been able to resolve your problem using ImageMagick? i have the same issue using rsvg-convert. – ZPiDER Aug 02 '13 at 07:30

4 Answers4

2

Try rsvg-convert (a command line program) provided by librsvg2 package.

I have the same problem with ImageMagick on Amazon Linux (but not on my Ubuntu desktop). I think the SVG handling of the ImageMagick is rather poor. It does not recognize "display: none" style property correctly.

Tsutomu
  • 4,848
  • 1
  • 46
  • 68
  • I had an SVG exported from Illustrator and the fonts weren't rendered properly by rsvg-convert until I exported the SVG from Illustrator with fontType=SVGFontType.OUTLINEFONT (via JS API; may also exist in GUI). – tremby May 22 '15 at 01:15
1

I had this answer after asking for rendering html to an image but it works also for SVG: https://stackoverflow.com/a/56194265/118125

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --screenshot --window-size=256,256 --default-background-color=0 image.svg

It generates a screenshot.png file according to what Google Chrome would render.

Martin Delille
  • 11,360
  • 15
  • 65
  • 132
0

Inkscape can be run from the command line. It has a wealth of options for doing the conversion (see man inkscape) and via the --verb and --select options can even allow carrying out actions as you'd do them from inside the GUI.

It's also fairly quick at the conversion, as halfer pointed out. However note that its renderer is designed for interactive display rather than the single-pass static display that rsvg does, so rsvg may be faster in some cases. Also, installation of Inkscape on web servers can sometimes be problematic simply due to the large number of dependencies this GUI app pulls in.

When we added these command line options to Inkscape it was partly because rsvg lacked support for a lot of SVG features, including font faces. Since that time rsvg has improved and I think it now should support substitution of fonts via the font-face property. The most common issues are having fonts installed in places that rsvg doesn't look (maybe proprietary fonts are kept in a different path in your distro?)

Good luck, let us know if you sort it out.

bryce
  • 468
  • 5
  • 23
0

I once had a bunch of SVG files, one page per file (an entire book). The fonts were auto-generated, one for each page. The character encoding was non-standard, I believe that only the characters actually used in the page were put into the fonts. Even though the fonts were embedded using data-uris into the SVG, none of the programs I used (Imagemagick, Inkscape, rsvg-convert) could display them. Only Firefox was able to render the pages correctly. Here's what I did:

First I created a simple HTML with all the pages:

<html>
    <body>
         <img src="p001.svg" />
         <img src="p002.svg" />

etc

Then, I opened the HTML in Firefox. It took some time but it rendered the entire book.

Then, I printed the entire page as PDF. I first set the print options to not print out headers/footers.

The result was a large PDF of several megabytes (there were also raster images in there).

Not the easiest solution, but it worked. It's a pity that none of the other SVG renderers are as good as the one in Firefox.

Hope this helps someone.

alexg
  • 3,015
  • 3
  • 23
  • 36