見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI

当ブログでも最近、SVGの素材を紹介することが多くなりました。そんなSVGファイルから不要なデータを取り除いて軽量化するアプリを紹介します。

↓は、今日紹介したアイコンのSVGを軽量化したものです。
ほとんどのファイルが50%以上軽量化されました。

SVGO GUI

SVGO GUIは、Node.jsベースのSVG軽量化ツール「SVGO」をGUIで操作できるようにしたもので、Windows用とMac用が揃っています。
使い方は非常に簡単で、Mac用で説明します。

ダウンロードしたSVGO GUIをダブルクリックして、起動します。

SVGO GUIの起動画面

あとは、このパネルにSVGファイルをドラッグするだけでOK！
※軽量化は元ファイルに上書きするため、元ファイルが必要な時はファイルをコピーしてから利用してください。

SVGファイルの軽量化、完了！

軽量化しても、グラフィックのクオリティはまったく変わりません。

SVG軽量化の工程は、無駄なデータを取り去ることにあります。例えば、上記のファイルを例にすると、元のSVGは下記のようになっています。

元のSVG

<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17" height="17" viewBox="0 0 17 17">
<g>
</g>
	<path d="M14 2v-2h-13v17h13v-2h2v-13h-2zM2 16v-15h2v15h-2zM13 16h-8v-15h8v15zM15 14h-1v-3h1v3zM15 10h-1v-3h1v3zM14 6v-3h1v3h-1zM6 4h5v1h-5v-1zM6 6h4v1h-4v-1z" fill="#000000" />
</svg>

で、軽量化すると、こんな感じに。

軽量化されたSVG

<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17"><path d="M14 2v-2h-13v17h13v-2h2v-13h-2zm-12 14v-15h2v15h-2zm11 0h-8v-15h8v15zm2-2h-1v-3h1v3zm0-4h-1v-3h1v3zm-1-4v-3h1v3h-1zm-8-2h5v1h-5v-1zm0 2h4v1h-4v-1z"/></svg>

SVGOではSVGの見た目には影響を与えないメタデータ、コメント、冗長なコード、不要なエレメントや値を取り除きます。
詳しくは下記ページをご覧ください。

• What it can do -SVGO