inkscape SVG in, eps out produces raterization effects - svg

I am using Inkscape 0.48.2 r9819 on Windows 7
I have a very simple SVG file (jon.svg). It is just a black on white image of two overlapping ovals, with no effects. A closeup is shown here:
Closeup of SVG
As you can see the SVG scales up properly when I zoom in. However, if I then use inkscape to convert that SVG to an EPS format (jon.eps) using the commandline,
inkscape.exe jon.svg -E jon.eps
I get what appears to be rasterization on the same image, seen here:
Closeup of same area in EPS file
Shouldn't EPS just encapsulate the vectorized image without having to do an rasterization? From what research I've done on the EPS format, it seems that it should. What am I doing wrong?

Related

Opening an EPS file in Inkscape causes weird line artifacts

I'm trying to edit a vector graphics file from Freepik. The format is EPS and after installing both Inkscape and Ghostscript on Windows, I'm able to open the file with Inkscape. However, Inkscape introduces some weird artifacts (see lines and wrong colors in the picture below).
Side by side comparison, original vector (left) and SVG saved after opening the EPS file in Inkscape (right)
Is there a way to fix this issue?
It's a little difficult to tell, partly because this is a complex illustration and partly because the rendering is a little small. I'd suggest that the circular artefacts are caused by radial fills not being rendered completely.
This could simply be a rendering problem with Inkscape, or it could be that the radial fill has an Extend parameter which isn't being honoured. It could also be a problem calculating a clip.
It's not entirely obvious what you used to render the left hand image, is that Ghostscript ?
Generally I'd say this looks like an Inkscape bug and you should report it as such.
Edit
Reading through the Inkscape FAQ it seems that Inkscape uses SVG as its native format. That's going to mean that an awful lot of PostScript (and PDF) vector objects aren't going to be represented well. Shadings will either have to be rendered to an image or converted into a complex series of SVG primitives.
Following the link on 'How to open EPS files in Windows' from the FAQ suggests to me that EPS files are either rendered to an image or converted to PDF.
You could use Ghostscript to convert the EPS to PDF yourself, and then try loading the PDF into Inkscape to see if you get a better result. You can also open the PDF in, say, Acrobat to see if it looks OK there.
If the PDF looks fine in Acrobat, but not so good in Inkscape, then I'd say that's an Inkscape problem. If the PDF looks poor in Acrobat then that's a Ghostscript problem.
You can then report the problem as a bug to the appropriate site.
It seems that EPS has more capabilities than SVG and that's why some stuff looks weird when converted to PDF/SVG. Specifically, highlights in an EPS file are not properly rendered in an SVG file.
I checked the conversion from EPS to PDF via Ghostscript and the lines are already there, i.e. it's not an Inkscape bug.
Here's the original file to reproduce the problem:
https://www.freepik.com/free-vector/data-processing-factory-isometric-technology_8625296.htm
And here's what it looks like after converting it to PDF: The artifacts are not as noticeable on the PDF file, possibly because Ghostscript converts it with a higher DPI by default
My workaround to be able to edit the file (remove the background) was to:
open the EPS with Inkscape, ungroup the items
delete the background
export it as PNG
then use the PNG as a "mask" on GIMP to edit the JPG file that came together with the EPS.

How to convert SVG map to PNG without losing border quality?

I downloaded this svg map and used ImageMagick to convert to PNG format. However, my output PNG images don't look very well: the white borders between countries almost don't show. On the other hand, the rendered versions on the Wikimedia site look great.
Is there any option I can pass to ImageMagick to prioritize borders?

ICC Color Profiles in SVG for webkit wkhtmltopdf or defining spot colours

