SVGクリーナーとは？
SVGクリーナーは、SVGファイルの先頭に付くXML宣言（<?xml version="1.0"?>）、DOCTYPE宣言、先頭のコメントのように、実際の図形には不要でも一部のアップロードシステムではエラーの原因になるコードを削除してくれる無料ツールです。Illustrator、Figma、svgrepo.com、Flaticonのようなプログラム・サイトから書き出されたSVGファイルは、こうしたメタデータを自動的に含んでいることが多く、Bloggerのようにこれらがあると画像のアップロード自体を拒否するプラットフォームもあります。このツールはその原因となるコードだけを正確に見分けて削除し、実際の図形データはそのまま保持します。
使い方
整理したいSVGファイルをドラッグ＆ドロップするか、ファイル選択ボタンで添付してください。複数枚を一度にアップロードできます。ファイルをアップロードすると自動で解析と整理が行われ、どの項目が削除されたか（XML宣言、DOCTYPE、先頭のコメント）とファイル容量の変化がすぐに表示されます。保存ボタンを押すと、整理されたSVGファイルが元のファイル名のままダウンロードされます。ファイルではなくコードの断片だけをお持ちの場合は、下の「コードを直接貼り付け」を開くとテキストでも整理できます。
こんなときに便利です
- svgrepo.comやFlaticonなどで入手したSVGアイコンがBloggerにアップロードできないとき
- イラストレーターやInkscapeから書き出したSVGが特定のCMSでプレビューできないとき
- SVGコードをウェブページにインラインで貼り付ける前に、不要なメタデータを整理したいとき
- 複数のSVGアイコンファイルを一度に整理する必要があるとき
そもそもなぜXML宣言やDOCTYPEが付いているのか？
SVGは実はXMLというより大きな標準規格の一種なので、Illustratorやアイコンサイトは規格を厳密に守ろうとして、ファイルの先頭に「この文書はXML 1.0バージョンです」という宣言と、古いブラウザとの互換性のためのDOCTYPE定義を自動的に付け加えます。ブラウザで<img>タグを使って表示したり、ファイルをそのまま開いたりする分には問題ありませんが、一部のCMS(Blogger等)はアップロードされたファイルをセキュリティチェックする際、こうしたプロローグコードを予期しない形式と判断し、アップロード自体を拒否することがあります。このツールは実際の図形データ(<svg>タグの中)にはまったく触れず、この問題を引き起こす先頭のメタデータだけを正確に見つけて削除します。
SVGファイルでよく問題が起きるケース
- Illustratorで「Web用に保存」ではなく通常保存でエクスポートすると、不要なメタデータがさらに多く付く傾向があります
- svgrepo.comやFlaticonなどのアイコンサイトから入手したファイルは、出典コメントがファイルの先頭に含まれていることが多いです
- 同じSVGなのに、ある場所(メール署名、Word文書)では正常に表示され、別の場所(特定のCMS)では表示されない場合、このプロローグコードが原因である可能性が高いです
- インラインSVG(HTMLコードに直接埋め込む)として使う予定なら、XML宣言があるとブラウザがレンダリング自体を拒否するため、埋め込み前に必ずこのツールで整理する習慣をつけると良いです
よくある質問
- なぜSVGファイルがBloggerや一部のCMSにアップロードできないのですか？
- 一部のプラットフォームは、SVGファイルの先頭に<?xml version="1.0"?>宣言や<!DOCTYPE svg ...>コード、コメントがあるとアップロードを拒否します。svgrepo.comやFlaticonなどのアイコンサイトやイラストレーターから書き出したSVGは、ほとんどの場合こうしたメタデータを自動的に含んでいるため、この問題がよく発生します。
- このツールはSVGの実際の図形（パス）も壊してしまいますか？
- いいえ。XML宣言、DOCTYPE、先頭のコメントのみを削除し、<svg>タグ内の実際の図形・パス・色のデータには一切手を加えません。
- 複数のファイルを一度に整理できますか？
- はい、複数のSVGファイルをまとめてアップロードすると、ファイルごとに個別に整理され、それぞれ別々に保存できます。
- アップロードしたSVGはサーバーに送信されますか？
- いいえ。すべての処理はブラウザ内でのみ行われ、ファイルがサーバーに送信・保存されることはありません。
- すでにきれいなSVGを入れるとどうなりますか？
- 削除する項目がないという案内が表示されるだけで、元の内容と同じものを保存することもできます。
- このツールで整理するとSVGファイルは軽くなりますか？
- はい、XML宣言・DOCTYPE・コメントは数バイトから多いもので数百バイトを占めており、これを削除するとその分ファイル容量が減ります。ただし、このツールの目的は容量最適化よりもアップロードエラーの解決にあります。
- 整理後もSVGを再度編集できますか？
- はい、XML宣言やDOCTYPEは編集プログラム(Illustrator、Inkscapeなど)がファイルを開くのに必要な情報ではないため、整理されたSVGも問題なく再度開いて編集できます。
- なぜSVGによってはこの問題がないのですか？
- Figmaのように、最初からXML宣言なしで純粋な<svg>タグのみをエクスポートするプログラムもあります。どのツールで作成したかによって、問題があるファイルとないファイルが分かれます。