【実務・中級編】PenpotのSVGエクスポートカスタマイズ：不要なメタデータを一掃しプロダクションコード直結の軽量SVGを出力する設定術 – UI/UX・デザインツール活用バイブル

Penpot SVG最適化の極意：ゴミメタデータを一掃し、プロダクション直結の軽量コードを手に入れる方法

こんにちは。テックリードとして日々フロントエンドのパフォーマンスチューニングとデザインシステムの保守に奔走している者だ。

デザインツールから吐き出されたSVGをそのままプロダクション環境にブチ込んだ結果、`sketch`や`adobe`といった不要なメタデータ、意味のないグループタグ（``）、謎のIDの羅列に絶望した経験はないだろうか？
特に、オープンソースの旗手として急速にシェアを広げているPenpotは、Web標準（SVG）をネイティブフォーマットとして採用しているため、デザインデータを極めてクリーンに保つことができる。しかし、何も考えずにエクスポートすれば、やはり「プロダクションコードには耐えない汚染されたSVG」ができあがる。

今回は、Penpotの特性を極限まで引き出し、デザインからコードへのトランスレーションを完全自動化するための「SVG最適化パイプライン構築術」を叩き込む。

—

1. デザインの源流を整える：Penpot側の構造化ルール

SVG最適化は、デザインエクスポートのボタンを押す前から始まっている。エンジニアとデザイナーが共通言語として持つべき「レイヤー命名規則」と「グループ構造」のルールを定義する。

レイヤー・フレームの命名規則（BEMライクなアプローチ）

Penpot上で生成されるSVGのIDやクラス名は、レイヤー名に直結する。適当に「Rectangle 1」などと名付けられた要素は、ビルド時にバグの温床になる。

コンポーネントのルート: `ComponentName` (例: `IconSearch`)
パス・シェイプ: `role-` または意味のある名前 (例: `path-background`, `icon-core`)
不要なラッパーの排除: 単一のパスを囲むだけの意味のないグループ（`Cmd+G`の乱用）は絶対に避ける。Penpot上でフラットな構造を意識すること。

—

2. 開発スピードを加速する：Penpotの隠れた神ショートカット

デザインデータ構造の整合性を保つため、モデリングスピードを極限まで高めるショートカットを使いこなせ。

`Ctrl + Enter` (Mac: `Cmd + Enter`): サブパス・ノード編集モードへの即座の移行

無駄なグループ階層を作らずにパスを結合・調整する際、マウス操作を排除して秒速で形状を整える。

`Ctrl + G` / `Ctrl + Shift + G`: グループ化と解除のトグル

構造の整理整頓において、DOMツリー（SVGの要素ツリー）をクリーンに保つための必須操作。

`Alt + Drag`: コンポーネントのインスタンス化とプロパティ継承

アイコンなどを複製する際、バラバラのオブジェクトとして扱わず、シンボル（Component）として管理を強制する。

—

3. ビルドパイプライン自動化：SVGOを用いたメタデータ一掃の極意

PenpotからエクスポートしたSVGに対し、手動でクレンジングするのはエンジニアの仕事ではない。CI/CDパイプライン、あるいはビルドプロセス（Vite / Webpack等）のフックで完全に自動化する。

ここで、プロダクション環境において「絶対正義」となる SVGOの設定ファイル（`svgo.config.js`） のベストプラクティスを公開する。Penpot特有の冗長な属性を根こそぎ削ぎ落とす。

実用設定ファイル：`svgo.config.js`

// チームの全プロジェクトで共有するSVGO最適化プロファイル
module.exports = {
multipass: true, // 収束するまで最適化パスを複数回繰り返す（極限まで削る）
plugins: [
{
name: ‘preset-default’,
params: {
overrides: {
// viewBoxはレスポンシブデザインの命なので絶対に消さない
removeViewBox: false,
// CSSでのcurrentColor制御を可能にするため、ハードコードされた色を削除
removeUnknownsAndDefaults: true,
},
},
},
‘removeDimensions’, // width/height属性を削除し、CSS (CSS Variables / Tailwind) でのサイズ制御を可能に
‘sortAttrs’, // 属性の順序をソートし、Gitの差分（Diff）を綺麗にする
{
name: ‘removeAttrs’,
params: {
// Penpotや他のツール特有の不要なメタデータ属性を一網打尽にする
attrs: ‘(data-name|data-node-id|sketch:.|adobe:.)’,
},
},
{
name: ‘addAttributesToSVGElement’,
params: {
// アイコンフォントやSVGスプライトの代替として、アクセシビリティを担保
attributes: [
{ focusable: ‘false’ },
{ ‘aria-hidden’: ‘true’ }
]
}
}
],
};

—

4. チーム開発を崩壊させない：設定共有化と自動化スクリプト

この最適化フローをチームメンバー全員に手動でやらせてはならない。「忘れる人間がいる」という前提でシステムを組むのがエンジニアリングだ。

package.jsonへの組み込み（SVGO CLIによる自動化）

プロジェクトのルートにSVGアセット置き場（`src/assets/svg/`）を用意し、ビルド前またはコミット前に自動最適化を走らせる。

{
“scripts”: {
“svg:optimize”: “svgo -f src/assets/svg -o src/components/icons”
},
“devDependencies”: {
“svgo”: “^3.2.0”
}
}

デザイナーがPenpotから最新のSVGをダウンロードし、専用ディレクトリに配置して `npm run svg:optimize` を叩くだけで、プロダクション直結の洗練されたReact/Vueコンポーネント（あるいはインラインSVGアセット）へと昇華される。

—

結び：デザインとコードの境界線を溶かす

Penpotが目指すオープンでモダンなデザインプロセスの本質は、「デザインデータがそのままコードの文脈と地続きであること」だ。

今回紹介した命名規則の徹底、SVGOによるメタデータの一掃、そしてビルドパイプラインの自動化を取り入れれば、「デザイナーが作ったデザインをエンジニアが手動でキレイにする」という不毛な時間は完全に消滅する。

ツールに振り回されるな。ツールをハックし、プロダクトのパフォーマンスと開発体験（DX）を最高到達点へと引き上げろ。