1

I have created a vector file (svg) and now I wanted to export it as 66px x 66px, 44px x 44px and 22px x 22px PNG file. It should be used as a UIBarButtonItem in the navigation bar. Therefore I use Inkscape. Here is an example:

Icon with anti aliasing

I updated to Inkscape 0.91 to disable the anti-aliasing option, but it didn't helped. I tried an online converter tool, tried to simply downscale, exported as EPS/PDF and imported in GIMP, but everytime I don't get sharp lines. There is always antialiasing involved. I read about using tools like ImageMagick, Ghostwriter and use the command line version, but here I have to question the process of how to create my icons. It should be simple and no programming job.

So what is the best way of creating vector images and exporting them as PNG images without antialiasing?

Improve this question
6
  • Can you post an example export that does not satisfy you?
    – Wrzlprmft ♦
    Apr 3, 2015 at 11:53
  • @Wrzlprmft: I edited my question and provided an example.
    – testing
    Apr 3, 2015 at 11:55
  • if you were using illustrator I would tell you to use align to pixel grid which would make everything pixel perfect with no blurry edges. But you are using Inkscape. To be honest with you, for something so simple I would just use Photoshop. No need for vector graphics in this situation.
    – Eddie Adolf
    Apr 3, 2015 at 17:32
  • 1
    Have you tried to resize the image in Inkscape to the desired size (e.g. 22x22px) and the export it with a 1:1 ratio?
    – Paolo Gibellini
    Apr 4, 2015 at 7:59
  • 1
    @PaoloGibellini: No, but I'll try it the next time and will let you know the results.
    – testing
    Apr 4, 2015 at 16:30

1 Answer 1

Reset to default
1

This problem has nothing to do with software choice or settings therein but basic mathematics.

If your output is intended to be square raster files in multiples of 22 then the source (vector) file and the major elements should be simply divisible by 22.

With the horizontal line elements in your design being half the height of their respective dots, and centre aligned, you're creating a scenario where the smallest possible height is 2px per line. That makes your dots 4px and creates a minimum file height of 4px X 7(3 dots plus top & bottom space) giving 28px.

I suggest you create a 22x22 grid, lay out your design so no lines overlap the grid lines and then scale it up for the other sizes. It's more complicated explaining why it won't work the way you've done it than just starting again with an output grid of the size you want - you'll "click" where you went wrong and why your file will never give you what you want.

Improve this answer
4
  • Now, I tried what you said (www26.zippyshare.com/v/pGm89LGJ/file.html). First, I thought it would work. I made a little adjustment and now I only get anti-aliased images.
    – testing
    Apr 14, 2015 at 12:18
  • @testing Good job on the svg! I exported a 22x22 version and it was beautifully crisp. Make sure that in the export dialogue that you've selected 'Page' or 'Drawing' to ensure the entire 22x22 area is exported and that the export bitmap size is also 22x22. You'll find the resolution is then 90dpi.
    – user19660
    Apr 14, 2015 at 12:24
  • OK. So the only difference was the 90dpi export setting? Now it works. Thank you very much!
    – testing
    Apr 14, 2015 at 12:27
  • 1
    Actually no. Inkscape always wants to export at 90dpi but it's not really the resolution that was causing your antialiasing. If you change the output resolution to anything other than 90dpi it will change the dimensions of your exported bitmap. If you set the dpi to 72 the resulting bitmap is 18x18. If you visualise an 18x18 grid in your svg file you'll see where and why you're getting antialiased output. Double the output dimensions to 44x44 and you'll see your dpi double to 180.
    – user19660
    Apr 14, 2015 at 12:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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