Penpotから「プロダクション直結」のSVGを絞り出す——究極の最適化パイプライン構築術
デザイナーがPenpotで描いた「綺麗なアートボード」を、そのままフロントエンドの `public/assets` に放り込んでいないだろうか？
もしそうなら、君のプロダクション環境には、ブラウザが解釈を拒否する膨大なゴミ——`inkscape:label`、`sodipodi:docname`、Penpot内部専用のグループID、不必要な `defs`、そしてレンダリングを阻害する非標準の属性が蓄積されているはずだ。
本稿では、Penpotを単なるデザインツールではなく「SVG生成エンジン」として再定義し、DevOpsパイプラインに完全に組み込むための「極限の最適化戦略」を授ける。
—
1. 汚染源を断つ：Penpot上のレイヤー構造設計
エクスポート後のクリーンアップを楽にする最大の秘訣は、Penpot上での「論理的な構造化」にある。
- グループは「CSSクラス」と見なせ:
エクスポート時に `Group` として括られた階層は、SVG内では `
- 「隠しレイヤー」の制約:
非表示レイヤーもエクスポート対象に含まれる場合がある。運用ルールとして「エクスポート用フレーム」と「作業用フレーム」を明確に分け、API経由での抽出時にフィルターをかけられるようにせよ。
—
2. SVGOを「ビルドパイプラインの心臓」にする
エクスポートしたSVGを手動で最適化する時間は、エンジニアにとって最も無駄なコストだ。`svgo.config.js` を駆使し、フロントエンドのビルドプロセス（Vite/Webpack）に統合する。
以下の設定は、Penpot特有の冗長なメタデータを全滅させるための「攻撃的設定」だ。
// svgo.config.js
module.exports = {
plugins: [
{
name: ‘preset-default’,
params: {
overrides: {
removeViewBox: false, // viewBoxはレスポンシブの命
convertPathData: { floatPrecision: 2 }, // 精度を削りファイルサイズを極小化
},
},
},
‘removeDimensions’, // width/heightを消しCSS制御に委ねる
{
name: ‘removeAttrs’,
params: {
attrs: ‘(stroke|fill|id|class|data-name|inkscape:.|sodipodi:.)’, // Penpot固有のゴミを一掃
},
},
‘removeXMLNS’, // インラインSVG化するなら不要
],
};
—
3. Penpot APIによる「完全自動化」の裏技
GUIからエクスポートボタンを押す時代は終わった。Penpotの [API](https://help.penpot.app/api/) を活用し、特定のブランチから最新のコンポーネントをCLI経由で引き抜くパイプラインを構築する。
自動化スクリプトの設計指針 (Node.js)
/
- Penpot APIからSVGを一括取得し、最適化をかける自動化スクリプトの断片
/
const axios = require(‘axios’);
const { optimize } = require(‘svgo’);
const fs = require(‘fs’);
async function fetchAndOptimize(componentId) {
// 1. Penpot APIからSVGバイナリを取得
const { data: rawSvg } = await axios.get(`${PENPOT_API_URL}/components/${componentId}/export`, {
headers: { ‘Authorization’: `Bearer ${TOKEN}` }
});
// 2. SVGOでプロダクション向けにパージ
const result = optimize(rawSvg, { path: ‘optimized.svg’, …svgoConfig });
// 3. コンポーネントライブラリへ書き出し
fs.writeFileSync(`./src/assets/icons/${componentId}.svg`, result.data);
}
このスクリプトを `husky` や `GitHub Actions` に組み込むことで、デザイン修正がPenpotに反映された瞬間、フロントエンドのSVG資産が自動的に更新される「真のCI/CD」が完成する。
—
4. アーキテクチャ視点：なぜこの最適化が必要か
ブラウザのレンダリングエンジンにとって、SVGはDOMの一部だ。
- メモリ消費: 複雑なパスデータ（小数点が多すぎる座標値）は、パース時にメモリを圧迫し、LCP（Largest Contentful Paint）を遅延させる。
- DOMの肥大化: 不要な `id` や `defs` は、ReactやVueの仮想DOMツリーを無駄に大きくし、再レンダリングのオーバーヘッドを増大させる。
我々エンジニアが成すべきは、「デザイナーの表現力」を「実行可能な最小限の計算資源」にトランスパイルすることだ。
—
結論：デザイナーとの境界線を溶かせ
Penpotは単なるドローイングツールではない。適切に設計された命名規則と、SVGOによる自動化パイプライン、そしてAPIによる連携を組み合わせれば、デザインシステムとプロダクションコードは「一つの真実（Single Source of Truth）」を共有できる。
次は、SVGをさらに進めて `path` データを `CSS variables` で動的に色替え可能な設計にするか、あるいは `Symbol` 要素を用いてスプライト化し、リクエスト数を減らすか。
この領域を突き詰めれば、UIはより速く、より洗練され、そして何より——「エンジニアリングとして美しい」ものになる。健闘を祈る。