Nobuf

SVG エディタ＆オプティマイザ

ローカルのみ

SVGアセットをローカルで編集、検査、最適化、サニタイズ、バッチ処理、エクスポートします。

SVG742 B → 742 B
<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360">
  <!-- Nobuf SVG Studio sample -->
  <defs>
    <linearGradient id="paint" x1="0" x2="1">
      <stop stop-color="#10b981"/>
      <stop offset="1" stop-color="#0ea5e9"/>
    </linearGradient>
  </defs>
  <rect width="640" height="360" rx="48" fill="#f0fdf4"/>
  <circle cx="170" cy="180" r="92" fill="url(#paint)"/>
  <path d="M137 180l23 23 47-55" fill="none" stroke="#fff" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
  <text x="300" y="170" fill="#052e2b" font-family="system-ui" font-size="40" font-weight="700">Nobuf</text>
  <text x="300" y="215" fill="#115e59" font-family="system-ui" font-size="22">SVG Studio</text>
</svg>
一般的なアクティブ・コンテンツパターンは発見されていません。

SVGO はマークアップを最適化するものではなく、セキュリティ衛生剤です。Nobuf は表示されるプレビューを衛生化し、一般的なリスクを報告し、ソースを保存して目的地が要求するポリシーを実行できます。

使い方

  1. 01

    オープンまたはパスタ SVG

    1 SVG を最大 5 MB までアップロードし、その XML、サイズ、ビューボックス、および色を編集し、衛生されたライブプレビューを検証します。

  2. 02

    最適化・監査

    精度、マルチパス、IDクリーニングおよびサイズコントロールでSVGOを実行し、原料、gzip、要素、セキュリティメトリックを検討します。

  3. 03

    あなたのスタックのための輸出

    SVG または PNG をダウンロードし、データ URI をコピーし、React または Vue コードを作成するか、ZIP と sprite ファイルにバッチを最適化します。

よくある質問

SVGファイルがアップロードされていますか?

編集、SVGOの最適化、プレビューの衛生化、PNGのリダリング、バッチング、および輸出があなたのブラウザで実行されます。

最適化はSVGを安全にする?

ツールは、アクティブコンテンツパターンを報告し、自社のプレビューを衛生しますが、輸出されたソースは依然としてアプリの信頼ポリシーを必要とします。

なぜ、最適化された出力が異なるのか?

攻撃的な精度、IDクリーニング、CSS、フィルター、マスク、フォント、アニメーション、または外部の資産は、 rendering を変更することができます。

バッチモードはどうなるの?

それは50 SVG ファイルを最適化し、成功した出力を ZIP としてダウンロードし、それらを SVG シンボル スプリットに組み合わせることができます。

関連ツール

ほかの用途特化型ブラウザツールもお試しください。

すべてのツール

画像エディタ＆バッチオプティマイザ

画像・デザイン ローカルのみ

カラー＆アクセシビリティツールキット

画像・デザイン ローカルのみ

JavaScript & HTML プレイグラウンド

開発 ローカルのみ