Shell/ Bash Nested loop – Automator Folder Action - shell

Question

How can I automate the process of saving an SVG in multiple resolutions or file formats? Without the need to open any application such as Illustrator? Also how can I generate a retina ready fallback versions of that SVG?

Answer 1

Use the Node.js module svgexport (download) and Automator on Mac OS!
Installation
First install svg export globally using terminal (“npm” must be installed):
npm install svgexport -g
Automator
Create three folders e.g. on your desktop for convenient use: “convert”, “png”, “svg” (In this example we only generate pngs from the svg, but jpg, pdf or else work, too)
Open Automator & create a new folder action (CMD + N). Open & select the just created folder “convert”.
Add a “Shell-Script” action from the library
Set Shell to “/bin/bash” and “Pass Input” to “as arguments”.
The Script —
Now let’s add the code and afterwards save the Automator action.
PATH=/usr/local/bin:/bin export PATH
for i in "$#"; do
for size in 100 250 640 1024 1600 2000; do
o="${i%.svg}_$size.png"
o2x="${i%.svg}_$size#2x.png"
svgexport "$i" "$o" png 100% $size:
svgexport "$i" "$o2x" png 100% "$(($size*2))":
mv "$o" ~/Desktop/png/
mv "$o2x" ~/Desktop/png/
done
mv "$i" ~/Desktop/svg/
done
Test:
Now grab a svg, drop it in the convert folder and see the magic happen.
Explanation:
We have two for loops: The first running for each file added to the svg folder, the second creates two versions for each size as listed. One normal and one retina (#2x). We rename the files and add the size to each filename. Finally we move the generated images to png folder and the source svg to the svg folder.
Here is a great article that explains the above code in more detail