SVG オプティマイザー、コンバーター、ジェネレーター

23 は 4 つのエリアにグループ化されています。最適化: オプティマイザー、ミニファイア、クリーナー、フォーマッタ、およびパス簡素化。変換: SVG から PNG/JPG/WebP、SVG から React、データ URI、ビューアーおよびバリデーター。編集: パス エディター、ViewBox & Crop、Color Replacer、Sprite Generator。生成: 波、ブロブ、パターン、メッシュ グラデーション、ノイズ、シェイプ デバイダー、ポリゴン、星、スパイラル、波線。

オプティマイザーを開き、SVG を貼り付けるか、1 つ以上の .svg ファイルをドロップし、プリセット (バランス、最大、またはクリーンのみ) を選択するか、21 の最適化のいずれかを切り替えます。このツールは、元の最適化された gzip 圧縮されたサイズに加えて、並べて視覚的にチェックすることもできます。次に、結果をコピーするか、ダウンロードするか、すべてのファイルを ZIP 形式でダウンロードします。

Wave または Blob ジェネレーターを使用して、スライダー (レイヤー、振幅、複雑さ、ランダムさ) と色を調整すると、ベクトルがライブで更新されます。 「ランダム」をクリックしてバリエーションを調べ、モーフィング効果のアニメーションをオンにして、SVG をコピーするかエクスポートします。

はい。すべての結果には、生の SVG、React、コンパクトな URL エンコードされたデータ URI、Base64、すぐに貼り付けられる CSS ルール、さらに .svg および PNG/JPG/WebP のダウンロード用のエクスポート タブがあります。データ URI ツールは CSS マスク スニペットも生成し、データ URI をデコードして SVG に戻すこともできます。

XML 宣言、DOCTYPE、コメント、<メタデータ>、Inkscape、Sodipodi、Illustrator、Sketch、Serif、Figma のエディターの名前空間と属性。マークアップがインデントされて読みやすい状態に保たれるため、ファイルを手動で編集したい場合には、これが正しい選択です。

いいえ。最適化、PNG レンダリング、ZIP 作成を含むすべてがブラウザー内でローカルに実行されます。ファイルがデバイスの外に流出することはないため、プライベートかつ即座に保存されます。

SVG を貼り付けるかアップロードすると、オプティマイザーがエディターのメタデータ、コメント、未使用の定義、冗長コードを削除し、数値を丸め、パス データ (SVGO と同様) を圧縮します。これにより、多くの場合、見た目を変えることなくファイルが 30 ～ 70% 縮小され、すべてブラウザで実行されます。

デザイン ツールを使用すると、ジェネレーター コメント、レイヤー ID、空のグループ、10 進数 6 桁などの肥大化が生じます。エクスポートをクリーナー (読み取り可能な状態に保つ) またはオプティマイザー (最小出力) に貼り付けて、軽量の Web 対応マークアップを取得します。

はい。結果に対してデータ URI ツールまたは [データ URI] タブを使用します。通常、Base64 よりも約 30% 小さい URL エンコーディングを使用し、Base64、CSS バックグラウンド ルール、および <img> タグも提供します。

SVG to PNG / JPG を開いてファイルを追加し、PNG とスケール (例: 4 倍) または正確な幅または高さを選択し、透明な背景をオンのままにします。多くの SVG を ZIP にバッチ変換したり、代わりに JPG または WebP を選択したり、アイコン セットを選択してファビコンやアプリ アイコン用の 16 ～ 512 ピクセルの PNG をエクスポートしたりできます。

SVG を SVG to React (JSX) に貼り付け、コンポーネントに名前を付けて、TypeScript または JavaScript、React または React Native を選択します。属性はキャメルケースに変換され、インライン スタイルはオブジェクトになり、{...props} がルートに展開されます。色を currentColor に切り替えて、アクセス可能なタイトル プロップを追加することもできます。

デフォルトのバランスプリセットでは異なります。その中のすべての最適化は、目に見えないデータを削除するか、値を同等に書き換えるだけです。非常に低い精度 (小数点以下 0 ～ 1) では、小さなアイコン上のポイントがわずかに移動する可能性があります。そのため、オプティマイザーはダウンロード前に元の結果と結果を並べて表示します。

ViewBox & Crop を開き、SVG を貼り付けて、[Crop to content] をクリックします。このツールは、描画の実際の境界を測定し、選択したパディングでタイトな viewBox を設定し、幅と高さの属性を更新または削除できます。

Color Replacer は、すべての塗りつぶし、ストローク、およびグラデーションの色 (hex、rgb()、hsl() および名前付きの色) を検出し、それぞれの出現頻度をリストします。それらを 1 つずつ再マップしたり、ファイル全体の色相、彩度、明度をシフトしたり、グレースケールに変換または反転したり、アイコンが CSS テキストの色に従うようにすべてを currentColor に置き換えたりすることができます。

スプライトは、<symbol> 要素として多くのアイコンを含む 1 つの SVG ファイルです。アイコンをスプライト ジェネレーターに追加し、<svg><use href="#icon-id"/></svg> で各アイコンを参照します。このツールは、内部 ID に接頭辞を付けてグラデーションの衝突を回避し、色を currentColor に変換することができ、使用法コードを生成します。

はい。プレビューは分離された <img> 内でレンダリングされ、スクリプトは実行できません。バリデーターは <script> タグ、イベント ハンドラー、外部リンクにフラグを立て、オプティマイザーはサイトにファイルを埋め込む前にデフォルトでスクリプトとハンドラーを削除します。

はい。 Wave ジェネレータと Blob ジェネレータには、自己完結型の SMIL モーフを追加する Animate トグルがあります。 <img> 内のブラウザー、CSS 背景、インライン SVG で再生され、JavaScript や CSS は必要ありません。