23

I've made a map in inkscape and now need to change it to a bitmap or .png. The map will be interpreted by a computer program which will look for exact colors so the edges need to be crisp. when I export a .png with inkscape, use an online file converter or even take a screenshot it is always anti-aliased. help.enter image description here

enter image description here

Improve this question
6
  • Hmm...it doesn't look like Inkscape offers an aliased option when exporting to raster. You could try opening the SVG in a raster app (such as PS) and see if it offers you an alias option there. – DA01 Jun 1 '14 at 19:04
  • the Photoshop 7.0 I have doesn't seam to have the ability to open SVGs. I don't have any other programs that can do it. if there are any freeware ones that might work I am interested in what they are. – William W Jun 1 '14 at 19:11
  • As for raster apps The GIMP is open source. Paint.net is freeware. Not sure if either support opening of SVG, though. – DA01 Jun 1 '14 at 19:12
  • It looks like there might be a way to do this in the browser: stackoverflow.com/questions/16889078/… – DA01 Jun 1 '14 at 19:13
  • Oh, and finally...one workaround may be to take the screen shot, put that into PhotoShop, and then use PhotoShop's "Posterize" Filter/tool to reduce the color pallet down to only the solid colors you want to use. – DA01 Jun 1 '14 at 19:14
17

The development version of Inkscape (upcoming 0.91 release) has a global anti-aliasing toggle in the Document Properties window, which should also work for export. Look for "Development Versions" on the download page:

http://www.inkscape.org/en/download/

Improve this answer
7
  • thanks, do you know how long until it comes out? I didn't see it on the site. – William W Jun 1 '14 at 20:10
  • The current phase is "Frost". You can see the progress towards the release here: inkscape.org/en/develop/next-release I think it should be released within the next 5 months. – Krzysztof Kosiński Jun 1 '14 at 20:56
  • Wow. They're jumping from .48 to .91! Granted, that's less than 'half a version' but still a huge update in the inkscape world. Version 1.0 here we come! – DA01 Jun 3 '14 at 2:49
  • 7
    It sadly has no effect on the export... – Ray Mar 3 '15 at 18:17
  • Also didn't worked for me when exporting as PNG file. – testing Apr 3 '15 at 7:46
13

One simple solution is to export to PDF, and then use Ghostcript on the resulting PDF. Using a strawberry image from Openclipart and the command

gs -dSAFER -dBATCH -dNOPAUSE -sDEVICE=png16m \
   -r72 -dGraphicsAlphaBits=1 \
   -sOutputFile=image.png image.pdf

I get the following result.

Non-antialised strawberry image. Zoomed in non-antialised strawberry image.

If your image also includes text, you’ll need to add -dTextAlphaBits=1 too. Change the -r72 to a different value to rescale the image.

Improve this answer
2
  • 3
    That sure is a roundabout way of doing it but goshdang if it didn't work. – obskyr Oct 5 '14 at 16:35
  • 1
    To do the same with ImageMagick: magick +antialias -density 72 image.pdf image.png Or, in one-ish step from SVG: inkscape --export-pdf=- image.svg | magick +antialias -density 72 pdf:- image.png This also somehow works better with line effects than the doing it in two steps. Note, also, that this produces slightly different aliasing than saving the SVG with the property "Use antialiasing" turned off (shape-rendering="crispEdges"), and then using: magick -density 72 image.svg image.png Note that magick +antialias... does not work with SVGs yet but does work with PDFs as shown. – juanitogan Jan 13 '20 at 3:39
12

Inkscape 0.91 and above has the ability to toggle antialiasing. This can be accessed through the Document Properties window (Shift+Ctrl+D). When turned on, which is the default, this image of an array of triangles looks like this.

enter image description here

When turned off the image looks smoother.

enter image description here

As others have mentioned, this currently has no effect on the png export. Antialiasing is still turned on and the gaps between the triangles still visible.

What Inkscape is doing when you disable antialiasing is adding shape-rendering="crispEdges" to the file. Open your SVG in a text editor and look somewhere around line 19 and you should see it.

enter image description here

Luckily, this tag is read and adhered to when importing the SVG into GIMP. GIMP can import an SVG and set the import resolution, meaning that you can scale your png on import to be your desired size. It will crop it to the page boundaries.

enter image description here

You can now save the image and antialiasing will be disabled.

enter image description here

This has been reported as a bug a couple of times:

Improve this answer
3
  • 1
    Perfect explanation! For the illustration, a diagonal or round shape would have made the effect much more visible. – Max N Sep 13 '17 at 19:16
  • 1
    I found loading in the GIMP didn't work unless I hunted down every instance of shape-rendering:auto in the SVG and converted it to crispEdges. It turns out a lot of the paths (maybe all) had the :auto specification in their style. – Mutant Bob Jan 21 '18 at 3:31
  • Worked for me with GIMP on a complex drawing. (shape-rendering only appeared once in the SVG unlike what MutantBob found.) Also, got exact same results from ImageMagick (same library as GIMP, I'm sure): magick -density 96 image.svg image.png Note that magick +antialias ... does not work with SVGs yet and, thus, this Inkscape doc property must be set to control aliasing with both GIMP and IM (and IM should use this info to fix it). – juanitogan Jan 13 '20 at 3:04
3

You can also use SVG's shape-rendering property to make edges crisp.

In SVG XML that looks like:

<svg:something shape-rendering="crispEdges" ... />

In Inkscape's UI you can set this manually using the XML Editor (Ctrl+Shift+X) as shown in this screenshot:

Inkscape XML Editor

Select the node that the property should apply to. Here I am applying it to a group of paths. The property is displayed on the right. To add it, replicate the text you see in the lower right corner, then press Set.

Improve this answer
1
  • This is amazing! Exactly what I needed for an image where some shapes should be anti-aliased but others look better without it. Thanks so much! – Arnout Engelen Feb 18 at 15:49
0

There is a resvg library written in Rust. Part of the project is command line application that would allow you to render SVG as PNG. Said application allows to optimize for speed instead of quality, which generally gives the desired result.

You can execute application as below, as described here by the author.

rendersvg --shape-rendering optimizeSpeed --text-rendering optimizeSpeed --image-rendering optimizeSpeed in.svg out.png

Drawback is - I haven't found any binary release so you must compile it from source.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.