Figmaでアイコンやロゴを書き出したあと、WordPressのメディアライブラリに上げると「このファイル形式は許可されていません」と表示される——私も初めてSVGを納品に含めた案件で、同じ壁にぶつかりました。WordPress SVG アップロードは、デフォルトでは制限されていることが多く、書き出し設定だけ整えても公開まで届きません。
この記事では、Figma書き出し後〜WordPress反映前にやるべきサニタイズと軽量化を、フリーランスの制作フローに沿って書きます。PNGへの逃げ道だけではなく、SVGを活かす前提の確認順です。
この記事でわかること
- WordPressでSVGが弾かれる典型原因と、許可する前に確認するセキュリティ観点
- Figmaから書き出したSVGを軽くする具体的なチェック項目
- 実装・引き渡し時にクライアントへ渡すファイルセットの型
先に結論
- 向いている人: FigmaからWordPressまで一人で流れを持つWebディレクター・実装担当
- 向いていない人: SVGを使わず、写真とPNGだけで完結する小規模LPのみの案件
- 私のおすすめ: 書き出し直後にSVGを1回プレビューし、WordPress側はプラグイン方針を先に決めてからアップロードする
私はSVGを載せる案件では、本番アップの前日にステージングだけで必ず1回アップロードテストを入れています。
この記事には、Google AdSense による広告およびアフィリエイトリンクが含まれる場合があります。紹介経由で購入や申し込みがあると、私に紹介料が入ることがあります。
WordPressでSVGが止まる理由（仕組みの整理）
WordPress本体は、歴史的な理由からSVGをそのまま信頼しない設計が一般的です。SVGはXMLなので、悪意のあるスクリプトが混ざると、閲覧者のブラウザで問題が起きうるからです。だから「拡張子がsvgだからNG」というだけでなく、サイトの運用方針とセットで考える必要があります。
私が現場で見るパターンは次の3つです。
- アップロード自体が拒否される —
upload_mimesでSVGが許可されていない - アップロードは通るが、フロントでそのまま
<img>表示すると想定外の挙動 — 不要なメタデータや外部参照が残っている - 管理画面では見えるが、テーマ側でSVGをブロックしている — セキュリティプラグインやホスティングの制限
いずれも「FigmaのExportが間違っている」とは限りません。WordPress SVG アップロードの話は、デザインデータとサーバー設定の両方を見る問題です。ステージング環境は エックスサーバー など本番と同じPHP設定のサーバーで用意すると、本番前の差分に気づきやすいです。
Figma書き出し直後にやる軽量化チェック
Figma からSVGを書き出した直後が、手を入れる一番コスパのよいタイミングです。ブラウザに載せる前に、次を上から確認します。
1. 用途を決める（SVGにすべきか）
| 素材 | 向く形式 | 理由 |
|---|---|---|
| ロゴ・UIアイコン | SVG | 拡大しても劣化しにくい |
| 写真・複雑なイラスト | WebP/PNG | ファイルサイズと編集のしやすさ |
| 装飾のグラデーション背景 | CSSまたはPNG | SVGパスが肥大化しやすい |
Figma書き出しとWeb実装の手順でPNGとSVGの切り分けを決めている案件なら、そのルールに戻すだけで迷いが減ります。ここで「全部SVG」にすると、WordPress側の負担だけが増えます。
2. パスとレイヤーを整理する
書き出し前に、Figma側で次を確認します。
- Booleanでパスを統合できるアイコンは統合する — ノード数が減るとSVGの
<path>が減ります - 非表示レイヤーをExport対象から外す — 見えないパスがファイルに残りがちです
- 効果（ぼかし・ドロップシャドウ）をSVGに焼き込まない — 可能ならCSS側で再現する前提にし、Figmaには注釈を残す
私の体感では、アイコン1つあたり10KBを超え続けるときは、Figmaの構造を疑う段階です。公式の仕様というより、現場での目安です。
3. テキストとフォントの扱い
SVGにテキストをアウトライン化するか、<text> のまま残すかは案件で決めます。
- ロゴ文字 — アウトライン化してパス化（フォント依存を減らす）
- UIラベル — 実装ではHTMLテキストにすることが多く、SVGには含めない
Webフォントはライセンス上、SVG埋め込みだけでは足りないケースがあります。実装側で @font-face またはリンク読み込みに任せる方針を、Figma制作フローの入口に書いておくと後工程が楽です。
テキストをSVGに残したまま納品されると、私は実装でHTMLに差し替えることが多いです。デザインと実装の境界を先に決めておくと揉めません。
サニタイズの観点（中身を見る）
「軽量化」とセットで、中身が安全かをざっくり見ます。専用ツールがなくても、テキストエディタでSVGを開き、次の文字列がないか目視します。
<scriptやjavascript:— あればそのファイルはアップロード対象から外し、書き出し元を見直す- 外部URLへの
xlink:href— 不要なら削除 - 埋め込み
<iframe— 通常のアイコンSVGには不要
私は信頼できる制作メンバーからのSVGだけをWordPressに上げ、クライアント自身が編集するサイトではSVGアップロード権限を絞る運用を勧めています。一般論として、管理者以外にSVGアップロードを許可しない方が安全側です。
WordPress側の設定とプラグインの考え方
サーバーでSVGを許可する方法は、子テーマの functions.php でMIMEを追加する、専用プラグインを使うなど複数あります。どれを選んでも、次は外せません。
- ステージングで先に試す
- 本番と同じセキュリティプラグインを有効にした状態で試す
- アップロード後、実際の表示ページで
<img src="...svg">とインラインSVGの両方が必要か決める
インラインSVG（テーマに直接埋め込む）は、更新のしやすさとリスクのトレードオフがあります。更新頻度が低いロゴならメディアライブラリ管理、繰り返し使うUIアイコンならスプライトやSVGコンポーネント化——方針を引き渡しメモに1行書きます。
実装中のコード整理は VS Code や Cursor で行うことが多いですが、SVGファイルそのものの編集はFigmaまたはベクターツールに戻す方が、デザインとの差分が追いやすいです。
引き渡し用フォルダの型（再現性を上げる）
納品ZIPに次を入れると、クライアント・後任が困りにくいです。
/assets/svg/
icon-*.svg … UIアイコン（命名規則どおり）
logo-*.svg … ロゴ（カラー版・モノクロ版）
/assets/raster/
*.webp … 写真・複雑グラフィック
/README-svg.txt … インライン禁止・CSS再現の注記
READMEには「WordPress SVG アップロード前にステージングで確認」「管理者以外はSVG不可」など、運用ルールを日本語で3行足すだけで十分です。Web制作の納品前チェックリストの画像項目と突き合わせると漏れが減ります。
よくある質問
Q. SVGを許可するプラグインを入れれば安心ですか？
A. プラグインはアップロードの入口を広げる道具です。悪意のあるSVGを自動で無害化できるわけではないので、誰がアップロードできるかの権限設計とセットで考えてください。制作会社側だけが上げ、クライアントはメディアから選ぶだけ——という分け方もよくあります。
Q. Figmaから書き出したSVGが真っ白／真っ黒になるときは？
A. マスク、ブレンドモード、特殊効果が原因であることが多いです。Figma上でフラットなベクターに直してから再Exportします。それでもダメなら、その要素だけPNG2xで渡し、CSSでサイズ調整する逃げ道を取ります。デザインの見た目を優先する判断です。
Q. メディアライブラリではプレビューできるのに、フロントでサイズがおかしいです
A. テーマCSSの width/height、max-width: 100%、親要素のFlex/Gridの影響を疑います。SVG自体の viewBox が欠けているケースもあるので、書き出し設定でアートボードサイズと一致しているか確認します。Dev Modeで寸法を読む流れはFigma Dev Modeのワークフローを参照してください。
Q. 軽量化とサニタイズ、どちらを先にしますか？
A. Figma側の軽量化→中身の目視→WordPressへアップロードの順がおすすめです。WordPressに上げてから「重いから直す」より、上げる前に10KB前後まで整えた方が、バックアップとCDNの無駄が減ります。
まとめ
WordPress SVG アップロードは、FigmaのExport品質とサーバー側の許可設定の両方で決まります。私の現場では、書き出し直後のパス整理、テキストの扱い、中身の目視、ステージングでの1回テスト——この4点をセットにすると、公開日のトラブルがかなり減りました。
今日やることは次の3つだけで十分です。
- 手元のSVGを1つ開き、不要なグループと効果が残っていないか確認する
- ステージングWordPressにテストアップロードし、表示ページでサイズを確認する
- 引き渡しZIPにREADME-svg.txtを1枚足す
デザイン共有は Figma、本番・ステージングの環境は エックスサーバー で揃える案件が多いです。コード側のメモ整理に Cursor を使う場合も、SVGの正本はFigmaに残す運用を崩さない方が、後からの差し替えが楽です。
関連: Figma書き出しとWeb実装 / Web制作の納品前チェックリスト / Figma制作フローの入口
