Converting SVG with custom fonts to PNG using ImageMagick

北城以北 提交于 2020-01-11 03:20:31

问题


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!


回答1:


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.




回答2:


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.




回答3:


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.




回答4:


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.



来源:https://stackoverflow.com/questions/9836998/converting-svg-with-custom-fonts-to-png-using-imagemagick

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!