Jump to content

User:Slashme/To SVG

From Wikipedia, the free encyclopedia

Inkscape has a potrace plugin which makes it feasible to convert raster graphics to vector graphics. This page is intended as a manual on how to get good results with this process.

What are good results?

[edit]
  • The vector image should be a good representation of the raster image
  • The svg should render well under a variety of interpreters
  • The svg should be reasonably efficient in terms of file size, number of colours used and complexity

Method

[edit]

General method to convert picture to bitmap

[edit]
  1. Open inkscape
  2. "File" -> "Import"
  3. Move and scale your image so that it is well positioned on the page
  4. Select the image
  5. "Path" -> "Trace bitmap"
  6. Select appropriate settings and click "OK"
  7. Delete the original image
  8. If necessary, edit the generated SVG
  9. Save as "plain SVG" to ensure that it can be understood by as wide a range of interpreters as possible

Tips to make your picture convert well

[edit]
  • If the picture is clearly pixellated, you might get some improvement by enlarging it and then blurring it somewhat.
  • Before importing the image, reduce the colour depth with a graphics editing tool (e.g. the GIMP). If this is properly done, inkscape will do a better job of assigning colours.
  • If you can't get inkscape to pick sensible colours, you can decompose the image into colours and feed inkscape one colour at a time:
    1. Open the image in the GIMP
    2. Make sure it has transparency switched on
    3. Use a tool such as the "fuzzy select" or the "select by colour" tool to pick out one colour
    4. Delete the rest, and save as a one-colour PNG with transparency
    5. Undo back to your original picture
    6. Repeat 3-5 for all the colours you want in the svg.
  • If you have simple geometric shapes such as circles, represent them as such in inkscape: This way you know that the shape is perfect
  • Thin lines, all with the same thickness, should not be traced by potrace, because they will be represented as rectangular shapes. It's better to create them yourself using the bezier tool.
  • Wherever possible, use actual text: this makes pictures easier to translate, easier to index with search engines, and much smaller.
  • Try the "simplify path" tool where possible, sometimes it makes quite a difference.
  • Often you can make an image much smaller and easier to edit by deleting lots of points on the curves that potrace creates. Edit the path with the path tool and delete any points that don't seem to be contributing much.
  • Often you can improve the look of a traced picture by hand-editing the paths. It takes quite a while, but it can make a big difference to the quality.