SVGワークフロー
5ステップでSVGファイルを確認・最適化・書き出しする
SVGを扱う作業には、生コードの確認・デザインツールの余分なデータ除去・ラスター形式への書き出し・プレビュー画像の準備・Web埋め込みなど、複数の異なるタスクがあります。このワークフローはそれらをすべて順番にカバーします。
01
SVGソースコードを確認する
SVGを変更する前に、その構造を理解する必要があります — どんな要素があるか、IDまたはクラスを使っているか、書き出しツールが追加したメタデータは何かを確認してください。
SVGコードビューアー
SVGを貼り付けるかアップロードして、ライブプレビューと並べて整形済みXMLソースを確認してください。
02
最適化してファイルサイズを削減する
IllustratorやFigmaから書き出したSVGには、ファイルサイズを2倍にしてしまう不要なメタデータ・エディターコメント・冗長な属性が含まれています。
SVG最適化
SVGをアップロードして不要なデータを自動削除し、フットプリントの小さいクリーンな最適化版を取得してください。
03
ラスター画像として書き出す
メールクライアント・一部のCMS・ソーシャルメディアプラットフォームはSVGを確実にレンダリングしないため、PNGやJPEGが必要な場面があります。
SVG→画像変換
最適化済みSVGを選択した解像度でPNGまたはJPEGに変換し、ラスター画像が必要な場面で使用してください。
04
プレゼンや資料用に仕上げる
白い背景にSVGを貼った普通のスクリーンショットは未完成に見えます。背景・余白・シャドウを追加することでプレゼン用のビジュアルが完成します。
スクリーンショット美化
書き出した画像をアップロードし、スタイルを適用した背景とフレームを追加して、完成版をダウンロードしてください。
05
インライン埋め込み用にBase64にエンコードする
SVGをCSSやHTMLにBase64データURIとして埋め込むことでHTTPリクエストが1回減り、パフォーマンスが重要な場面の小さなアイコンで有効です。
画像をBase64に
SVGまたは書き出したPNGをアップロードして、埋め込みに使えるBase64エンコード済みデータURI文字列を取得してください。
プロのヒント
- SVGソースを先に必ず確認してください — 最適化ツールは構造やアニメーションが特殊なSVGを壊す場合があります。
- SVGをPNGに変換する際は、高DPIスクリーンでも鮮明に表示されるよう2倍または3倍の解像度で書き出してください。
- Base64エンコードはファイルサイズを約33%増加させるため、HTTPリクエストの削減が効果的な小さなアイコンのみに使用してください。
よくある質問
壊れる場合があります。最適化後はコードビューアーで出力を確認し、アニメーション属性やJavaScriptフックが無事かどうかを必ず確認してください。
Web用には表示サイズの2倍（例：400pxのスロットに対して800px幅）が、Retinaスクリーンでも鮮明で過剰なファイルサイズにならないバランスです。
はい。書式は background-image: url("data:image/svg+xml;base64,...") です。画像をBase64ツールが完全なデータURI文字列を生成します。
フォントのレンダリングの違いや、Webフォントの未埋め込みが最も一般的な原因です。書き出す前にSVG内のフォントを埋め込むかアウトライン化して回避してください。