SVG クリーンアップ

SVG クリーンアップでは、レンダリングに影響を与えないメタデータ ブロック、コメント、ジェネレーター タグ、および未使用の属性が削除されます。パスやシェイプは削除されません。 SVG にタイトルやアリアなどのアクセシビリティ ラベルが含まれている場合、空または重複していない限り、SVG クリーンアップによってそれらのラベルが保持されます。チーム ワークフローの場合は、レビュー中に差分を比較し、変更内容を追跡し、必要に応じてすぐにロールバックできるように、変更されていないオリジナルを保持します。メタデータを削除すると、公開資産内の作成者名やツールのバージョンが誤って公開されることも減ります。

SVG クリーンアップは非視覚的なマークアップに重点を置いているため、レンダリングされた出力は同じように見えるはずです。それでも、ファイルがエディターのみの属性または異常なメタデータに依存している場合は、出荷前に SVG クリーンアップとプレビューを実行してください。簡単に比較すると、特殊なケースを把握するのに役立ちます。 SVG がフィルター、マスク、または埋め込みフォントを使用している場合は、リリース前にターゲット ブラウザでプレビューし、レンダリングされた出力が変更されていないことを確認してください。

はい。 SVG クリーンアップは最初のパスです。最適化と縮小によりサイズをさらに削減できます。最初に SVG クリーンアップを実行すると、より単純なファイルが SVGO に提供され、より良い結果が得られ、警告も少なくなります。後で手動で編集を行った場合、2 回目の SVG クリーンアップ パスにより、編集者によって導入された新しいコメントやメタデータが削除される可能性があります。

SVG クリーンアップでは、CSS やスクリプトで使用する viewBox、幅、高さ、ID などの重要な属性が保持されます。 ID が空であるか重複している場合、競合を避けるために SVG クリーンアップによって ID が削除される場合があります。カスタム ID に依存している場合は、出力を確認してください。 SVG クリーンアップによってまだ必要な ID が削除された場合は、それを再度追加してツールを再実行し、チームに必要な ID を文書化します。

いいえ。SVG クリーンアップは完全にブラウザ内で実行され、ファイルはアップロードされません。このローカル SVG クリーンアップ ワークフローは、機密性の高いロゴ、未リリースのアイコン、またはクライアントの作業に対して安全です。ページが読み込まれるとネットワーク呼び出しが必要ないため、オフラインまたはファイアウォールの内側で使用することもできます。

ラベルが意味のあるものであれば、そのまま残ります。空のラベルまたは重複したラベルは、ノイズを減らすために削除される場合があります。チームが特定の形式を必要とする場合は、クリーンアップ後にタイトルまたは aria-label を追加できます。アクセシビリティ ルールをより厳格にするには、クリーンアップ後に簡潔なタイトルと aria-label を追加し、ターゲット ブラウザのスクリーン リーダーで確認してください。組織が WCAG に従っている場合は、role と aria-labelledby を含めて、アクセシビリティ監査ツールで検証します。

はい。書式を設定すると、クリーンアップされたマークアップが読みやすくなります。クリーンアップ パスの後にフォーマッタを実行して、インデントと属性の順序を標準化します。チームは、リポジトリ全体でスタイルの一貫性を保ち、プル リクエストでのノイズの多い差分を回避するために、CI でフォーマットを実行することがよくあります。 SVG をコンポーネント リポジトリに保存すると、一貫した形式によりレビューが高速化され、マージ競合が軽減されます。

はい。 SVG クリーンアップはブラウザで無料で使用できます。ダウンロードやインストールは必要ありません。

いいえ、SVG クリーンアップはサインアップせずにブラウザで即座に動作し、ファイルはローカルに残ります。