Creating svg with inkscape result in bad quality when scaling

Question

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.

Answer 1

An svg file can have an embedded raster image (i.e. non vector, .jpg, .png, etc.), and just by importing into Inkscape and saving out as svg, it does not mean that the image/shape was converted to a vector graphic (with it's sizing/scaling advantages).

As @joaozito-polo mentioned, to convert from raster to vector in Inkscape you need to use the Path > Trace Bitmap tool. Doing this with the image you provided yields not the best results as seen below.

The image above is without any modification after using the Trace Bitmap tool (I have moved the original png to the right, which you should eventually delete before saving as your final svg). The one below is after using the Path > Simplify (Ctrl+l) tool to 'smooth' it out. Less is more with that tool as if you repeatedly use simplify it will distort the shapes in other undesirable ways.

I've had to convert simple black and white raster logos to vector before an this is the workflow I've followed:

• In GIMP, convert the image to true black and white (only two colors) by using the Colors > Threshold tool. (In this case, with the color picker, pick the blue before running the Threshold tool then use the paint bucket to repaint the blue)
• Clean up any artifacts by hand & save out as png. In this case paint black various pixels on the rim of the circle, which are white.
• Run the Path > Trace Bitmap tool in Inkscape, delete the original raster image and save out as svg.

Below is the same example with the transformations above and you can see the improvement in quality.

Having said that, you mention that you created this image yourself in GIMP. I would recommend that you explore the creation of your assets directly in Inkscape as much as possible. Especially in this simple example, it boils down to a circle, a line or rectangle for the handle and some blue paint.

By creating your image in Inkscape from the beginning you simplify your workflow and your outputs will be crisper (and both svgs and pngs slightly smaler in file size). If you have to deal with source images created by someone else, I do think the above 'pre-processing' in GIMP is well worth the effort before converting it to a vector image in Inkscape. Have fun learning both GIMP and Inkscape, both complimentary tools that should be in anyone's arsenal.Hope this helps.