SVG Export

[ZEkA10000]

As we know SVG exports as collection of RECT tags.
It possible to export svg with join neighbor pixels with same color?
Or can you suggest tool for convert pixel art as one solid tag?

[behreajj]

I'd also be interested in such a feature. From what I could find, Inkscape has a trace bitmap feature with pixel art settings https://inkscape.org/doc/tutorials/tracing-pixelart/tutorial-tracing-pixelart.html . When I tried it, though, the paths were smoothed no matter how I fiddled with the inputs. If nothing else, the link above names some of the algorithms used and complexities involved.

There's also PixelsToSvg https://codepen.io/shshaw/full/XbxvNj , which seems to connect similar pixels into horizontal runs. Unfortunately, it creates multiple variants of the same color, even in its test sprite (for example, #fe3118, #ff3119, #ff3018).

The Aseprite Github has an issue to track this feature https://github.com/aseprite/aseprite/issues/1911 . Like it says, the logic used to draw the marching ants along a selection's border can be transferred to this.

If you only need an SVG that reduces the seams between like pixels when viewing the SVG in say Inkscape or Firefox, I wrote a custom export dialog that draws each unique color as a path while making each pixel rectangle a sub-path. Example:

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" shape-rendering="crispEdges" stroke="none" preserveAspectRatio="xMidYMid slice" width="32" height="32" viewBox="0 0 32.0000 32.0000">
<path id="ff33a900" fill="#00A933" d="M 8 0 L 16 0 L 16 8 L 8 8 Z M 16 0 L 24 0 L 24 8 L 16 8 Z M 24 8 L 32 8 L 32 16 L 24 16 Z M 24 16 L 32 16 L 32 24 L 24 24 Z" />
<path id="ffa65911" fill="#1159A6" d="M 24 0 L 32 0 L 32 8 L 24 8 Z M 16 8 L 24 8 L 24 16 L 16 16 Z M 8 16 L 16 16 L 16 24 L 8 24 Z" />
<path id="ff0000ff" fill="#FF0000" d="M 0 0 L 8 0 L 8 8 L 0 8 Z M 0 8 L 8 8 L 8 16 L 0 16 Z M 8 8 L 16 8 L 16 16 L 8 16 Z M 16 16 L 24 16 L 24 24 L 16 24 Z M 16 24 L 24 24 L 24 32 L 16 32 Z M 24 24 L 32 24 L 32 32 L 24 32 Z" />
</svg>

Not ideal in terms of excess node points, but it was originally written to add borders between each pixel. The Lua is here if you're interested: https://github.com/behreajj/AsepriteAddons/blob/main/dialogs/export/svgExport.lua .