> SVGを一括でPNGに変換する：6つの効率的な方法

アイコン用のSVGファイルがフォルダーにたくさんあり、すべてPNGにする必要がある — デザインシステムからエクスポートしたアイコンセット、ストックサイトからダウンロードした素材、旧プロジェクトから移行するリソースかもしれません。一つずつ手動で変換する？それでは時間がかかりすぎます。

本ガイドでは6つのバッチSVG→PNG変換方法を紹介します。インストール不要のオンラインツールから完全自動化のコマンドラインスクリプトまで、あらゆるスキルレベルに対応します。

> なぜ一括変換が必要なのか

バッチSVG→PNGのシナリオは想像以上に一般的です：

• アイコンセット管理：Figma/SketchからエクスポートしたアイコンはSVG形式だが、アプリやウェブサイトにはPNGが必要
• デザインシステム納品：デザイナーがSVGソースファイルを納品、開発者はマルチサイズPNGを必要とする
• 素材一括処理：Flaticon、IconFinderなどからダウンロードしたSVGを統一的にPNGに変換
• レガシーマイグレーション：SVGからビットマップが必要なプラットフォームへの移行（メールテンプレート、PPT、一部CMS）
• マルチ解像度出力：1つのSVGから@1x、@2x、@3xのPNGを生成

> 方法1：svg2img.cc（オンライン一括変換）

svg2img.ccは複数のSVGファイルを同時にドラッグ＆ドロップできます。すべての処理はブラウザ内でローカルに行われ、サーバーへのアップロードはありません。

手順

1. svg2img.cc バッチツール を開く (最大10ファイルまで同時処理可能)
2. 複数のSVGファイルを一度にページにドラッグ＆ドロップする（またはクリックしてファイルを選択する）
3. 出力形式（PNG）と寸法を設定
4. 一括変換をクリック
5. 個別または一括で結果をダウンロード

利点

• インストール不要：ブラウザを開くだけ
• プライバシー保護：ファイルがデバイスを離れることはありません
• 統一設定：一度設定すれば全ファイルに適用
• 非技術ユーザー向け：コマンドラインの知識不要

制限

• 数十〜数百ファイル規模に適している
• 1000+ファイルの処理にはコマンドライン方式を推奨

> 方法2：ImageMagick CLI（mogrifyバッチコマンド）

ImageMagickのmogrifyコマンドはバッチ画像処理専用に設計されています。

基本的一括変換

# 現在のディレクトリの全SVGをPNGに変換（透過背景を維持）
mogrify -background none -format png *.svg

パラメータ付き一括変換

# DPIと寸法を指定
mogrify -background none -density 300 -resize 512x512 -format png *.svg

# サブディレクトリを再帰的に処理
find . -name "*.svg" -exec mogrify -background none -format png {} \;

マルチサイズ一括出力

#!/bin/bash
# 各SVGから@1x、@2x、@3xを生成
for svg in *.svg; do
  name="${svg%.svg}"
  convert -background none -density 150 "$svg" "${name}@1x.png"
  convert -background none -density 300 "$svg" "${name}@2x.png"
  convert -background none -density 450 "$svg" "${name}@3x.png"
done

注意事項

• -background noneで透過背景を確保
• -densityが出力品質を制御（DPIが高いほど鮮明）
• mogrifyは同名の既存ファイルを上書きするので注意
• ImageMagickの複雑なSVG（フィルター、マスク）のレンダリングはブラウザほど正確ではない場合がある

> 方法3：Inkscape CLI（高品質一括エクスポート）

InkscapeのコマンドラインモードはImageMagickより正確なSVGレンダリングを提供します。

基本バッチスクリプト

#!/bin/bash
# SVG一括PNG変換
for f in *.svg; do
  inkscape "$f" --export-filename="${f%.svg}.png" --export-dpi=192
done

再帰的ディレクトリ処理

#!/bin/bash
# サブディレクトリ内の全SVGを処理
find ./assets -name "*.svg" | while read f; do
  dir=$(dirname "$f")
  name=$(basename "$f" .svg)
  inkscape "$f" --export-filename="$dir/${name}.png" --export-dpi=192
done

マルチサイズ一括出力

