Design (SVG) to Wearable Screen (PNG)

[lltremper]

Dear ImageMagick community,

I am new to the technology of ImageMagick, however, I have some affiity with image conversion.

My problem
We are doing a wearable product (watch).
The display is already selected, thus viewing area and dpi are fixed.
For the UI design we have a designer.
The designer provides vector images (*.svg) considering the final viewing area.
The developers on the other hand need to have pixel based graphical ressources (png, bmp,...).
If I simply convert the SVG to PNG (for example) photoshop, the results are very bad (see below).

I am aware that the quality after conversion from SVG to PNG will be lower.
However, one can easily see that the png could be much better/smoother.
I could do this by hand, but this is very unpracticle as we will have many different screens in the final product.



The input SVG file can be found here: https://www.dropbox.com/s/9epspfb3k0va1 ... n.svg?dl=0

If I convert the SVG using ImageMagick (command line)...

Code: Select all

-convert -density 100 design.svg -monochrome design.png

... the results are similar (for sure, because there is no difference to PS I guess).

My question
Is there a solution to convert SVG to PNG with a fixed DPI in a way that the PNG is already in a good quality?
Which actions can be done using ImageMagick?

Thank you very much in advance and BR,
LLT

[snibgo]

Is there a solution to convert SVG to PNG with a fixed DPI in a way that the PNG is already in a good quality?

Yes, but what is "good quality"?

For example, you can convert from vector to raster at whatever density you want, then you can resize it, and set any density you want:

Code: Select all

convert -density 600 design.svg -resize 600x600 -density 72 design_out.png

[lltremper]

Hi snibgo,
Thanks for your fast reply, at first.

Unfortunately I forgot to add the

Code: Select all

-monochrome

to the conversion. As we only have a b/w display, we cannot use greyscale images. I updated the command in my original post.

Anyway, I adapted your suggestion to my needs (target resolution 200x100, dpi 100) using the following command:

Code: Select all

convert -density 600 design.svg -resize 200x100 -density 100 -monochrome design.png

This leads to this result:


As you might see, the quality is still not good.
"Not good" in this case means, that obviously it could look much smoother when drawing the letters and lines by hand.
However, this is not feasible for the final conversion as we have too many screens.

BR,
llt

[snibgo]

If your display is black and white only, with no grayscale, then diagonal and curved edges will always have jaggies ("staircasing", "aliasing").

[lltremper]

Sure it will, but looking at the converted PNG it seems to be obvious that it could easily look better.
Here, I've manipulated the biggest Text by hand:



Same resolution, same size but "better/smoother" result.

[fmw42]

Why do you need to use -monochrome? That will dither the image. You could simply threshold to binary and/or set the -type bilevel.