Per Layer/Object Support for SVG images

[jetrotal]

I'm on a quest to find a way to convert Vector Images to pixel art, as on the "Out of this World" game.

Here's a discussion on it: https://github.com/aseprite/aseprite/issues/2704#issuecomment-1074251901

Maybe a way to have this to implement pixelit on svg files but with a twist, The effect would be reapplied multiple times on each layer/object from the svg file, That would be:

• Run pixelit 1 time over a stroke layer/object, using only the stroke color as palette,
• Run pixelt 1 time over a fill object, using the fill color as a palette.
• Run pixelt 1 time over over the next stroke or fill layer
• repeats those tasks until all layers/objects are processed

The final result would be something close to the image bellow

Today pixelit does something similar to this:

It's also important to check issue #10 in order to this gimmicky suggestion to work.

---

Maybe this suggestion could also be expanded to all kind of images, by using some kind of posterize effect + breaking the image into multiple images depending on the color used.

Thanks for the amazing work

[giventofly]

Hi,

I currently don't have time to make upgrades/changes in this project, and .svg support was not a thing I was thinking on implementing. If/when I have sometime I will see if it possible to add support.

Regarding #10 that is a javascript problem, you can see a quick example or get a starting point to batch multiple files on the tests page ( html and javascript ) live.

[jetrotal]

Hello, I ducktaped some of the Ideas I suggested: https://codepen.io/jetrotau/full/popOqrV

---

The process consists in:

repeating the SVG file muliple times, but making every unused layer invisible - explodeSVG()

then generating multiple px objects for each new layer, and finally applying my hacky opacity modifier discussed on #10.

---

#

The first problem i'm finding is that The repeated layers can get slower the bigger the SVG files is, since the canvas processes each pixel multiple times (even the invisible ones).

I wonder if it's possible to crop those px canvases to remove those 100% invisible pixels, like this:

👉

Will that break the pixel generator? I wonder that because IDK if all files should have the same width, height, x and y coordinates... and maybe that will also make some pixels render outside it's canvas, cropping pixels that shouldn't be cropped

---

#

The second problem I'm having is that, the app does not know how to deal with assets that are semi-transparent by the artist's choice:

To solve this, I'm considering moving the opacity attributes to the px <canvas>'s style itself

The problem here is that those properties can be anywhere depending the app used to create the SVG file. I've seen: opacity=".5", fill-opacity=".5", stroke-opacity=".5", fill:RGBA(0,0,0,.5), color matrix effects...

Then comes: opacity inside <g> tags or outside those group tags, being declared on it's own<style> tag, or inside <defs> tags - that i'm ignoring because they just define what will appear when a<use> tag calls it...

I mean, there are e lot impredictable stuff when dealing with SVG files. Maybe the canvas px could track its own opacity style when generating an image...? IDK

---

Well, that's what I've been fiddling with your tool, thanks so much for making it in the first place!

I'm also having some Ideas by making something similar to explodeSVG() but for jpg/png/etc, by using the colorThief Library: https://github.com/lokesh/color-thief

That with some variation of the convertpalette() function which also transform different pixels into 100% transparent.

Could help breaking a png file into multiple layers, helping us implementing a more accurate pixel art generator...