MacでSVGファイルを最適化・圧縮
Figma、Illustrator、InkscapeのSVGから編集ソフトの残骸を取り除き、座標を丸めます。見た目はそのままでファイルが小さくなります。
MacでSVG最適化
サンプルファイルを使ったアプリのスクリーンショット。
SVG最適化の使い方
- 1
SVGをドロップ
Figma、Illustrator、Inkscape、Sketchから書き出したSVGファイルを1つまたは複数追加します。
- 2
精度を選択
ほとんどのアイコンやイラストには、小数点以下2桁が適しています。
- 3
IDとタイトルを決める
未使用のIDを削除し、SVGをスクリーンリーダーで説明する必要がある場合はタイトルを残します。
- 4
「最適化」をクリック
コメント、メタデータ、編集ソフトの残骸が削除され、数値が丸められます。処理前後の合計サイズがアプリに表示されます。
- 5
比較する
「optimised」が名前に付いた最適化済みのコピーが、「ダウンロード › OneMacTools」内の日付付きフォルダに保存されます。プレビュー（目のアイコン）ボタンで、見た目が変わっていないか確認してください。
SVG最適化でできること
コメント、メタデータ、エディタ専用の要素や属性、空のグループ、未使用のID、不要な小数点以下の桁を削除し、図形には手を加えません。小数点以下の桁数（1、2、3）と、スクリーンリーダー用にタイトルを残すかどうかを選び、プレビューで比較できます。
こんなときに
- Webサイト公開前にアイコンを軽く
- 書き出したイラストを整理
- コード上でSVGを読みやすくする
オプションの説明
- 小数点以下の桁数
- 1、2、3から選べます（デフォルトは2）。図形、位置、サイズの数値をこの桁数で丸めます。小さなアートワークや細かいアートワークには3、大きくシンプルな図形には1を使います。
- 未使用のIDを削除
- デフォルトはオン。ファイル内のどこからも参照されていないid属性を削除します。CSSやJavaScriptがIDで要素を指定している場合はオフにしてください。
- タイトルを残す（スクリーンリーダー用）
- デフォルトはオン。スクリーンリーダーが画像の説明に使う<title>要素と<desc>要素を残します。純粋に装飾用のSVGではオフにしてください。
おすすめの使い方
- 小さなアイコンは小数点以下2桁か3桁で確認しましょう。1桁に丸めると、16 pxや24 pxのアイコンでは細部がずれることがあります。
- IDを使ってアニメーションやスタイルを設定しているSVGや、aria-labelledbyでタイトルを参照しているSVGでは、「未使用のIDを削除」をオフにしてください。
- グラフや図など意味のある画像では、アクセシビリティを保つためにタイトルを残してください。
- SVGをHTMLにインライン化したり、「画像をBase64に」で変換したりする前に最適化しましょう。削減した1バイトごとに、ページを読み込むたびの容量が減ります。
- 元の書き出しファイルは残しておきましょう。最適化したファイルは配布用で、デザインアプリで再び編集するためのものではありません。
対応形式
- 入力
- SVGファイル。
- 出力
- 名前に「optimised」を付けた最適化済みのSVG。
- コメント、メタデータ、エディタ専用の要素や属性（Inkscape、Sketch、Illustrator、Figmaなど）、空のグループ、XML宣言を削除します。
- 有効なSVGでないファイルは、変更されずに報告されます。
SVG最適化についての質問
SVGファイルのサイズを小さくするには？
「SVG最適化」にドロップし、「最適化」をクリックします。編集ソフトの残骸、コメント、メタデータが削除され、長い小数が丸められるので、見た目を変えずにファイルが小さくなります。
最適化するとSVGの見た目は変わりますか？
変わらないはずです。図形はそのまま残り、数値は選んだ小数点以下の桁数に丸められるだけです。「プレビュー」ボタンで比較し、とても小さく細かいアイコンには3桁を使ってください。
FigmaやIllustratorのSVGはなぜこんなに大きいのですか？
デザインアプリは、ブラウザに不要なメタデータ、編集ソフト固有の属性、桁数の多い数値を追加します。これらを取り除くと、目に見えて小さくなることがよくあります。
未使用のIDとは何ですか？
ファイル内のどこからも参照されていないid属性で、多くはレイヤー名の残りです。自分のCSSやJavaScriptで使っていなければ、削除しても問題ありません。
SVGのタイトルは残すべき？
はい。アイコンボタンや図など、画像に意味がある場合は、スクリーンリーダーが説明できるように付けましょう。純粋に装飾的な画像なら削除してもかまいません。
たくさんのSVGをまとめて最適化できますか？
はい。アイコンセット全体をドロップすれば、各ファイルがそれぞれ最適化されたコピーになります。
SVG最適化はファイルをアップロードしますか？
いいえ。SVG最適化はすべてMac上で動作するので、ファイルが外に出ることはなく、オフラインでも使えます。
SVG最適化は元のファイルを変更しますか？
いいえ。結果は「ダウンロード › OneMacTools」内の日付つきフォルダに新しいファイルとして保存され、元のファイルは、そうする旨のオプションをオンにしない限り、そのまま残ります。
SVG最適化に必要なものは？
macOS 26以降を搭載したMacだけ。ほかにインストールするものはありません。
次にすること
画像をBase64データURIに変換します。HTML、CSS、JSONにそのまま貼り付けられます。
スプライトシート作成複数のアイコンを1枚の画像にまとめ、それぞれを表示するCSSとHTMLプレビューを作成します。
