: Convert PNG pixel arts to SVG without tracing For a personal project, I designed some icons as PNG files and would like to export them as SVGs. I know the next question: I don't want a raster,

@Margaret771

If you have python and PIL/Pillow, I just wrote this (a trivially simple version of the tool in @JohnB 's answer):

#!/usr/bin/env python2.7
import sys
infile = sys.argv[1]
outfile = sys.argv[2]
from PIL import Image
image = Image.open(infile).convert('RGBA')
data = image.load()
out = open(outfile, "w")
out.write('<?xml version="1.0" encoding="UTF-8" standalone="no"?>n')
out.write('<svg id="svg2" xmlns="http://www.w3.org/2000/svg" version="1.1" width="%(x)i" height="%(y)i" viewBox="0 0 %(x)i %(y)i">n' % {'x':image.size[0], 'y':image.size[1]})
for y in range(image.size[1]):
for x in range(image.size[0]):
rgba = data[x, y]
rgb = '#%02x%02x%02x' % rgba[:3]
if rgba[3] > 0:
out.write('<rect width="1" height="1" x="%i" y="%i" fill="%s" fill-opacity="%.2f" />n' % (x, y, rgb, rgba[3]/255.0))
out.write('</svg>n')
out.close()


Call it with arguments input.png output.svg and it should go. I wouldn't try it with anything bigger than a few hundred pixels squared though.

Vote Up Vote Down

@Michele215

pixel2svg has the potential to do this, but it requires some modification of the script.

How to do it

You need to modify the svgdoc.add call on line 125 of pixel2svg.py to add in opacity attribute. It should look like the following:

svgdoc.add(svgdoc.rect(insert = ("{0}px".format(colcount * arguments.squaresize),
"{0}px".format(rowcount * arguments.squaresize)),
size = ("{0}px".format(arguments.squaresize + arguments.overlap),
"{0}px".format(arguments.squaresize + arguments.overlap)),
fill = svgwrite.rgb(rgb_tuple[0],
rgb_tuple[1],
rgb_tuple[2]),
opacity = rgb_tuple[3]/float(255)))


Here's a diff of the code change. To show it in action I made this very tiny image. Here's the SVG produced by the modified pixel2svg (or check it out in action here.):

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" height="40px" version="1.1" width="440px">
<defs/>
<rect fill="rgb(255,0,255)" height="40px" opacity="0.101960784314" width="40px" x="40px" y="0px"/>
<rect fill="rgb(255,0,255)" height="40px" opacity="0.2" width="40px" x="80px" y="0px"/>
<rect fill="rgb(255,0,255)" height="40px" opacity="0.301960784314" width="40px" x="120px" y="0px"/>
<rect fill="rgb(255,0,255)" height="40px" opacity="0.4" width="40px" x="160px" y="0px"/>
<rect fill="rgb(255,0,255)" height="40px" opacity="0.501960784314" width="40px" x="200px" y="0px"/>
<rect fill="rgb(255,0,255)" height="40px" opacity="0.6" width="40px" x="240px" y="0px"/>
<rect fill="rgb(255,0,255)" height="40px" opacity="0.701960784314" width="40px" x="280px" y="0px"/>
<rect fill="rgb(255,0,255)" height="40px" opacity="0.8" width="40px" x="320px" y="0px"/>
<rect fill="rgb(255,0,255)" height="40px" opacity="0.901960784314" width="40px" x="360px" y="0px"/>
<rect fill="rgb(255,0,255)" height="40px" opacity="1.0" width="40px" x="400px" y="0px"/>
</svg>


What's going on

pixel2svg uses PIL to process through each pixel of the supplied image. It actually already pulls the alpha value of each pixel as an integer [0-255], it just doesn't do much with it:

image = PIL.Image.open(positional[0])
print("Converting image to RGBA")
image = image.convert("RGBA")


The pixel data is then reconstructed into an SVG using the svgwrite library. Each pixel is drawn using as the svgwrite.shapes.Rect method which allows you to chain "additional SVG attributes as keyword-arguments". The SVG opacity value expects a float [0.0-1.0], so we just need to normalize the alpha value before setting it as the opacity.



Disclaimer: This was my first time ever messing with Python, so feel free to point out any beginner errors I may have made!

Vote Up Vote Down

@Jessie844

If you do not auto trace, the option is do it by hand. Make a grid and start drawing boxes.

Your requirements:


Vector, no raster (OK)
Pixel by pixel conversion, no tracing (OK) half ok. A vector based file has no pixels.
Take alpha into account (OK) If you simply do not draw a background.
Optional: Command line would be great. Any comand line option is a "tracing" Good that is one is optional.


Svg can also include png inside it... but it has not much sense in this case I belive.

Vote Up Vote Down