Splitting the icons SVG file

[Shrinks99]

@billrey

Yes, I agree. The whole concept of using a single sheet is always going to be messy. It is practical in some ways, but also kind of a pain to keep organized, and also annoying if we only intend to update certain icons.

On the Mac at least, the standard is that icons are always separate image or vector files, stored inside the app bundle - not one big icon sheet.

I hope I’m not doing anything too terrible here by reviving an old topic but I couldn’t agree more…

Which is why (with the help of a friend) I have split out all of these icons from the big SVG and put them all into their own files, each named with their corresponding icon name found in Blender’s icon viewer. Care was taken to make sure they all align to the grid, any Inkscape-specific data has also been stripped out, the resulting files should have better compatibility with Illustrator now. Note that this icon set only covers the 20×20px SVG icons, not the larger warning glyphs or the tool icons made in Blender.

EDIT: Just realized I’m a dummy and never really linked the actual repo link so here it is!

The following image is an example of some of the artifacts I ran across when saving the SVG sheet in Illustrator. Usually the file opens fine the first time, but saving the file causes Illustrator to shuffle some points around in strange ways. Removing this data and saving as standard SVGs seems to fix these issues… at least for me anyways.

This icon set should be up to date with all work on Blender’s icons available publicly, the spreadsheet editor icon is in there too! Should you want to switch your method of organization I would hope that you can benefit from the categorization work I’ve done here, note that I may add a few more icons to the set to make it more generally applicable although the only one I have added as of posting this is color_alpha.svg.

There are seven icon files that I couldn’t find anywhere in Blender’s icon viewer, any assistance that anyone here would be able to provide toward assigning the proper names to these would be much appreciated.

[brecht]

Moving to a new topic so this doesn’t get lost in the shuffle. It would be nice to solve this, and seems you have done much of the hard work for this.

[Draise]

Looks ideal. We started breaking up the blender icon set for the toolbar also, for custom pipeline sake. Generating these SVG’s to the DAT files to compile back into Blender is the next tricky thing. The scripts needs their custom environments to convert them, the toolbar icons we could only get going with Ubuntu, but not on Windows. The script to generates the individual dat icons also is a custom one we haven’t been able to reverse engineer yet. So additionally creating a system that generates the dat files from all individual or some individual or one individual SVG file in the method that Blender can use to compile into the software would be… great!

[julianeisel]

@Shrinks99 great to see this. I created a task on the development platform: T88467: Split Icon SVG File to be 1 Icon per File.

@Draise I don’t know what you need to reverse engineer, the scripts generating the .dat files are here https://developer.blender.org/diffusion/B/browse/master/release/datafiles/.
But indeed updating the scripts is the next step. That shouldn’t be hard and is .py only. If somebody with .py development knowledge could help out, that would be great.

[Draise]

Yeah, we have tried to make a script that will convert a single SVG to the DAT file, no success yet. We also tried reverse engineering the script that converts a single or all Blender toolbar icons to DAT file, that one was a bit harder to figure out, though we managed to make it work in Ubuntu, but not on Windows.

[Harleya]

I love this! Some general comments:

I’m not certain about the decision to remove all the Inkscape-specific features, like guides, grids, hidden layers, etc. The SVG format allows these in a way that should not interfere with other programs and uses. Ultimately they should be easily editable in Illustrator AND Inkscape - with Inkscape being very important because of it being open source. With these small icons especially, the sizes and alignment are quite important so it is nice to help enforce that with guides and grids, etc.

Do the tools you use allow you to change the document dimensions (and also scaling the image to fit)? These are 20x20 pixels and I would rather they be larger, for example 1000x1000. This way ALL the svg-based images (alerts, logo) could use a common grid and scale factor. This could mean that all of these could exist within a single font file, for example, which needs them all using same metrics and prefer coordinates to be integers.

[Shrinks99]

The original file had grids made of geometry that were aligned to the pixel grid, fortunately we’re not really losing anything there (as far as I can tell anyways…) but I agree that setting up guides to show the 3px of padding would probably be useful, at least for a template file. Alignment should be enforced by turning on the align to grid option in your vector editor of choice, the viewbox of the SVG handles that for us pretty nicely I think? This is a convenient segue to the next point!

These are 20x20 pixels and I would rather they be larger, for example 1000x1000.

As a designer I find it extremely helpful to have the icon size authored at its 1x resolution, this helps me optimize its rasterization for the scale it will be displayed at and by ensuring shapes are aligned to the pixel grid. Some programs like Affinity Designer and Illustrator have the nice ability to preview the rasterized output directly in the file, regrettably I don’t believe Inkscape has this feature but I could be wrong, I don’t use it much!

In this Figma screenshot we can see how the vector geometry for ‘visual_selection_selectable’ aligns to the pixel grid in the same way as Blender renders it on the right, how nice!

