Using svg to create pixelated graphics

[gnumaru]

Has anyone already tried to make pixelated graphics from a scalable vector (svg) source?

 

I use Inkscape, and I think working with scalable vectors in inkscape is easier than pushing pixels on a raster graphics editor like gimp, because vectors are more easily reusable and easier to change.

 

However, Inkscape always does anti-aliasing when scaling down, which makes art intended to be pixelated look real bad when exported to png (I don't know about Corel Drawn or Adobe Illustrator, I have never used them).

 

I made a bash script (shell script, if you prefer), which I'm attaching to this thread, that uses inkscape to convert an svg file to a scaled up png, and then scale it down with image magick. The result looks better than the file exported directly in low resolution from inkscape, and is easy to fix the remaining issues with gimp (unfortunately, I couldn't get rid of it yet). I have attached also an example svg, with a comparison of what inkscape usually spits out (1), what image spits out when downscaling an upscaled exported image (2) and a fixed up version (3). I have put also the scaled up png.

 

Using this process to achieve the desired result (making pixel art out of vector graphics) is one option, but certainly it is not an optimal process, nor very practical (you should run the script and make the manual fixes every time you change your svg).

 

 

 

Does any one know of a better process, that does not involve don't using scalable vectors? Maybe there is an inkscape extension of some sort that exports the png without doing anti-aliasing.

 

Inkscape 0.91 (the upcoming release) will be completely replacing libnr (it's current render engine, developed by themselves) for libcairo (a much more mature and widely used renderer), and it seems cairo allows to disable anti-aliasing when up/down scaling things. But I don't know if inkscape itself will allow to turn anti-aliasing on/off when exporting to png.

 

I remember that, on Windows XP, MS Paint used to let you create curved lines which where not anti-aliased. First you traced the straight line, then you curved it (and after it became normal graphics, which could be edited only like normal raster graphics). I think a vector graphics editor that could display and export graphics in that pixelated way would be very useful in some scenarios.

 

If anyone wants to try my script, just unzip it, and run

 

#svg2pixelart.sh some_svg_file.svg;

 

Unfortunately, it will run on linux only (or maybe on OS X and BSDs also).

 

EDIT:

The image is intended to be a 16x16px mushroom, like a super mario mushroom.

mushroom.zip

svg2pixelart.zip

[lewster32]

Pixel art is a very precise way of drawing things, and unfortunately vectors rarely, if ever, map directly to the pleasing precise pixel layout that you'd expect from pixel art. There are few shortcuts to getting really good looking stuff, so I'd say the only realistic option (and the option that's invariably used wherever multiple scales are needed) is to manually draw your objects at different scales. A dedicated pixel art app will make the creation of curves and so on much easier, but I can't recommend any as I'm old-school, and draw my pixels one at a time

[chg]

I googled this, these answers sound OK to me: http://graphicdesign.stackexchange.com/questions/32058/how-to-rasterize-an-svg-without-anti-aliasing/32064#32064

 

Note: if the global anti-aliasing option is there but doesn't export you could still screenshot the graphic provided it is displayed without antialiasing

[gnumaru]

I googled this, these answers sound OK to me: http://graphicdesign.stackexchange.com/questions/32058/how-to-rasterize-an-svg-without-anti-aliasing/32064#32064

 

Note: if the global anti-aliasing option is there but doesn't export you could still screenshot the graphic provided it is displayed without antialiasing

 

The "svg to pdf to png via ghostscript" method in the link you provided seems like the behavior I expect. However, the resulting png, as you can see in (1), looks bad, worse than my "svg to upscaled png to downscaled png" method.

 

But using using ghostscript to create an upscaled png, and then downscaling it with imagemagick provides a much nicer result, as you can see in (2), though yet it is still a more irregular image than the one produced by the method I proposed earlier (it is less symmetrical, have some black pixels in unexpected places).

 

I gave the unstable inkscape 0.91 a try and saw that, indeed, there is a "use anti-aliasing" check-box in the drawing's properties, however it does not affect at all the output of the exported pngs as you noted could happen, just the output to the screen, and even so, just the when you are viewing on a 1:1 zoom ratio. I tried your suggestion: in (3) I checked "use anti-aliasing", set the zoom to 1 and made a screen shot, and in (4) I unchecked "use anti-aliasing" and made another screen shot. The result of (4) seems the best until now, but it relies in the use of a unstable development release of inkscape, and the process of doing screen shots and cutting the desired image out is as not practical as the one I proposed earlier (obs.: the gray box on 3 and 4 are inkscape's page borders and page shadow).

 

 

Pixel art is a very precise way of drawing things, and unfortunately vectors rarely, if ever, map directly to the pleasing precise pixel layout that you'd expect from pixel art. There are few shortcuts to getting really good looking stuff, so I'd say the only realistic option (and the option that's invariably used wherever multiple scales are needed) is to manually draw your objects at different scales. A dedicated pixel art app will make the creation of curves and so on much easier, but I can't recommend any as I'm old-school, and draw my pixels one at a time

 

Indeed, good pixel art is about precisely pushing pixels of the right color on the right spot. But there are various degrees of precision and I think there are some scenarios where ease of editing an reusability of models is more important then precision. I would be making a mistake if I intended to reproduce pixel art such as the one found in “Seiken Densetsu 3” (for super nintendo) or “Castlevania Symphony of the Night” (for the first sony playstation) using vectors. However, I think it is plausible to try to make art similar to what is found on “Super Mario World” (for super nintendo) using vector graphics with non anti-aliased output. Similarly, “high” resolution pixel-art (with tiles/sprites with up to 128 pixels height/width), such as the character sprites used on "Street Fighter 3" (for the first sony playstation) could be also done with vectors. Of course a sprite with 128x128 pixels could be exported and used even with anti-aliasing on, but the result is not as nice and clean as the one you get without it, with single pixel lines and no anti-aliasing.

 

 

 

 

 

I found this video on youtube about Adobe Illustrator:

 

http://www.youtube.com/watch?feature=player_detailpage&v=MkDFDCCj15Q#t=113

 

As you can see in 1:53, when you zoom in in illustrator, it gives you the option to see things pixelated, even though you are working with vectors and scalable fonts (true type/open type fonts). Illustrator even gives you the option to turn anti-aliasing on/off on a per object basis. This kind of behavior (the option of zooming in and being able to see things pixelated, without aliasing or filtering) plus the option to export exactly what you are seeing (without anti-aliasing and/or filtering), is the kind of behavior I think would be just what is needed to do pixel art with vectors. If Illustrator already does it, then there already exists a tool to do what I want. However, I prefer to use free tools whenever possible and that's why I'm trying to do it with inkscape instead of Illustrator or some other non-free software.