macOSで librsvg を使って SVG から PNG へ変換する

大量にある SVGファイルを PNGファイルへ変換したい。

本記事では、rsvg-convert コマンドを使って、指定したディレクトリ内のSVGファイルをPNGファイルに変換する方法を以下に説明する。

rsvg-convert のインストール

まずは、rsvg-convertをインストールする。

macOSの場合は、Homebrewを使ってインストールするのが一番簡単だ。

brew install librsvg

SVGファイルをPNGに変換する

SVGファイルをPNGファイルへ変換するには以下のコマンドを利用する。-hと-wオプションを使用して、それぞれの出力画像の高さと幅を指定できる。

rsvg-convert -h 120 -w 120 svgfile.svg -o pngfile.png

指定したディレクトリ内のSVGファイルをPNGファイルへ変換する

SVGファイルが少ない場合は、前述のコマンドをひとつひとつ実行していけばよいが、国アイコンのように 200を超えるファイルの変換を手作業でするのは無理がある。指定したディレクトリ内のSVGファイルをPNGファイルに一気に変換するシェルスクリプトを作成する。

以下のスクリプトは、指定されたディレクトリからSVGファイルを検索して、それぞれをPNGに変換していく。画像のサイズは -w と -h オプションを使用して任意の値を設定している。画像サイズを変更する必要がなければ、オプションの指定は不要である。

このスクリプトを convert_svg_to_png.sh という名前で保存する。

#!/bin/bash

# 入力ディレクトリと出力ディレクトリを引数として受け取る
INPUT_DIR=$1
OUTPUT_DIR=$2

# 出力ディレクトリが存在しない場合、作成
if [ ! -d "$OUTPUT_DIR" ]; then
  mkdir -p "$OUTPUT_DIR"
fi

# 入力ディレクトリ内のSVGファイルを検索し、それぞれをPNGに変換
for svgfile in $INPUT_DIR/*.svg; do
  # ファイル名を取得（拡張子なし）
  filename=$(basename "$svgfile" .svg)
  
  # PNGファイル名を生成
  pngfile="$OUTPUT_DIR/$filename.png"
  
  # SVGをPNGに変換
  rsvg-convert -w 20 -h 20 "$svgfile" -o "$pngfile"
done

スクリプトを保存したあと、以下のコマンドを使用してスクリプトを実行できる。INPUT_DIRはSVGファイルが格納されているディレクトリであり、OUTPUT_DIRは変換されたPNGファイルを保存するディレクトリである。

convert_svg_to_png.sh INPUT_DIR OUTPUT_DIR

おまけ：SVG から PDF へ変換する

rsvg-convert を使って SVG から PDF へ変換することも可能だ。

rsvg-convert -f pdf svgfile.svg -o pngfile.png

トラブルシューティング

スクリプトの実行時に permission denied が発生した場合は以下のように対応する。

chmod +x convert_svg_to_png.sh

酢ろぐ！

カレーが嫌いなスマートフォンアプリプログラマのブログ。