0

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.

2
  • 6
    If the image is a bitmap, the svg format doesn't do anything to allow the scaling. You need to convert on inkscape to a real using Path->Trace Bitmap before, and then, remove the original image
    – Joao Polo
    Nov 3, 2016 at 2:08
  • 1
    To clarify, when you opened the PNG in Inkscape, what you did was embed the raster image in an SVG file. Simply opening it in Inkscape did not magically convert it from a raster image to vector. Nov 14, 2016 at 20:05

1 Answer 1

2

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.

TracedBitmap

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.

enter image description here

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.

1
  • The Trace Bitmap tool is quite powerful and can convert full colour images, you just end up with a lot of paths for each colour. I just converted a huge logo with lots of anti aliasing and at 8 passes ended up with a huge file as Trace Bitmap converted each level of the anti aliasing to a different path (looks great). Then I ran it again with just 2 passes and I get a nice neat two colour logo ready for web use. Caveat: I have fought in the past with the settings in Trace Bitmap and YMMV, try using the defaults before anything else.
    – rob
    Jun 5, 2018 at 8:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.