Automating app assets with Inkscape | Hacker News Reader

Automating app assets with Inkscape

insertbreakpoint.wordpress.com

52 pointschris8494820 comments

This is the reason there should be SVG support in every UI framework by now.

If the UIs are moving to (or already at) the point where the GPU is doing the work, there is no reason why a subsets of SVGs couldn't be stored as a bunch of triangles. This would impose a practical scaling limit, but it should cover the use cases of logos and icons.

there is no reason why a subsets of SVGs couldn't be stored as a bunch of triangles

See https://github.com/fogleman/primitive for working SVG-as-triangles generation from bitmaps (or higher resolution/complexity SVG input).

> It takes about 30 second to build all those PNGs

Wow! I run a similar automated set up (for a game), with the flow being: Photoshop layer gets edited -> PNG gets exported -> PNG gets post-processed in Node -> all PNGs get stitched into a texture map, and even with ~100 images it runs in a few hundred milliseconds.

Unless InkScape does special SVG stuff I don't know about, I suspect that using something like ImageMagick, or even some random svg2png.js/py script, would make this instant - and thus something you can just add to your build process, rather than worrying about triggering it only when the source files have changed.

Wouldn't be surprised if a lot of the time is spent loading and unloading Inkscape.

That said, I can't imagine even a moderate batch conversion/export job only taking a few hundred milliseconds unless it's somehow barely doing any work, or the total file size of all exports/renders is pretty small.

The script in the article creates an Inkscape process for each exported file, I'm surprised it's so fast. I'd look into Python scripting to do the export from a running instance of Inkscape at the press of a button.

That's one approach, but for something that amounts to a build step the ideal case is not to have to press a button. For one thing, in a case like this the source images are probably in a repository and the converted images aren't, so you can wind up needing to open Inkscape and run the script to keep them in sync.

IME when it comes to converting SVGs your only quality options tend to be Batik or Inkscape. Neither is particularly lightweight, but so is SVG. Sure, trivial shapes and paint servers should work with pretty much anything, but things tend to not stay that trivial.

Yeah, speed wasn't really an issue for my build. I'm just running it occasionally. This was basically a step better than manually exporting.

Sure - but the main thing isn't the time taken, it's having one-step builds. Things that only need to be done occasionally are the easiest things to forget!

Nice, I like automation and Inkscape. Always nice to see free software solutions.

Suggestions - perhaps you could script with another language rather than using a .bat? For example you could use Python to create the commands. With that you might also be able some simple looping instead of successive commands, which would make future changes easier (not that you can't do this with a batch file also, but personally every time I've tried to do anything similar with batch files I've ended up losing the will to live..).

Yeah, I'll admit that batch files aren't exactly ideal. As a c# developer though, I don't ever use Python, so that doesn't come over as easier for me. I think I moved all the important parts into VARs, so you shouldn't have to change too much in the script.

If there was an easy cross-platform scripting language that was installed by default, now we'd be talking.

Have you tried/considered an asset generator plugin?

https://marketplace.visualstudio.com/items?itemName=PeterR.U... https://github.com/shenchauhan/UWPTileGenerator

If you're a C# guy: There's the csharp interpreter (run .cs files) or, potentially even better, there're F# scripts.

Or, you know, write Powershell (depending on what platforms you need to support ofc).

Sure, but what exactly do they get me that a batch script doesn't? Not trying to be difficult, but if the batch script can do it, why would I wade into Powershell? I definitely think Powershell has it's place, but in this case, I don't see it.

I definitely don't see using cs files or f# scripts as an easier way of doing this.

Honestly? If you're good with the current approach, why change it.

That said, there's a LOT of repetition in there and while you probably _can_ improve that in this solution, a 'proper' language might be more readable. Again, if you're a C# developer, C#/F# (or even Powershell) scripts are probably ~closer to home~.

That whole script is basically - if I understand it correctly - two unrolled loops. Instead of two loops (logo dimensions, scale) you're duplicating a loooot of lines.

If this is no problem: Cool. Then again, maybe you want to improve this approach in the future?

Maybe { crosses fingers tight } Microsoft could package all this up and do it for me. I'd love to just supply an SVG file. Although, since I spend time at work dealing with DXF files supplied by customers, I understand the problem.

I've made use of this [1] python script before for running some mail-merging type tasks with inkscape, so that could be a good starting point for anyone looking to do some fancy inkscape automation.

Personally I used it to combine generating mail merged print and laser cut patterns for the place cards. So you get a pdf to print out and a laser cutting SVG which can be 'lasered on' after the printing.

[1] https://github.com/basak/svg-mail-merge

We do this kinda thing with Sketch and iOS for all assets (including app icons). We also do font styling, colors, gradients etc from Sketch to a styling plist. Kinda annoying to set up, but it's a godsend for styling updates and whitelabeling.

I have been doing this for some time as well, my motivation was ignorance about Photoshop: https://epxx.co/logbook/entries/svg.html

Reply on news.ycombinator.com