Community Help Needed Converting PNGs to SVGs

Feature & Design Feedback
1

NOTE: All of these images have now been converted the SVGs

We’ve done some work lately adding support for the direct usage of SVG files in the interface. The next step of this process is supporting the “Tool” icons. These are currently created and maintained as 2D shapes in a blend file, exported to triangles and vertex colors, and then rasterized as needed. The process is a bit complicated, there are caching problems, and the results suboptimal. I’d like to replace these with the new SVG system.

But this requires converting them to SVG files. There are about 120 of them and the time it takes to convert each one seems a bit more than I can find. So I am hoping we can do this faster by distributing the work among a group. Or we’ll find one smart person who can convert them all with a quick process.

I have converted all the tool icons to PNG files (at 1400x1400 with transparent background). They can be found in the following zip file: 3.97 MB “PNG.zip” File.

image
image1091×319 61.4 KB

Of the 120 icons, 119 are now converted (with one that is unknown). These can be found in the following zip file: 175KB “SVG.zip” file. If unsure of the desired size, feature widths, alignment, margins, etc just load some of those and it should be clear. Otherwise just send me a DM.

image
image1513×934 193 KB

Can’t these just be auto-traced quickly?

I have had no luck (so far) converting these quickly with a tracing process. Within Inkscape, for example, it will usually give me a result that looks okay at first glance. But it normally makes a valid path for each visible shape, but then adds hundreds of bogus paths as well (usually a single control point or just short unclosed lines that are not visible. It takes quite a while to remove the cruft before cleaning up. I have found it faster to just create the design from scratch by drawing with the pen tool on top of the PNG file as a reference.

I’d appreciate any help at all. At minimum just an SVG that fits within the document size of that “_proto.svg” is helpful. But I am also hoping to have the minimum paths needed for the design, and for each path to have the minimum control points needed. The Tool icons are triangulated, so circles and arcs are made of straight segments. So replacing them with Bezier curves make them much nicer at any size.

Ideally each separate color would be in different groups. So if an icon features two colors then it can have two groups for each color. Shades of grey can be treated as one color. This is just so that later I might be able to recolor these portions to follow theme settings.

How can this be coordinated?

If you have a way of converting them all quickly and accurately, then add a post here about how you can do so before anyone else does any work. Otherwise you can convert any randomly and post here. Or post an intention to do multiples to avoid duplication of work.

17 Likes
2

Is it possible to use online AI tools to trace the image to SVG, licensing-wise (so it won’t cause legal problems for Blender if you use it)?

3

I’ve been playing a bit with potrace. Which seems to create ok svgs, but only does black&white.

It could maybe be automated for the icons using only a few colors by splitting each color to a separate ‘mask’ image, tracing them and then combining the results…

I’m a bit pressed for time atm, but I’ll try to play around a bit with it tonight.

2 Likes
4

Technically yes, but usually the results are far from perfect. A lot of extra lines and points that just aren’t needed. Resulting in more data, larger files and messy line work, etc.

At the end of the day, do it once and do it right… trace it all manually.

On having a quick look, a lot of the icons are either small changes from one to another or share a bunch of the same elements, so one really only has to half create much of it once.

I’ll have a closer look later tonight and do a couple of test icons for you to look at.

Once the process is all sorted out and output locked in, it may not take too long to do them all. Besides, I recent purchased Affinity Designer, so a good reason to give it a spin and leave Illustrator behind.

1 Like
5

Yes, it shouldn’t matter what tools you use for these. There are some open questions regarding copyright of AI-generated content, but that isn’t applicable if the designs stay the same and you just have a conversion and not a derivative work.

1 Like
6

If the results are nice and clean then it could be an option to use it on all the monochrome ones, which about 40 of them.

1 Like
7

Me too, i want to contribute, i can convert PNG to SVG manually

1 Like
8

This is brush.gpencil_draw.fill.svg, since file name got stuffed up. If going ahead I’ll zip them all up next time.

brush.gpencil_draw.fill

So here’s my first initial quick test based on the first one in the PNG list of files that hasn’t already been done as a SVG.

Funny enough that is the exact same icon as the brush.paint_texture.fill.png file.

1 Like
9

For sure. Manually tracing them definitely gives the best result. I am just not very quick at it since I rarely use vector-editing software, and multiplying by the number that needs doing and I see all my summer’s spare time slipping away. LOL

2 Likes
10

And the source of that is perfect. Just three paths, minimum control points. Nicely done!

2 Likes
11

Thanks. Does this mean I get the job. haha.

A few things I’d like to check first tho.

  1. Does it actually work, within Blender, I assume so, but you never know.
  2. I have like 4 export options for SVG from Affinity, that one is using flatten. Is that ok?
  3. Production choice or standard, that is done with the stroke set to 0 and no colour. So the only colour is the fill that in turn defines the overall shape. I’m inclined to do it that way for all of them, unless I hit an icon where it clearly has a stroke and colour.
2 Likes
12

That is a good question. The renderer we are using in Blender is quite simple and basic. There are some SVG features that it doesn’t support, like text, filters, etc.

It is easy to test though, we use the same library for rendering SVG previews in the Blender File Browser. So just use Blender to browse to your folder in thumbnail view. If it looks okay there it will work fine.

13

Seems to look fine.

image
image878×685 43.9 KB

2 Likes
14

Which icons will you convert to SVG?

15

So far I’m largely starting from the top of the PNG files in alphabetical order list that aren’t already done and working my way down.

Guess you could start from the other end and work up.

16

image
image1756×906 191 KB

in this area?

17

yup. I’m working through all the brush ones first.

I’ll get to the first ‘ops’ ones at some point, since there’s a lot more of them, but that will be the armature and curve ones first.

3 Likes
18

brush.paint_texture.masklort

This is what potrace produces from the first monochromatic icon I found.

It’s ok conversion-wise I guess. Though if someone were to manually draw it again the circle might become an actual circle, which is theoretically prettier (and probably could be smaller as well, in svg code? ). Though in practice at the scale the icons are drawn you probably won’t see the difference.

19

if this is deemed ‘good enough’ I could do the rest of the monochromatic icons as well. If the foreground color isn’t black it need a bit of manual work to set the correct color in the svg, but it’s probably not hard.

For multicolor icons (even if it’s just a few colors) it gets a bit more complicated. The antialiasing in the png file makes it hard(ish) to decide what the main colors are.

20

Here’s my first try at the ops.transform.tosphere and I’d enjoy working on the other ops.transform ones, as well, if @Anthony_Gibbs hasn’t gotten to them, yet.

ops.transform.tosphere

1 Like