5 ms·

Automating app assets with Inkscape

52 points by chris84948 9y ago

tfeldmann 9y ago
This is the reason there should be SVG support in every UI framework by now.
- stcredzero 9y ago
  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.
  - contingencies 9y ago
    there is no reason why a subsets of SVGs couldn't be stored as a bunch of triangles See https://github.com/fogleman/primitive https://github.com/fogleman/primitive for working SVG-as-triangles generation from bitmaps (or higher resolution/complexity SVG input).
Boothroid 9y ago
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..).
- bizzleDawg 9y ago
  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 https://github.com/basak/svg-mail-merge
- chris84948 9y ago
  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.
  - darklajid 9y ago
    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).
    - chris84948 9y ago
      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.
      - darklajid 9y ago
        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?
        chris84948 9y ago
        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.
epx 9y ago
I have been doing this for some time as well, my motivation was ignorance about Photoshop: https://epxx.co/logbook/entries/svg.html https://epxx.co/logbook/entries/svg.html
fenomas 9y ago
> 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.
- HelloNurse 9y ago
  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.
  - fenomas 9y ago
    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.
- Glyptodon 9y ago
  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.
- chris84948 9y ago
  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.
afro88 9y ago
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.

52 points by chris84948 9y ago

tfeldmann 9y ago

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

stcredzero 9y ago
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.
- contingencies 9y ago
  there is no reason why a subsets of SVGs couldn't be stored as a bunch of triangles See https://github.com/fogleman/primitive https://github.com/fogleman/primitive for working SVG-as-triangles generation from bitmaps (or higher resolution/complexity SVG input).

Boothroid 9y ago

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

bizzleDawg 9y ago
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 https://github.com/basak/svg-mail-merge
chris84948 9y ago
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.
- darklajid 9y ago
  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).
  - chris84948 9y ago
    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.
    - darklajid 9y ago
      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?
      - chris84948 9y ago
        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.

epx 9y ago

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

fenomas 9y ago

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

HelloNurse 9y ago
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.
- fenomas 9y ago
  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.
Glyptodon 9y ago
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.
chris84948 9y ago
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.

afro88 9y ago

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.