Convert a pixel art into an SVG file

pixart2svg.py

#!/usr/bin/env python3

# Convert a pixel art to SVG file
# Copyright (C) 2021  Star Brilliant
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program.  If not, see <https://www.gnu.org/licenses/>.

from typing import List, Set, Tuple
import imageio
import numpy
import sys


def fill_block(image: numpy.ndarray, is_pixel_filled: numpy.ndarray, x: int, y: int) -> Set[Tuple[int, int]]:
    # Flood fill algorithm
    pixel_color = image[y, x, :3]
    color_block = [(x, y)]
    i = 0
    while i < len(color_block):
        x1, y1 = color_block[i]
        for x2, y2 in {(x1, y1 - 1), (x1 - 1, y1), (x1 + 1, y1), (x1, y1 + 1)}:
            if y2 < 0 or y2 >= image.shape[0] or x2 < 0 or x2 >= image.shape[1]:
                continue
            if is_pixel_filled[y2, x2]:
                continue
            if (image[y2, x2, :3] == pixel_color).all():
                color_block.append((x2, y2))
                is_pixel_filled[y2, x2] = True
        i += 1
    return set(color_block)


def generate_path(color_block: Set[Tuple[int, int]]) -> List[Tuple[int, int]]:
    # Square tracing algorithm
    # http://www.imageprocessingplace.com/downloads_V3/root_downloads/tutorials/contour_tracing_Abeer_George_Ghuneim/alg.html
    x, y = sorted(color_block, key=lambda x: (x[0] + x[1], x[1], x[0]))[0]
    path = [(x, y)]
    x1, y1 = x, y
    dx, dy = 1, 0
    while (x1, y1) != (x, y) or len(path) == 1:
        x2, y2 = x1 + (dx + dy - 1) // 2, y1 + (dy - dx - 1) // 2  # Left pixel
        x3, y3 = x1 + (dx - dy - 1) // 2, y1 + (dx + dy - 1) // 2  # Right pixel
        if (x3, y3) in color_block:
            if (x2, y2) in color_block:
                path.append((x1, y1))
                dx, dy = dy, -dx  # Turn left
            else:
                pass  # Go straight
        else:
            path.append((x1, y1))
            dx, dy = -dy, dx  # Turn right
        x1, y1 = x1 + dx, y1 + dy
    return path


def main(argv: str) -> int:
    if len(argv) != 3:
        print('Usage: pixart2svg.py <input_image_file> <output_svg_file>')
        return 1
    input_file, output_file = argv[1], argv[2]
    image = imageio.imread(input_file)
    if len(image.shape) != 3:
        print('Image must be RGB')
        return 1

    height, width, channels = image.shape
    if channels not in (3, 4):
        print('Image must be RGB')
        return 1

    is_pixel_filled = numpy.zeros((height, width), dtype=bool)
    with open(output_file, 'w', encoding='UTF-8') as f:
        f.write('<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n')
        f.write(f'<svg viewBox="0 0 {width} {height}" width="{width}" height="{height}" xmlns="http://www.w3.org/2000/svg">\n')
        f.write('  <style>\n')
        f.write('      .pixart2svg {\n')
        f.write('        color-interpolation: linearRGB;\n')
        f.write('        shape-rendering: geometricPrecision;\n')
        f.write('      }\n')
        f.write(f'    @media (min-width: {width * 2}px) and (min-height: {height * 2}px) {{\n')
        f.write('      /* Disable anti-aliasing when zoom level > 200%.\n')
        f.write('         However, there is currently no way to completely eliminate edge artifacts.\n')
        f.write('         See also: https://bugs.webkit.org/show_bug.cgi?id=35211 */\n')
        f.write('      .pixart2svg {\n')
        f.write('        shape-rendering: crispEdges;\n')
        f.write('      }\n')
        f.write('    }\n')
        f.write('  </style>\n')
        f.write('  <g class="pixart2svg">\n')
        f.flush()
        for x, y in sorted([(x, y) for y in range(height) for x in range(width)], key=lambda x: (x[0] + x[1], x[1], x[0])):
            if is_pixel_filled[y, x]:
                continue
            color_block = fill_block(image, is_pixel_filled, x, y)
            path = generate_path(color_block)
            pixel_color = '#{:02x}{:02x}{:02x}'.format(image[y, x, 0], image[y, x, 1], image[y, x, 2])
            if len(path) == 4:
                assert path[0][1] == path[1][1]
                assert path[1][0] == path[2][0]
                assert path[2][1] == path[3][1]
                assert path[3][0] == path[0][0]
                rect_x = path[0][0]
                rect_y = path[0][1]
                rect_w = path[2][0] - path[0][0]
                rect_h = path[2][1] - path[0][1]
                f.write(f'    <rect fill="{pixel_color}" x="{rect_x}" y="{rect_y}" width="{rect_w}" height="{rect_h}" />\n')
            else:
                x1, y1 = path[0]
                path_string = f'M {x1},{y1}'
                for x2, y2 in path[1:]:
                    if x1 == x2:
                        path_string += f' V {y2}'
                    elif y1 == y2:
                        path_string += f' H {x2}'
                    else:
                        path_string += f' L {x2},{y2}'  # Should not happen
                    x1, y1 = x2, y2
                path_string += ' z'
                f.write(f'    <path fill="{pixel_color}" d="{path_string}"/>\n')
            f.flush()
        f.write('  </g>\n')
        f.write('</svg>\n')
    return 0


if __name__ == '__main__':
    sys.exit(main(sys.argv))