Does webkit/wkhtmltopdf not support icc-color profiles in fill colours in SVG images?
I have an image that has the colour defined as:
#e22e27 icc-color(U.S.-Web-Coated--SWOP--v2, 0.0558938, 0.95947204, 0.98716716, 0.00204471)
Which is supposed to come out red (and does in inkscape)
However, chrome (and other browsers) just open it as black (I'm guessing because it can't get the fill colour?) and also wkhtmltopdf also comes out as black.
Is there any way of doing this? Or more specifically is there any way of defining a device spot colour in the SVG so that the final PDF can have a spot red (rather than a composite of RGB)?
Thanks
if you open the SVG in Inkscape 0.92 after removing the sRGB value #e22e27 I expect you will see black instead of red. This is because even when using the CMYK colour picker, Inkscape reads and writes fallback sRGB values from/to the SVG file. Native CMYK support is still in Inkscape's future, as far as I can tell.
Among the open source PDF renderers, mPDF supports defining spot colours by CMYK values and also supports embedding a subset of SVG in HTML, suggesting that it can read some SVG syntax natively. This would be a better starting point for a fully open source solution than wkhtmltopdf which does not support CMYK output at all, according to issue #39 on its GitHub project.
Of the proprietary renderers, PDFreactor supports passing CMYK values from an SVG directly to the renderer as long as they are not rasterised, although the syntax does not appear to match the W3C SVG spec and there is no sRGB fallback, so each SVG has to be specially crafted. This is quite easy for simple graphics originated in Inkscape; just replace for example in your SVG:
style="fill:#e22e27 icc-color(U.S.-Web-Coated--SWOP--v2, 0.0558938, 0.95947204, 0.98716716, 0.00204471);fill-opacity:1;fill-rule:nonzero;stroke:none"
with the C, M, Y, K values only:
style="fill:cmyk(0.0558938, 0.95947204, 0.98716716, 0.00204471);fill-opacity:1;fill-rule:nonzero;stroke:none"
I've recently used this technique in an attempt to match colours between SVGs and CMYK values specified in CSS for the document, for example between logos and font colours. See CSS Color Module Level 4 for the emerging device-cmyk syntax; in the meantime PDFreactor uses the non-standard cmyk syntax for CSS, as shown in the SVG example above.
In general, I'm wondering about the value of embedding a colour profile in a natively CMYK SVG. Perhaps the assumption is that we are starting from an sRGB value and need an approximation of it, but in my workflow I'm starting from CMYK values. I'd welcome clarification on that. Besides, it would be rather time-consuming to re-create every SVG file just because the printing machine, continent or paper has changed.

Extend Zedgraph to produce SVG

Is there any charting component that produce SVG chart?
I had work with Zedgraph, any idea how to extend Zedgraph to produce SVG/xml output?
ZedGraph by default does not produce vector formats. Even files saved in EPS format (there is such option in ZG) are in fact "fake EPS" - EPS file without vector information and with raster preview.
But you can overcome it by drawing on Metafile and then maybe you will be able to save it as SVG.

Get Font Glyphs as Vectors, manipulate and product SVG or Bitmap

I have an application that needs to apply some transformations to text (including non-affine transformations). Does anyone know of a toolkit (or group of tools) that would let me bring in a True Type or Postscript Font, get the glyphs as outlines, then apply transformations to the outlines and render it as a bitmap or svg file ? Flash won't do non-affine transformations so it is out. Illustrator has a function which converts text to outlines, but Illustrator scripting is very unstable so I can't really use it for this. Thanks for any help.
You could use the Batik TTF to SVG Font converter. The SVG font format uses the same path data format that the SVG <path> element uses.
For example, this is the output from converting Gentium Basic Regular using the above tool. With the right coordinate system, you can just grab out the path data, transform it however you like, and then draw it with a <path>. Note though that the glyph coordinate system in SVG fonts is actually inverted, with the (0,0) at the bottom left corner of the glyph cell box, compared to the regular SVG canvas which has (0,0) at the top left corner. So don't forget to flip the glyph, e.g. by putting transform="scale(1,-1)" on the <path> you use to render the glyph.
Once you have the SVG document that renders the glyphs as shapes you can convert it to a bitmap using your favourite tool. (Batik can do that too.)
While Batik is a good answer, it will convert only TrueType fonts to SVG Fonts. If you have OpenType fonts, and they more and more dominate now, you can use FontForge to get an SVG Font for these. Another advantage of using OpenType is that the produced SVG uses not only quadratic but also cubic Beziers in the path which is more effective.

Resources