I created a simple image using gimp and exported it as png. I opened the image with inkscape and saved it as svg. When viewing both image in firefox at normal scale, they both look the same. When I resize them to a smaller image, the png looks much better than the svg. I am by no mean a designer. I am a backend programmer who plays around with gimp and inkscape. But never figured out why I cannot make a decent svg with inkscape.
svg normal scale in firefox
<img src="magnifying.svg" />
first svg http://colossemedia.com/images/svg1.png
png normal scale in firefox
<img src="magnifying.png" />
first png http://colossemedia.com/images/png1.png
They look the same as far as I can tell. Now scaled:
svg scaled down in firefox
<img style="width:100px" src="magnifying.svg" />
first svg http://colossemedia.com/images/svg2.png
png scaled down in firefox
<img style="width:100px" src="magnifying.png" />
first svg http://colossemedia.com/images/png2.png
The png looks much better than the svg.
No matter how hard I try, I cannot have a decent svg with inkscape (as soon as I scale). I tried several different options like "Image rendering mode" to "smooth" or "none", the image DPI I tried "from file" and "default impression resolution". I tried to save with the 3 differents svg format ("Inkscape svg", "plain svg" and "optimized svg"). I tried converting JPG instead of PNG still the same problem. I downloaded an svg illustration online that was created with illustrator just to make a the same test in firefox. The svg looked great no matter the size. I am using inkscape 0.91.