image

SVG 最適化 / Data URI 生成

SVG を最適化し、危険な markup を検出して、URL encoded または Base64 Data URI と CSS snippet をコピーできます。

SVG 入力

SVG テキストはブラウザー内でローカル処理され、DevCove サーバーへアップロードされません。

このツールはページ内で SVG を描画または実行しません。最適化出力を本番で使う前にリスク警告を確認してください。

最適化モード

可能な限り viewBox、title、desc、role、aria-* 属性を保持します。

SVG テキストを貼り付けるかアップロードして開始してください。

このツールについて

DevCove SVG Optimizer は、ソースファイルをアップロードせず SVG 素材を minify するフロントエンド開発者向けツールです。SVG テキストを貼り付けまたはアップロード、セキュリティ事前チェックを実行、Safe または Aggressive モードで最適化し、インラインアイコンと背景向け Data URI または CSS スニペットをコピー。SVG はページプレビューで実行されません。

使い方

より小さい SVG 素材とコピペ用 Data URI がローカルで必要なときに使います:

  1. SVG markup を貼り付けるか .svg ファイルをアップロードします。
  2. script、event 属性、外部参照についてセキュリティ事前チェックを確認します。
  3. 既定は Safe モード。より小さい出力には Aggressive を選びます。
  4. SVG を最適化をクリックし、前後のサイズを比較します。
  5. 最適化 SVG、URL エンコード Data URI、CSS background-image、Base64 Data URI をコピーします。

機能

フロントエンド SVG 素材ワークフロー向け:

  • script 要素除去付き Safe と Aggressive SVGO preset。
  • script、event handler、外部 URL のセキュリティ事前チェック。
  • 最適化 SVG と URL エンコード / Base64 Data URI 出力。
  • インラインアイコン背景向け CSS background-image スニペット。
  • 前後バイトサイズ比較。
  • SVG 実行なし 100% ブラウザーローカルテキスト処理。

よくある質問

SVG はアップロードされますか?

いいえ。SVG テキストはすべてブラウザー内で最適化されます。

SVG をプレビューしないのはなぜですか?

信頼できない markup の実行を避けるため、このツールは SVG をテキストのみとして扱い、ページ内では描画しません。

Safe と Aggressive の違いは?

Safe は viewBox、title、desc、一般的なアクセシビリティ属性を保持します。Aggressive はより積極的に minify し、それらを削除する場合があります。

どの Data URI を使うべきですか?

SVG テキストでは URL エンコード Data URI が通常より小さくなります。Base64 はツールチェーンが期待する場合のオプションです。

リスクのある SVG も最適化されますか?

はい。ただし事前チェックはソース入力からのリスク pattern を一覧表示します。本番で使う前に警告を確認してください。

Image Compressor との違いは?

Image Compressor はビットマップ形式を扱います。このツールは SVG markup を最適化し Data URI スニペットを生成します。