こんにちは！プロダクト開発の現場で、デザイナーとエンジニアの架け橋となるワークフローやデザインシステムに日々向き合っている先輩エンジニアです。
皆さんは、PenpotのようなモダンなオープンソースのデザインツールからSVGをエクスポートし、そのままプロダクション環境（Webサイトやアプリケーション）に放り込んでいませんか？
「デザイナーが作った美しいアイコンやイラストをそのままコードに落とし込める！」――確かにSVGは最高です。しかし、少し裏側のコードを覗いてみてください。そこには、デザインツール特有の「人間にとっては意味があるけれど、ブラウザにとってはゴミ同然の冗長なメタデータ」が大量に含まれていませんか？
今回は、オープンソース・プロトタイピングの旗手である「Penpot」から出力されるSVGを極限まで軽量化し、ビルドプロセスに完全自動で組み込むための「SVGメタデータ完全クレンジング・スクリプト活用術」を伝授します。
これをマスターすれば、毎日のアセット管理作業が劇的に楽になり、アプリケーションのパフォーマンスも見違えるほど向上しますよ。さあ、一緒にデザインとコードの境界線を美しく溶かしていきましょう！
—
なぜ、PenpotのSVGにはクレンジングが必要なのか？
Penpotは、ブラウザ上で動く最強のオープンソース・デザインツールです。Figmaに代わる選択肢として、オープンWeb標準（SVGをネイティブフォーマットとして採用）を貫くその姿勢は、私たちエンジニアにとって非常に心強いものです。
しかし、デザインツールは「誰が、どのレイヤー構造で描いたか」を保持するため、SVGのエクスポート時に以下のような余計な情報を付与します。
- `id=”rectangle-copy-2-fallback”` のような自動生成された冗長なID
- `class=”penpot-artboard”` のような不要なスタイリング属性
- 階層を保つためだけの意味のない `
` (グループ) タグ - エディタ依存のメタデータやコメント
これらが数個なら無視できますが、アイコンフォントの代替として数百個のSVGを扱うモダンなWebアプリでは、数メガバイトの無駄なペイロードを生む原因になります。これを手動で消すのはエンジニアの仕事ではありません。自動化しましょう。
—
基礎セットアップ：環境の準備とツールの選定
今回は、Node.jsのエコシステムを活用して、ビルドプロセス（ViteやWebpackなど）の直前にSVGを自動クレンジングするパイプラインを構築します。
使用するのは、SVG最適化のデファクトスタンダードである SVGO (SVG Optimizer) です。これにPenpot特有の構造に対応するカスタム設定を組み合わせます。
1. 必要なパッケージのインストール
プロジェクトのルートディレクトリで、以下のコマンドを実行してください。
SVGOをローカル開発環境にインストールします
npm install -D svgo
2. クレンジング設定ファイル（`svgo.config.js`）の作成
プロジェクトのルートに、SVGOの詳細な挙動を制御する設定ファイルを作成します。ここが今回のキモです。Penpotのエクスポート特性に合わせたルールを定義します。
// svgo.config.js
module.exports = {
// 処理の安全性を高めるため、マルチパス（最適化の反復処理）を有効化
multipass: true,
plugins: [
{
name: ‘preset-default’,
params: {
overrides: {
// viewBoxはレスポンシブデザインに必須なので絶対消さない
removeViewBox: false,
// Penpotが生成する不要なIDを徹底的に削除（CSSセレクタで衝突するのを防ぐ）
cleanupIds: {
minify: true,
remove: true,
},
},
},
},
// 自動生成されたコメントやエディタ固有のメタデータを削除
‘removeComments’,
‘removeMetadata’,
‘removeTitle’,
‘removeDesc’,
// ネストが深すぎる不要な
‘collapseGroups’,
// パスのデータ精度を落としすぎずに丸める（小数点以下2桁に制限して軽量化）
{
name: ‘convertPathData’,
params: {
floatPrecision: 2,
},
},
],
};
—
HelloWorld的な動作確認：手動クレンジングを体験する
まずは、スクリプトをビルドに組み込む前に、正しく動くかどうかの動作確認（HelloWorld）を行いましょう。
ステップ1: テスト用SVGの用意
Penpotから適当なアイコンをSVG形式でエクスポートし、プロジェクト内の `src/assets/icons/raw/` ディレクトリに配置します（ディレクトリがない場合は作成してください）。
ステップ2: クレンジングコマンドの実行
ターミナルから、以下のコマンドを直接叩いてみます。
npx svgo -f src/assets/icons/raw -o src/assets/icons/optimized –config ./svgo.config.js
結果はどうでしょうか？
`src/assets/icons/optimized/` を覗いてみてください。
冗長なIDが消え、意味のないグループタグが整理され、ファイルサイズが劇的に小さくなっているはずです。コードが洗練されていくこの瞬間、エンジニアとして最高にワクワクしませんか？
—
本番導入：ビルドプロセスへの完全自動組み込み
手動でコマンドを叩くのは、最初の実験だけで十分です。プロのエンジニアは、こうしたルーティンワークをすべてビルドパイプラインに隠蔽します。
`package.json` の `scripts` に、開発サーバー起動やビルド時に走る自動化タスクを追加しましょう。
{
“scripts”: {
“svg:clean”: “svgo -f src/assets/icons/raw -o src/assets/icons/optimized –config ./svgo.config.js”,
“prebuild”: “npm run svg:clean”,
“dev”: “npm run svg:clean && vite”,
“build”: “npm run svg:clean && vite build”
}
}
これで、デザイナーがPenpotから最新のSVGアセットを `raw/` フォルダにポンと上書き保存するだけで、`npm run dev` や `npm run build` を叩いた瞬間に、自動的に極限まで軽量化されたSVGがプロダクション用に生成される仕組みが完成しました。
—
先輩エンジニアからの実践アドバイス
このワークフローをチームに導入する際、いくつかの注意点があります。
1. カラーの継承（currentColor）について
アイコンとして使うSVGは、CSSから `color` プロパティで色を制御したいケースが多いです。SVGOのプラグインに `convertColors` を設定し、特定のfillカラーを `currentColor` に置換するルールを追加すると、デザインシステムとの統合がさらに加速します。
2. Gitの管理方針
`raw/`（オリジナルのSVG）と `optimized/`（軽量化済みのSVG）の両方をGitで管理するかどうかはチームのポリシーによりますが、基本的にはオリジナルのみをGit管理し、ビルド成果物は `.gitignore` に含めるのがクリーンです。
—
おわりに
今回は、PenpotのSVGメタデータを完全にクレンジングし、ビルドプロセスに組み込んでプロダクション環境を軽量化する手法を解説しました。
デザインツールが生み出すデータを「そのまま使う」のではなく、エンジニアリングの力で「最適化して昇華させる」。この一手間だけで、アプリケーションの品質はワンランク上の次元に到達します。
「毎日の作業が劇的に楽になった」「ビルドがスマートになった」と感じてもらえたら嬉しいです。
明日からの開発も、テクノロジーの力で心地よく進めていきましょう！質問やフィードバックがあれば、いつでも気軽に声をかけてくださいね。