I created a simple logo for my website, with an object size of 512x512 px. I need a small version (say, 40x40px) for my page header next to the menu. When I try to export to png, at the original size, the dpi is set to ~114. If I make the export size be 40x40, the dpi is reduced to ~9 and the resulting image is extremely pixelated.
What is the correct way to do this? I guess I'm confused about how vector graphics work, because I thought you could change them to any size and still have a smooth image. Do I need to create two versions? Is there a way to have a larger png version and a smaller one for headers, from the same source svg image?
The default resolution is 96dpi. As so, if a object is 100x100px, the default output will be 100x100 (because it's already set as 96 by default.
The (probably) only reason to change the export dpi is for printing, usually 300 or 600 dpi.
It's not common to change dpi for making smaller images, so it's possible the export settings are not optimized for this.
The simple solution is doing what everyone else does, just create a canvas or a rectangle of 512x512 and others of different sizes and manually shrink your icon to fit.
Thanks for the replies. Based on @julioneto's suggestion, I played around with it and figured out that the export dpi does not change if you select the object and resize it by moving the corner handles. However, if you type in the width and/or height that you want in the export dialogue, then it reduces the dpi accordingly. But making the object smaller with the handles left the dpi at 96 and I could then export the smaller version for use in my headers.
Beginners' Questions Export a high-resolution logo
Inkscape.org
I created a simple logo for my website, with an object size of 512x512 px. I need a small version (say, 40x40px) for my page header next to the menu. When I try to export to png, at the original size, the dpi is set to ~114. If I make the export size be 40x40, the dpi is reduced to ~9 and the resulting image is extremely pixelated.
What is the correct way to do this? I guess I'm confused about how vector graphics work, because I thought you could change them to any size and still have a smooth image. Do I need to create two versions? Is there a way to have a larger png version and a smaller one for headers, from the same source svg image?
Thanks.
The default resolution is 96dpi. As so, if a object is 100x100px, the default output will be 100x100 (because it's already set as 96 by default.
The (probably) only reason to change the export dpi is for printing, usually 300 or 600 dpi.
It's not common to change dpi for making smaller images, so it's possible the export settings are not optimized for this.
The simple solution is doing what everyone else does, just create a canvas or a rectangle of 512x512 and others of different sizes and manually shrink your icon to fit.
Why not use .svg (vector) instead of .png (pixels) for your website?
Thanks for the replies. Based on @julioneto's suggestion, I played around with it and figured out that the export dpi does not change if you select the object and resize it by moving the corner handles. However, if you type in the width and/or height that you want in the export dialogue, then it reduces the dpi accordingly. But making the object smaller with the handles left the dpi at 96 and I could then export the smaller version for use in my headers.
Thanks for the help.