Splitting the icons SVG file

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.

19 Likes

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.

5 Likes

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!

3 Likes

@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.

2 Likes

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.

1 Like

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.

2 Likes

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.

5 Likes

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.

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.

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.

2 Likes

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

1 Like

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)

2 Likes