Does anyone have experience or insights into how to convert SVG to PNG using ImageMagick.NET where the SVG has custom embedded fonts?
I've seen similar posts about this, but I'm specifically interested in ImageMagick.net and I would like to avoid calling anything from command line. I currently use Batik, but I want to move this to Azure and I don't want to go through starting the JVM so that the JAR file can be executed.
Note additionally, my problem is that I am getting the SVG from another party and most fonts are not freely available, so I can't just pre-install all potential fonts.
Many thanks for any insight.
I don't know anything about azure platform, but I can share some insight on the SVG process within ImageMagick. This is more of a long-winded comment than an answer
ImageMagick (of which Magick.net sets on top of) performs tasks on raster images, so any vector input must be "decoded" into a raster image before any additional work be be done. For SVG images, I'm aware of three ways ImageMagick can render vector graphics into authenticated pixels.
Use a primitive internal MSVG coder to draw each shape.
Pass the rendering work to librsvg if compiled with delegate library support. (Usually on *NIX systems)
Call an external command-line application. Identical to the suggestions referenced in the links you provided.
If I would map it out, I would imagine it would look something like this.
SVG Fonts with MSVG (option #1)
I believe this is the option your asking about as it would be the default configuration for must ImageMagick installs. For a font to be rendered, the typeface must be found on the system, and supported by freetype (.ttf or .otf files). Embedded fonts are usually base64 ttf files attached inline under the #font-face CSS at-rule. If this is true, you should be able to preprocess the document, extract the font-file to a local/temporary filesystem, and assign it with MagickReadSettings.FontFamily before reading the SVG document. Although I'm not sure if this would work with multiple fonts.
SVG Fonts with RSVG (option #2)
The librsvg offers a lot more support for SVG specs then the internal renderer, but also enforces more restricted approach for external resources. There's also an open issue with adding support to #font-face, so you might be forced to do option #1 anyway.
External Command-line (option #3)
This would be your best option. ImageMagick's delegate.xml file can be altered to call other utilities. Inkscape, for example, can be called by ImageMagick with the following rule..
<delegate decode="svg" command="inkscape.exe -e %o %i"/>
Although I'm not sure if inkscape is a good example as support for CSS fonts are still listed on a wishlist.
TL;DR
... convert SVG to PNG using ImageMagick.NET where the SVG has custom embedded fonts?
All-n-all, it boils down to the right tool for the right job. If your only use-case is converting SVG+CSS to PNG, and you have no additional raster manipulation tasks, a direct utility like batik is more appropriate than ImageMagick. Like it or not, installing a JRE to execute a JAR file might be the best option. Magick.net by itself doesn't meet your requirements.
Related
I was browsing SVG fonts in MDN, where it is mentioned that <font-face>, <missing-glyph>, <hkern> and <vkern> are depreciated. Only <glyph> is not depreciated. It does not mention anything about a recommended way of specifying the font face properties.
The W3C SVG recommendation also does not say anything about an alternative way of specifying SVG fonts, apart from noting that everything in the <font-face> can be done equivalently in CSS. It does not provide any alternative for <hkern> or <vkern>. I intend to create a standalone SVG file, not to be modified by the site CSS, so I would like to keep the whole font definition in the SVG.
So, what is this obscure new way of specifying SVG fonts?
"SVG fonts" as a data file that uses SVG markup to define a font resource has been deprecated; it turned out to be a bad idea, and ended up not addressing the issues that typography on the web needed addressing. It was added in SVG 1.1 but removed again in SVG 2.0, and almost all browsers that did end up adding support for it removed that support again since.
Instead, all browsers now support "webfonts": regular OpenType fonts packed for the web using the "Web Open Font Format", aka WOFF/WOFF2, based on the OpenType format, which supports several different outline types:
TrueType (quadratic curves and compound glyphs, often with ttf extension, but the extension is literally irrelevant)
Type2 in CFF/CFF2 (cubic curves and arbitrary subroutines, often with otf extension, but again: the extension is wholly irrelevant)
Embedded bitmaps (yes, OpenType fonts can indeed be true bitmap fonts, with as many different bitmaps as necessary to cover as many pixel sizes as necessary)
SVG (that might be surprising, but SVG is the exact same kind of vector graphics language as TT and CFF/CFF2 are, so it made sense to allow glyph outline data to be specified using SVG as well, particularly for fonts that need explicit colour palettes, like emoji fonts)
So if you absolutely need to keep your SVG data around, then make yourself an OpenType-with-SVG-outlines font, and then pack that for the web as a modern WOFF2 (or older WOFF) and you're good to go. There are plenty of online tools to do that for you, but you can also just use something like the open source FontForge application if you want a font that only includes what you need, instead of what online tools foist into them.
When I configure Sphinx's Graphviz extension to generate SVG output, using
graphviz_output_format = 'svg'
I am no longer able to click on the nodes of inheritance diagrams generated using the inheritance_diagram extension.
Is there a way to enable these links in an SVG diagram, or do they only work for PNG diagrams?
I had a similar experience with embedded dot graphs (graphviz directive in Sphinx). Doing a little digging (and testing), I've concluded:
When setting graphviz_output_format to png, sphinx handles this by doing a few extra things:
It has dot output both a .png and a corresponding .map file.
The rendered HTML includes a map section to "overlay" the png image with link targets.
When using SVG, the renderer omits the map section and only produces an SVG image. Since SVG supports links within the format (which dot correctly embeds), I presume it was expected the map section was redundant (or more likely problematic since it would "compete" with the SVG-rendered image for focus.)
As alluded to here, most browsers disable embedded SVG links (when surrounded by a <img> tag). The consequence is that the embedded links are not visible, and thus not clickable.
In my case when I open the SVG image directly in the browser, the embedded links are clickable (tested on Safari and Firefox).
I have created an SVG document with Inkscape. It contains text in a non-standard font. The svg xml references the font. So, the vector has a dependency on the font being available on the users machine (or by using web fonts in a web scenario). I want to remove this dependency. I know how to do it manually, but it would be time consuming.
Does Inkscape provide a way to include the required glyphs as pure vectors instead of referencing the font?
You can transform all glyphs to vectors by selecting them and using the object to path function (Path->Object to Path).
Select the text(s) you want to convert to paths, then select "Path > Object to Path".
If the font license allows it you could also use it as a webfont, by adding some css to the svg file, see this example. Inkscape doesn't support webfonts AFAIK, but for editing I guess it might still work if you have the same font installed on your system.
I'm using ImageMagick's convert utility to convert SVG file to PNG image. At first, I used vanilla installation of IM on OSX (brew install imagemagick) to convert the SVG using:
$ convert file.svg file.png
This worked except that some of the image objects in that file were offset (actual links to images). I then read a related question that suggested ImageMagick to be compiled with rsvg support (homebrew does it with brew install imagemagick --use-rsvg).
Now, when I try to perform the conversion, no images are rendered. I tried using this SVG file, and the resulting PNG was blank. However, if any text exists on the SVG, it's rendered in the proper location. Any ideas how to proceed? thanks.
You should run this command to see a list of all 'delegates' your ImageMagick is trying to use:
convert -list delegate
To discover which delegate command ImageMagick uses for SVG processing, run
convert -list delegate | grep 'svg ='
You should see the binary + commandline parameters your convert tries to use. Im my case it is /opt/local/bin/rsvg-convert (but I'm not using Homebrew, I use MacPorts).
Now check if the binary is present at all on your system:
If yes, run it directly and debug from there.
If no, try to find where your Homebrew installation installed it, and change ImageMagick's configuration file for its delegates. It's called delegates.xml. MacPorts places it into /opt/local/etc/ImageMagick/delegates.xml -- I don't know where Homebrew stores it.
However, since your un-modified installation was already working, there must have been an SVG consuming delegate at work already then. Otherwise you would not have gotten any SVG processed at all.
This internal SVG rendering method of ImageMagick is called MSVG. This is far from being a feature-complete SVG interpreter/renderer.
Update:
To see what ImageMagick is doing for which format, run this command:
convert -list format
and for SVG run
convert -list format | grep SVG
Output on my system is:
MSVG SVG rw+ ImageMagick's own SVG internal renderer
SVG SVG rw+ Scalable Vector Graphics (RSVG 2.36.1)
SVGZ SVG rw+ Compressed Scalable Vector Graphics (RSVG 2.36.1)
After you installed rsvg, the internal method to render SVGs will not have gone away. You can still force ImageMagick to use the internal renderer by adding MSVG: to the commandline like this:
convert MSVG:file.svg file.png
Just for completeness' sake...
Oh, I now had a look at the SVG file you linked to.
It contains JavaScript. I do not think that the RSVGlib does support JavaScript inside SVGs. I know for sure that the internal SVG coder named MSVG does not.
I had a similar problem and was just told to install inkscape and it works,
ImageMagick converts svg graph into pdf with tilted x-axis labels, any ideas?
The delegate list did not change but the output did. On further fiddling with forced MSVG I could not get the problem to go away. So another delegate is probably the best solution.
Is it possible to simplify / clean up svg code by replacing the use-tags with standard svg elements? Maybe an inkscape plugin? Haven't found anything...
Background: I'm converting some svgs to javafx graphics (.fxz) with javafx's production suite. And the tool doesn't understand the <use> element.
Take a look at Scour - an SVG scrubber
Scour is an open-source Python script that aggressively cleans SVG files, removing a lot of 'cruft' that certain tools or authors embed into their documents. The goal of scour is to provide an identically rendered image (i.e. a scoured document should have no discernable visible differences from the original file).
They also have an extension for Inkscape as of v.48. To use it, go to "Save As.." and choose "Optimized .SVG. Be careful, and check your output, as I've found it can get too aggressive. Take these examples for instance, if they show up...
Good: Bad:
They claim to have and an online tool that does the same tricks... but as of 6/2011 it was not working. Hope this helps you clean up those often SCARY looking SVG's. Sometimes I feel like I'm the only one that realizes what this format is capable of!