Font files are a fine way to author and store icons but if you’re going to do this I would advise you set up separate fonts with their own corresponding metrics for each set of icons present in Blender instead of trying to unify them all to one? This way each icon can be best designed for its use case & output size.

[Harleya]

@Shrinks99

…at least for a template file.

Yeah, I’m not tooo worried about the source files each containing grids, etc. I am more just worried about having to communicate the required restraints to potential icon creators/editors. But we could probably just do that with good instructions and templates.

@Shrinks99

As a designer I find it extremely helpful to have the icon size authored at its 1x resolution…

Makes sense. And we could probably just run a tool on them to resize them at some later time if we ever do want to put them in a font.

@Shrinks99

Font files are a fine way to author and store icons but if you’re going to do this I would advise you set up separate fonts with their own corresponding metrics for each set of icons present in Blender instead of trying to unify them all to one?

Probably not? If we did go down this route at some later time we’d probably just have all of our current icons as scalable resources in a unicode private use area. We can just group them in there by use. Otherwise we just have more font files in a fallback stack for no real reason. I am hoping for a stack of fonts so we can just deal with one at a time and can mix and match text and icons easily. With fonts it isn’t really an option to be on a 20x20 grid away, but again we can deal with that if (fingers crossed) that time comes.

[Simarilius]

@Shrinks99

I don’t believe Inkscape has this feature but I could be wrong, I don’t use it much!

It does, you go View>Icon Preview and it shows you it at a number of sizes.

[1D_Inc]

I see no huge problem here, Blender is not a FreeCAD with thousands of icons, where it was a real problem.

To solve it we wrote custom SVG icon slicer addon for blender to automate icons generation for freecad to manage generative style changes.

https://forum.freecadweb.org/viewtopic.php?t=34687#top

Single sheet is easier to observe, coordinates are nice to conversate during design process (we use it when we design addons)

[Shrinks99]

As a minor update to this topic, we’ve now created a website that lets you view and download all of Blender’s icons as SVGs, that’s now available here! It doesn’t really have any advantages compared to Blender’s built in icon viewer but we’ll probably add custom tags to improve the search experience a little bit at some point. Everything is of course licensed as CC BY-SA 4.0.

I’m not sure if this topic has made its way to @jendrzych yet but I would appreciate thoughts and potential insight into the aforementioned uncategorized icons?

If the decision is to stick with a single sheet then our little project will diverge and we’ll both go on our own happy ways, if you decide to adopt it everything should be as easy as hitting the download button… and setting up the build process & whatever is involved there. We also have a YAML file with names and tags and things now, names of files and things should still all be the same as in Blender.

I’ll also need a way of keeping everything in sync with new icons but that’s kind of my problem and not your problem

[jenkm]

I started working on it.

The first note is that icons inside Blender are 16x16px, with a margin of 5px on the sheet. I don’t know why they are sliced into 20px now, but I think 16px would be more correct, this is the standard size and it will be clearer for designers.

It can be changed quickly with viewBox="2 2 16 16", for example.

[jenkm]

Here are updated scripts if anyone is interested, with some additional options for developers, like building from png, it should be easier now.

https://developer.blender.org/D13068

[jenkm]

But unfortunately the icons provided are of poor quality and require rework. For example, they have lost semi-transparent areas, or for example these:

[Shrinks99]

Ugh, thank you for bringing this to my attention, will fix.

Upon closer inspection this appears to be related to an optimization script, will revert to prior pre-optimized files for now.

EDIT: unoptimize-icons branch now contains the originals which should be without issues. Please grab it from here! Changes will be pushed to the website soon, gotta make sure the YAML parser can handle these ones. Until then what you see on the website does not reflect the icons in the unoptimize-icons branch.

[Shrinks99]

As for the 20×20px sizing, I’m just copying the grid system from the original SVG file, here’s an example screenshot from that file in Illustrator with the pixel grid turned on.

When used in Blender on a 72ppi screen the size of the buttons appears to match this size of 20×20px? I figured this was the reasoning for the padding but anyone more familiar with the original sheet should weigh in here. While I haven’t looked at every icon closely they all appear to stay within the 3px padding so I don’t think switching them to 16×16px would pose any issues but personally I like having padding when designing icons.

[jenkm]

@Shrinks99 - I am trying to slice files so that the svg-code does not change so that the png exported from the Inkscape and then generated “dat” files do not change. It sounds like some kind of nonsense, but it would be better not to update all these “dat” files without real changes to them.

Even when you run the “blender_icons_update.py”, it writes 20 20 but actually 16x16 files are generated. Inside the “interface_icon.c” icons are also defined with a size of 16x16.

I like having padding when designing icons.

Well, usually you work the way you feel comfortable, and then just slice it as it should be.

[1D_Inc]

Splitting icons can create certain problems, for example, with keeping stylistic, at the moment the ability to use custom icons instead monochromatic will be presented (D5655 task)