#!/bin/bash
# 各SVGから複数サイズを生成
sizes=(16 24 32 48 64 128 256 512)
for svg in icons/*.svg; do
  name=$(basename "$svg" .svg)
  for size in "${sizes[@]}"; do
    inkscape "$svg" \
      --export-filename="output/${name}-${size}.png" \
      --export-width="$size" \
      --export-height="$size"
  done
done

Inkscapeの利点

• SVG仕様準拠が最も完全：テキスト、グラデーション、フィルターが正確にレンダリング
• 高品質出力：アンチエイリアス処理が優秀
• クロスプラットフォーム：Windows、macOS、Linux

> 方法4：Node.jsスクリプト（Sharp）

フロントエンド開発者にとって、Node.js + Sharpが最も自然なバッチ変換ソリューションです。

依存関係のインストール

npm init -y
npm install sharp glob

基本バッチスクリプト

const sharp = require('sharp');
const glob = require('glob');
const path = require('path');

async function batchConvert(inputDir, outputDir, options = {}) {
  const {
    width = 512,
    height = 512,
    density = 300,
  } = options;

  const files = glob.sync(`${inputDir}/*.svg`);
  console.log(`Found ${files.length} SVG files`);

  for (const file of files) {
    const name = path.basename(file, '.svg');
    const outputPath = path.join(outputDir, `${name}.png`);

    try {
      await sharp(file, { density })
        .resize(width, height, { fit: 'contain', background: { r: 0, g: 0, b: 0, alpha: 0 } })
        .png()
        .toFile(outputPath);
      console.log(`✅ ${name}.png`);
    } catch (err) {
      console.error(`❌ ${name}: ${err.message}`);
    }
  }
}

// 使用例
batchConvert('./svg-input', './png-output', { width: 256, height: 256 });

マルチサイズ一括出力

async function multiSizeConvert(inputDir, outputDir) {
  const sizes = [16, 24, 32, 48, 64, 128, 256, 512];
  const files = glob.sync(`${inputDir}/*.svg`);

  for (const file of files) {
    const name = path.basename(file, '.svg');
    for (const size of sizes) {
      const outputPath = path.join(outputDir, `${name}-${size}x${size}.png`);
      await sharp(file, { density: 300 })
        .resize(size, size, { fit: 'contain', background: { r: 0, g: 0, b: 0, alpha: 0 } })
        .png()
        .toFile(outputPath);
    }
    console.log(`✅ ${name}: ${sizes.length} sizes`);
  }
}

Sharpの利点

• 高速：libvipsベースでImageMagickより4-5倍速い
• メモリ効率：ストリーム処理で大量ファイルに対応
• Node.jsエコシステム：Webpack、Vite、Gulpなどのビルドツールと統合可能

> 方法5：Pythonスクリプト（cairosvg）

Python開発者はcairosvgでバッチ変換が可能です。

依存関係のインストール

pip install cairosvg pillow

⚠️ cairosvgはCairoグラフィックスライブラリに依存します。macOSではbrew install cairo、Ubuntuではsudo apt install libcairo2-devでインストールしてください。

基本バッチスクリプト

import cairosvg
import os
from pathlib import Path

def batch_convert(input_dir, output_dir, width=512, height=512):
    """SVGをPNGに一括変換"""
    input_path = Path(input_dir)
    output_path = Path(output_dir)
    output_path.mkdir(parents=True, exist_ok=True)

    svg_files = list(input_path.glob('*.svg'))
    print(f'Found {len(svg_files)} SVG files')

    for svg_file in svg_files:
        output_file = output_path / f'{svg_file.stem}.png'
        try:
            cairosvg.svg2png(
                url=str(svg_file),
                write_to=str(output_file),
                output_width=width,
                output_height=height
            )
            print(f'✅ {svg_file.stem}.png')
        except Exception as e:
            print(f'❌ {svg_file.stem}: {e}')

# 使用例
batch_convert('./svg-input', './png-output', width=256, height=256)

プログレスバー付き一括変換

from tqdm import tqdm

def batch_convert_with_progress(input_dir, output_dir, sizes=[16, 32, 64, 128, 256]):
    input_path = Path(input_dir)
    output_path = Path(output_dir)
    output_path.mkdir(parents=True, exist_ok=True)

    svg_files = list(input_path.glob('*.svg'))

    for svg_file in tqdm(svg_files, desc='Converting'):
        for size in sizes:
            output_file = output_path / f'{svg_file.stem}-{size}x{size}.png'
            cairosvg.svg2png(
                url=str(svg_file),
                write_to=str(output_file),
                output_width=size,
                output_height=size
            )

batch_convert_with_progress('./icons', './output')

> 方法6：Adobe Illustratorバッチアクション

Adobe Illustratorのサブスクリプションをお持ちの場合、アクションパネルを使ってバッチ変換を自動化できます。

バッチアクションの設定

1. アクションを録画：

   • 「ウィンドウ」→「アクション」パネルを開く
   • 「新規アクションを作成」をクリック
   • 名前を「SVG to PNG」にする
   • SVGファイルを開く
   • 「ファイル」→「書き出し」→「書き出し形式…」を選択
   • PNG形式を選択、透過背景と解像度を設定
   • 保存後、ファイルを閉じる
   • 「録画停止」をクリック

2. バッチ実行：

   • 「ファイル」→「スクリプト」→「画像プロセッサー」を選択
   • またはアクションパネルメニューの「バッチ」を使用
   • ソースフォルダーと保存先フォルダーを選択
   • 録画したアクションを選択
   • 「OK」をクリックしてバッチ処理を開始

利点

• 最高レンダリング品質、複雑なSVG効果に最も対応
• アクションに追加ステップ（色調整、クロップなど）を組み込み可能

制限

• 有料サブスクリプションが必要
• 処理速度が比較的遅い（GUIベースの操作）
• アクションの手動録画が必要

> 方法比較

方法	速度	品質	セットアップ	バッチ上限	対象ユーザー
svg2img.cc	⭐⭐⭐	⭐⭐⭐⭐⭐	インストール不要	~100	非技術ユーザー
ImageMagick	⭐⭐⭐⭐	⭐⭐⭐⭐	簡単	無制限	インフラ/バックエンド
Inkscape CLI	⭐⭐⭐	⭐⭐⭐⭐⭐	簡単	無制限	デザイナー/インフラ
Node.js (Sharp)	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	中程度	無制限	フロントエンド開発者
Python (cairosvg)	⭐⭐⭐⭐	⭐⭐⭐⭐	中程度	無制限	Python開発者
Illustrator	⭐⭐	⭐⭐⭐⭐⭐	サブスクリプション	~500	プロデザイナー

> バッチ変換のベストプラクティス

1. 統一命名規則

icon-name-16x16.png
icon-name-32x32.png
icon-name-64x64.png
icon-name-128x128.png
icon-name-256x256.png
icon-name-512x512.png

2. 統一出力設定

バッチ変換時にすべての出力で同じ寸法とDPIを使用し、不整合を防止します。

3. ディレクトリ構造の維持

ソースファイルが複数ディレクトリにまたがる場合、出力でも同じ構造を維持：

find ./src -name "*.svg" | while read f; do
  relative="${f#./src/}"
  output="./dist/${relative%.svg}.png"
  mkdir -p "$(dirname "$output")"
  inkscape "$f" --export-filename="$output" --export-dpi=192
done

4. 出力の検証

バッチ変換完了後、出力ファイルの整合性と寸法を確認：

# 全PNGの寸法を確認
for f in output/*.png; do
  identify "$f" | awk '{print $1, $3}'
done

# 0バイトのファイルを確認
find output/ -name "*.png" -empty

5. エラー処理

エラーハンドリングとリトライロジックを追加し、全ファイルの変換を確実に：

#!/bin/bash
failed=()
for f in *.svg; do
  if ! inkscape "$f" --export-filename="${f%.svg}.png" --export-dpi=192 2>/dev/null; then
    failed+=("$f")
  fi
done

if [ ${#failed[@]} -gt 0 ]; then
  echo "Failed files:"
  printf '%s\n' "${failed[@]}"
fi

> まとめ

どの方法を選ぶかはニーズ次第です：

• 数十ファイルの素早い処理：svg2img.ccのドラッグ＆ドロップ
• 大規模自動化：ImageMagickまたはInkscape CLI
• ビルドパイプラインへの統合：Node.js（Sharp）またはPython（cairosvg）
• 最高レンダリング品質：Adobe IllustratorまたはInkscape

どの方法を選ぶにしても、出力設定（寸法、DPI、透過背景）を統一し、バッチ処理後にファイルの整合性を検証してください。

> よくある質問

Q: バッチ変換で一部のSVGが正しくレンダリングされない場合は？

A: レンダリングエンジンによってSVG仕様のサポート度が異なります。ImageMagickで問題がある場合、Inkscape CLIを試してください — SVGサポートが最も完全です。またはsvg2img.ccで個別ファイルをテストし、レンダリングエンジンの問題かSVGファイル自体の問題かを切り分けてください。

Q: SVGの元の寸法を維持したまま一括変換するには？

A: リサイズパラメータを指定しないでください。ImageMagickでは-resizeを省略、Inkscapeでは--export-area-drawingを使用、Sharpでは.resize()を呼び出さないことで対応できます。

Q: 10000+のSVGを最速で変換するには？

A: Node.js + Sharpが最速の選択肢です。並行処理（例：10ファイル同時処理）を追加するとさらに高速化できます。ただしメモリ使用量に注意 — OOMエラーを避けるため並行数を制御してください。

Q: CI/CDパイプラインでSVGバッチ変換を自動化するには？

A: ビルドステップに変換スクリプトを追加してください。Sharp（Node.js）またはcairosvg（Python）が推奨 — インストールが簡単でヘッドレス環境に適しています。CIイメージに必要なシステム依存関係（Cairoなど）が含まれていることを確認してください。

Q: 出力ファイルサイズが大きすぎる場合の最適化方法は？

A: pngquantまたはoptipngでPNGの後処理最適化を行ってください：

# ロスレス最適化
optipng -o5 output/*.png

# ロッシー最適化（60-80%削減）
pngquant --quality=65-80 --output output/ --force output/*.png