# SVGサニタイザー：FigmaとIllustratorのコードをクリーンアップ
FigmaやAdobe Illustrator、ブラウザのインスペクターからエクスポートしたSVGを貼り付けるだけで、クリーンで最適化された、本番環境にそのまま使えるベクターファイルが得られます。# エクスポートしたSVGはなぜ汚いのか？
FigmaからSVGをエクスポートすると、アプリ内でのみ意味を持つ属性が大量に含まれたファイルが生成されます。data-name、xml:space、内部レイヤーへの参照、デザインメタデータなどがその例です。結果として、本来必要なサイズより40〜70%も大きなSVGになることがあります。# サニタイザーが削除するもの
- エディタのメタデータ：FigmaやIllustratorが自動的に追加する
metadata、title、descタグ。 - Inkscapeのnamespace：
inkscape:やsodipodi:プレフィックスを持つすべての要素。 - 不要な属性：
xml:space、version、余分なxmlns:*、Figmaのdata-*属性。 - 空のグループ：削除されたレイヤーの残骸として残る、コンテンツのない
<g>要素。 - XML宣言：HTMLにSVGを埋め込む際には不要な
<?xml version="1.0"?>宣言とDOCTYPE。