This is a read-only archive of the inkscapeforum.com site. You can search for info here or post new questions and comments at Hello guys,
I am having a problem with pixelation of my images. I am exporting my svg's as png's with a dpi of 90.
Now in Inkscape I can zoom in as much as I want without any pixelation.
However on the web, or in my image viewers. My images look pixelated at as little as 140%. I want to know whether this is normal, meaning is it normal for web logos to look pixelated at a 140% zoom..
Secondly I was trying to export a "letter template". It contains a logo and some footer graphics, but for the rest its mainly a plain A4 page. The logo is very small yet it looks pixelated without even zooming in.
Can anyone maybe shed light on this? I have attached both the png file and the svg file. I hope someone can help.
Pixelation problem
-
booandpark
- Posts: 7
- Joined: Thu Jan 05, 2012 9:57 pm
Pixelation problem
- Attachments
-
- letter.png (15.59 KiB) Viewed 9015 times
-
- letter.svg
- (5.01 KiB) Downloaded 251 times
Re: Pixelation problem
PNG is a raster format, it's made of pixels and you'll always see separate pixels as you zoom in.
SVG is a vector format, it's made of math formulas (this is an oversimplification) and is being redrawn on each zoom change, that's why it can always be smooth. If you're thinking in terms of pixels you can see SVG as a different image for each zoom.
Small icons need special treatment to make them appear like you'd expect on normal zoom. I'm not sure if your logo falls into that category, it just seems like a case of jagged lines that you get when exporting into PNG. There are threads on this forum about it, try searching for them.
Also when sharing documents convert your text into paths, people who don't have the used fonts won't see your exact design. I can't see your design because I don't have Kozuka Gothic Pr6N EL on my system.
SVG is a vector format, it's made of math formulas (this is an oversimplification) and is being redrawn on each zoom change, that's why it can always be smooth. If you're thinking in terms of pixels you can see SVG as a different image for each zoom.
Small icons need special treatment to make them appear like you'd expect on normal zoom. I'm not sure if your logo falls into that category, it just seems like a case of jagged lines that you get when exporting into PNG. There are threads on this forum about it, try searching for them.
Also when sharing documents convert your text into paths, people who don't have the used fonts won't see your exact design. I can't see your design because I don't have Kozuka Gothic Pr6N EL on my system.
just hand over the chocolate and nobody gets hurt
Inkscape Manual on Floss
Inkscape FAQ
very comprehensive Inkscape guide
Inkscape 0.48 Illustrator's Cookbook - 109 recipes to learn and explore Inkscape - with SVG examples to download
Inkscape Manual on Floss
Inkscape FAQ
very comprehensive Inkscape guide
Inkscape 0.48 Illustrator's Cookbook - 109 recipes to learn and explore Inkscape - with SVG examples to download
-
booandpark
- Posts: 7
- Joined: Thu Jan 05, 2012 9:57 pm
Re: Pixelation problem
Prkos thank you very much. That made a lot of sense.
But although svg achieves that smoothness all the time, I can't upload an svg into my wordpress blog. My only other option would be exporting it as an "png", and you believe that this exportation is causing the jagged lines?
And thanks for the "text into paths" tip. Very valuable lesson there for me. I will continue to search for other threads.
But yes ultimately I want to know how to export my svg files without pixelation.
But although svg achieves that smoothness all the time, I can't upload an svg into my wordpress blog. My only other option would be exporting it as an "png", and you believe that this exportation is causing the jagged lines?
And thanks for the "text into paths" tip. Very valuable lesson there for me. I will continue to search for other threads.
But yes ultimately I want to know how to export my svg files without pixelation.
Re: Pixelation problem
1.
Yes, it's to be expected. You've exported at 90dpi, the nominal 1 image pixel = 1 (screen) pixel setting, so if you zoom, the pixels are bound to show.
You can export at a higher dpi, and rescale it down in your html. Modern browsers do this reasonably well. At the cost of extra bandwidth and so on which most users won't see the benefit of.
Or use the svg directly, which is then rescalable. Whether this works depends on the user's browser.
2.
You'll need to export your A4 document at 300 DPI (or whatever your printer supports). It'll look fine when printed, though appear huge on screen.
I think an enormous png file as a document template is a poor idea, though, and would suggest embedding just the Logo and letting your Word Processor do the rest.
Yes, it's to be expected. You've exported at 90dpi, the nominal 1 image pixel = 1 (screen) pixel setting, so if you zoom, the pixels are bound to show.
You can export at a higher dpi, and rescale it down in your html. Modern browsers do this reasonably well. At the cost of extra bandwidth and so on which most users won't see the benefit of.
Or use the svg directly, which is then rescalable. Whether this works depends on the user's browser.
2.
You'll need to export your A4 document at 300 DPI (or whatever your printer supports). It'll look fine when printed, though appear huge on screen.
I think an enormous png file as a document template is a poor idea, though, and would suggest embedding just the Logo and letting your Word Processor do the rest.
-
booandpark
- Posts: 7
- Joined: Thu Jan 05, 2012 9:57 pm
Re: Pixelation problem
1) I think that is the best option that I can go with.
2) With this template its just to showcase to a client what the logo would look like in practice. Sort of visualizing the logo even further.
2) With this template its just to showcase to a client what the logo would look like in practice. Sort of visualizing the logo even further.
-
flamingolady
- Posts: 687
- Joined: Wed Jun 10, 2009 1:40 pm
Re: Pixelation problem
How about saving the svg file as an EPS in inkscape, then using it?
just a thought.
just a thought.
Re: Pixelation problem
You can use SVG in your website. Here is a link on how to do that: http://css-tricks.com/using-svg/
Keep in mind that it is not supported by IE, however, so be sure to read the work-arounds at the bottom for users of that browser.
Keep in mind that it is not supported by IE, however, so be sure to read the work-arounds at the bottom for users of that browser.