Softonic

SVGを圧縮する

ステップ 1 / 2
次へ

Figma、Illustrator、SketchからエクスポートしたSVGには、本来必要な量の2〜5倍ものマークアップが含まれているのが普通です。エディタのネームスペース、コメント、空のグループ、冗長な変換、小数点以下6桁の座標などがその例です。このツールはSVGをSVGO相当の処理にかけ、レンダリング結果をピクセル単位で同一に保ちながら、こうした不要な要素を取り除きます。

SVGを圧縮する方法

  1. 1

    SVGを貼り付けまたはアップロードしてください

    未処理のXMLテキストまたは.svgファイルを受け入れます。

  2. 2

    最適化レベルを選択してください

    安全（コメントおよびエディタのメタデータを削除）、強力（グループを折りたたみ、座標を四捨五入、パスを結合）、またはカスタム。

  3. 3

    差異を確認する

    前後のバイト数を比較し、レンダリング結果をプレビューして視覚的に変更がないことを確認してください。

  4. 4

    コピーまたはダウンロード

    最適化されたSVGを直接コードに貼り付けるか、ファイルとして保存してください。

SVGを膨らませる要因

FigmaでエクスポートしたSVGファイルをテキストエディタで開くと、通常以下の内容が表示されます：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Generator: Figma ... -->
  <title>icon</title>
  <desc>Created with Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icon" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

ほぼすべての行は削除できます。レンダリング結果に必要なのはsvg、viewBox、pathだけです。

オプティマイザが削除する項目

削除される項目 安全な理由
XMLコメント レンダリングされることはない
エディタのネームスペース（sketch、figma） ブラウザでは使用されない
<title> / <desc>（任意） アクセシビリティ用のテキスト。意味がある場合は保持する
空の<g>グループ 視覚的な効果なし
デフォルトの属性値 ブラウザはいずれにせよデフォルト値を使用する
恒等変換 translate(0,0)は何もしない
座標の小数点以下の桁 小数点以下3桁あれば画面上では同一に見える
未使用のID 他の場所から参照されているIDのみ保持する

落とし穴

  • IDを削除しないでください。フィル、マスク、フィルターのurl(#...)やCSSから参照されているIDが対象です。アグレッシブモードではグラデーションが壊れることがあります。
  • viewBoxを残してください。これがないと、SVGはレスポンシブに拡大縮小されません。
  • <title>を残してください。アクセシビリティのために利用している場合です（スクリーンリーダーがこれを読み上げます）。
  • <use>インスタンスの展開は避けてください。オプティマイザがそれらをインライン化すると、元となる定義パターンが失われることがあります。

圧縮が実際にバイト数を節約できる場合

SVGはテキストなので、サーバー側のgzip圧縮だけでも冗長な部分の多くはすでに取り除かれます。非圧縮で4KBから1KBに減ったSVGでも、転送時には1.2KBから0.7KBにしか減らないこともあります。それでも価値はあり、ソースが小さくなることで読みやすさも増します。

よくある質問

セーフモードでは壊れません。アグレッシブモードでは、CSSやSMILアニメーションから参照されているIDを削除してしまうことがあります。SVGにアニメーションがある場合は、セーフモードを使うか、対象のIDを手動でホワイトリストに追加してください。

Figma/Illustratorのエクスポートファイルは通常、サイズが50～80％縮小されます。手書きのSVGファイルはもともとコンパクトであり、通常はわずか10～20％しかサイズが減少しません。

デフォルトでは「はい」です。<title>、<desc>およびaria-*の属性は保持されます。SVGが純粋に装飾的であり、周囲のHTMLがラベルを提供している場合は、これらの属性を削除することも可能です。

はい。xmlns属性は、SVGを直接HTMLに貼り付ける際に必須となるため保持されています。インラインSVGは小型アイコンの場合、通常最も迅速な表示方法です。

関連ツール

マテリアルデザイン カラーピッカー

Material Designのカラーパレットを閲覧できます。任意の色調（50からA700）を1タップでHEX、RGB、HSL形式でコピーできます。

罫線入り用紙ジェネレーター

印刷できる罫線入り用紙を無料で作成。カレッジ罫、広め罫、狭め罫を選び、行間をmmで設定し、用紙サイズとマージン線を決めて、印刷またはSVGでダウンロードできます。

方眼紙ジェネレーター

印刷できる方眼紙をオンラインで作成：方眼またはドット罫を選び、間隔をmmで設定し、A4かLetterと好きな線の色を指定して、印刷または鮮明なSVGでダウンロードできます。

画像アップスケーラー

AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。

旗作成ツール

6種類のレイアウト、色、文字、シンボルで、シンプルな3:2のカスタム旗をブラウザ内でデザインします。SVGまたはPNGをダウンロードするか、ブラウザの印刷ダイアログを開けます。

画像形式変換ツール

ブラウザ上で画像をJPG、PNG、WebP形式に変換。非可逆形式では画質を調整でき、PNGとWebPでは透過も保持されます。

このツールは他の言語でも利用できます