The Mijingo Blog

Latest news, updates, free tutorials, and more from Mijingo.

Automate SVG Export on OS X

by Ryan Irelan

In a recent tutorial on exporting SVG from the command line, we installed and used SVGExport.

What’s SVGExport?

A handy command line tool you can use to convert SVG files to PNG bitmap images is svgexport. It is available as a Node.js module and a command line utility.

With svgexport, we can easily pass in an SVG file–including any resizing options for the SVG viewport–and convert it to PNG, JPG, JPEG, or PDF of varying quality.

For this tutorial, I want to build a special folder on my computer Desktop that, when I drop an SVG file in, automatically converts the SVG to PNG. It will then move the original SVG file to a different directory and move the PNG to a different directory as a way to clean things up.

To accomplish this we are going to use Automator (Mac OS X only) and a shell script. If you’re not familiar with either, it’s not a problem. We’ll walk through both of them together.

Prerequisites

To move forward with this tutorial, please first install SVGExport via NPM.

If you’ve followed along on other courses I’ve done–like the one on JavaScript Task Runners–then installing a Node module via NPM should be old hat.

npm install svgexport -g

Also, you’ll need to be on Mac OS X so you have access to the built-in automation tool, Automator.

Setting up the Automator Folder Action

First, open Automator (available at /Applications/Automator) and create a new “Folder Action” project. There are a handful of different ways you can use Automator and a really nice option is to attach a script or series of actions to a folder.

We need to tell Automator to which folder to attach the actions. At the top, select the folder you want to use (or select “Choose…” to find any folder on your system).

I’m choosing a folder called svg2png that I created on my Desktop. The folder can be anywhere but I wanted it somewhere easily accessible.

While we’re in folder creation mode, let’s make two additional folders on our Desktop: one called source and one called processed. We’ll use these in the script to handle our input and output files.

Add Action

With the folder chosen, we now need to assign an action to it. Automator offers a generous buffet of actions to choose from–for system actions or app-specific actions–but we will keep it very simple and just use the “Run Shell Script” action.

Select the “Run Shell Script” action” from the left pane (available under Utilities) and drag it over to the right pane so it’s part of the Folder Action automation.

Make sure that /bin/bash is chosen as the option for “Shell” and “Pass Input” is set to “as arguments.” Now we’re ready to write the script!

Write the Shell Script

The shell script is fairly straight-forward but might be new to you, so I’ll explain it line-by-line. Here’s the whole script:


PATH=/usr/local/bin:/bin export PATH
for f in "$@"
do
  nf="${f%.svg}.png"
  svgexport "$f" "$nf" png 100% 0.5x
  mv "$f" ~/Desktop/source/
  mv "$nf" ~/Desktop/processed/
done

To make things run smoothly, we want to add our system path to the top of the shell script. This allows us to call commands without the full paths and makes Node happy (which is what was used to install svgexport).

At the top of the shell script (put this in the field in the “Run Shell Script” action), we’ll add our path line.

PATH=/usr/local/bin:/bin export PATH

Now we need to tell the script to process anything that gets dropped in the folder. We do that using a for loop and we loop over an arguments array ($@):

for f in "$@"

Next up is the meat and potatoes of our Folder Action: the part of the script that processes the files and runs them through SVGExport.


do
  nf="${f%.svg}.png"
  svgexport "$f" "$nf" png 100% 0.5x
  mv "$f" ~/Desktop/source/
  mv "$nf" ~/Desktop/processed/
done

Let’s unpack this to understand what’s going on.

nf="${f%.svg}.png"

First, I’m assigning the variable nf the original filename of the SVG we passed in but replacing the .svg extension with a .png extension.

svgexport "$f" "$nf" png 100% 0.5x

The next line runs the svgexport command (we don’t have to specify the full path to it because we included our system path at the top of the script). We’re using the $f variable whose value is the file of the current loop through the array as the source and the $nf variable we set earlier as the output file name. The rest of the line is standard svgexport.


mv "$f" ~/Desktop/source/
mv "$nf" ~/Desktop/processed/

Finally, we move the source file ($f) to the source folder on our Desktop and the move the processed PNG file ($nf) to the processed folder on our Desktop.

Add done at the end to close the loop and we’re done!

Automator window for exporting SVG as PNG

Saving and Testing

Save the Folder Action automation in Automator. Now it’s time to test it out. Find an SVG file and drag and drop it (or copy and paste it) into the svg2png folder. You should see a small, spinning gear appear in your menu bar. Once the automation is complete the gear will disappear.

We check our processed folder to see if the PNG file is there. Success!

This script could be enhanced and made better. For example, I’m doing any error checking here to accounting for missing files, duplicate files, etc.

Troubleshooting

If we run into problems, we can test the automation right inside of Automator by explicitly passing a file to the “Run Shell Script” action. We use the “Get Specified Finder Items” action (dragging it above the “Run Shell Script” action), choosing an SVG file to test with, and then running the automation manually.

Using Get Specified Finder Items in Automator to test

Some common problems we might see:

  • Path problems (script can’t find command) if the system path is missing from the top of the script
  • Missing directories that are called in the script (processed, source)
  • SVGExport isn’t installed
  • Not setting “Pass input” as “arguments” for the Shell Script action

For more information about how to get started with SVG, check out our comprehensive course Up and Running with SVG.

Filed Under: Free Tutorials, OS X, SVG