SVG ファイルを最適化する

f:id:scientre:20180830163816j:plain

Adobe IllustratorSVG ファイルを書き出すと、次のように作成アプリケーションやレイヤーに関する情報など、余計なデータが含まれている。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="60px" height="60px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve">
<g>
...

このような不要データを削除するツールとしておすすめなのが、その名も svgcleaner。同じようなツールである svgo や scour よりも SVG が壊れにくく、処理時間も短い。

Linux, macOS, Windows 用のバイナリが配布されており Releases からダウンロードできる。

ためしに手元の SVG ファイル 9 個を最適化したところ、28,306 バイトあったデータが 20,533 バイト(73%)になった。

Windows でドロップレットを作る

Windows 版のバイナリはインストーラになっているので、まずはインストールする。そして次の内容の CleanSVG.bat というファイルを作成して適当なディレクトリに置く。

@echo off

set executable=C:\Program Files (x86)\SVG Cleaner\svgcleaner-cli.exe
set outdir=cleanSVG

:start

set dir=%~d1%~p1%outdir%
if exist %dir% goto clean
mkdir %dir%

:clean

"%executable%" %1 "%dir%\%~n1%~x1"

shift
if NOT x%1==x goto start

アイコンを変えたい場合は .bat へのショートカットを作るとよい。

また、エクスプローラーで SVG を縮小表示したい場合は svg-explorer-extension を使用するとよい。