KOENJP

SVG最適化・CSS変換

SVG · OPTIMIZE · DATA URI

SVGからコメント・メタデータ・編集ソフトの不要なデータを削除し、数値を丸めて軽量化します。最適化したSVGはCSSの背景やマスク用のデータURIにも変換可能。ブラウザ内で処理します。

0 B
0 B
SAVED 0%

0 B → 0 B

SVGを入れると、何を削除したかを表示します。

プレビュー

元のSVGのプレビュー
元のSVG
最適化後のSVGのプレビュー
最適化後

CSSで使う

エンコード
CSSの実際の表示

0 B

        

      

    

    
SVGコードはアップロードされません。この端末のブラウザ内だけで処理します。

  









  

    

      HOW TO
      
使い方

      
    
      
  1. 「SVGファイルを開く」で読み込むか、元のSVG欄にコードを貼り付けます。
    2. 
      
  2. 削除する項目と、小数点以下の桁数を選びます。
    3. 
      
  3. 削減率とプレビューで、元のSVGと見た目が変わっていないか確認します。
    4. 
      
  4. 「コピー」や「.svgをダウンロード」で保存するか、「CSSで使う」で背景用・マスク用のCSSをコピーします。
    5. 
      

    

    

      PAIRS WELL WITH
      
あわせて使いたいツール

      
    

  

  
  

    FAQ
    
よくある質問

    
SVGコードはアップロードされますか？
いいえ。この端末のブラウザ内だけで処理し、どこにも送信しません。

    
最適化すると見た目が変わりませんか？
最適化後に256pxで描画して元のSVGと比較し、ピクセルの差を表示します。差が出る場合は小数点以下の桁数を増やすか、オプションを1つずつオフにしてください。

    
背景用とマスク用のCSSの違いは？
背景はSVGの色をそのまま表示します。マスクはSVGの形だけを使い、色はCSSの背景色で塗るため、ホバー時にアイコンの色を変えたいときに便利です。