Good Svg Renderer for Linux

Good SVG renderer for Linux?

The SVG 1.1 exported by the draw.io tool is too "modern" for correct rendering by the current Batik, Cairo, qiv, or even FireFox: it seems none of them support the <foreignObject> element. However WebKit does render it properly, so to convert SVG to high-quality images I use the "wkhtmlto..." tools from http://wkhtmltopdf.org.

wkhtmltoimage generates output at screen resolution and its --zoom switch scaled lines and text differently resulting in clipping (although opening the same SVG in Chrome and zooming performed correctly). So instead I'm using wkhtmltopdf to generate an intermediate pdf then rendering that as a high-resolution image with ghostscript:

wkhtmltopdf callbacks.svg callbacks.pdf
gs -sDEVICE=pnggray -sOutputFile=callbacks.png -dBATCH -dNOPAUSE -r900 callbacks.pdf

EDIT: a disadvantage of going via a Page Description Format is that the image file produced may have very large borders. You can experiment with paper sizes and layouts to minimise this or just auto-crop them off, e.g. with ImageMagick:

convert callbacks.png -trim callbacks.png

EDIT: FireFox 49.0.2 (Nov 2016) now renders the draw.io SVG correctly. Haven't retested Cairo or Batik. sample draw.io file

How to display interactive SVG in a window on Linux?

The problem is that the effects require javascript and cascading style-sheets, which basically means complete web rendering engine. So the easiest way is to use one, either webkit or gecko (webkit has probably better support for SVG these days, plus I can't find package of gecko right now).

How to render SVG image to PNG file in Python?

there are multiple solutions available for converting svgs to pngs in python, but not all of them will work for your particular use case since you're working with svg filters.

solution	filter works?	alpha channel?	call directly from python?
cairosvg	some*	yes	yes
svglib	no	no	yes
inkscape	yes	yes	via `subprocess`
wand	yes	yes	yes

How to convert a SVG to a PNG with ImageMagick?

I haven't been able to get good results from ImageMagick in this instance, but Inkscape does a nice job of scaling an SVG on Linux and Windows:

# Inkscape v1.0+
inkscape -w 1024 -h 1024 input.svg -o output.png

# Inkscape older than v1.0
inkscape -z -w 1024 -h 1024 input.svg -e output.png

Note that you can omit one of the width/height parameters to have the other parameter scaled automatically based on the input image dimensions.

Here's the result of scaling a 16x16 SVG to a 200x200 PNG using this command:

Sample Image

Firefox, bad svg image rendering

In Principle the rendering of SVG is not worse in Firefox than in any other browser. But each browser has its own little lacks in rendering, especially when shapes are close to each other and scaling comes into play.

So I might suggest to review your graphic and give a little room around the letter, so that there is no shape »snapping« directly to the outline of the letter. Unfortunately I cannot see the code of your graphic, but I am pretty sure that the issue is caused by shapes which are very close to each other (arranged by »snapping«) and there is no »saving overlap«.

For Fonts there is Hinting, what optimizes the rendering, especially for small sizes, but for SVG there is no such thing and since you cannot say for sure how each browser will handle those »edge cases« it is up to you to prepare the graphic so that those failures cannot appear.

Operating on SVG files with a large number of elements

You've certainly managed to find a good stress test for SVG renderers :)

Your SVG contains what appears to be a totally unnecessary clip path that is applied to every data point.

If I surround the points with a group and apply the clip path to the group of points instead, rendering times are significantly reduced.

Chrome: 255 secs -> 58 secs
Firefox: 188 secs -> 14 secs

If I remove that clip path completely, I get:

Chrome: 27 secs
Firefox: 10 secs.

These changes don't help rendering times in Inkscape unfortunately, but hopefully it helps you somehow. If you need rendering times faster than that, you likely need to do as Robert says, and reduce the number of data points somehow.

Render a vector graphic (.svg) in C++

The wxsvg library allows loading and manipulating SVG files. Qt also has an SVG module.

Three.js : SVGRenderer?

SVGRenderer is not part of the library -- it is part of the examples.
SVGRenderer can be found in the examples/js/renderers/ directory.
If you are rendering with WebGLRenderer, use SVGLoader to load .svg files. SVGLoader is located in the examples/js/loaders/ directory.
For demos, see https://threejs.org/examples/?q=svg

three.js r.99

Inline SVGs not rendering in IE9+ when served from Tomcat 7 in CentOS 6.5

The frameset used by eclipse help was setting the content type to text/html, overriding the setting on the HTML page itself. Adding:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>

to the head of the frameset jsp file addressed the problem.

Good Svg Renderer for Linux