書き出すSVGを自動的に圧縮してくれるSVGO Compressorプラグイン - Sketch Plugin Advent Calendar 2016

Sketchプラグインを適当に選んで紹介していく、Sketch Plugin Advent Calendar 2016 13日目は、書き出すSVGを自動的に圧縮してくれる「SVGO Compressorプラグイン」です。

2016年は近年まれに見る「SVG元年」ではなかったかと個人的には思っていますが、そのSVGの書き出しに欠かせないプラグインです。

実はターミナルを使って余計な要素を書き出さないよう、ある程度の設定はできるのですが、このプラグインは圧縮エンジンにSVGOを使っているので、その比じゃないぐらい圧縮が可能です。

プラグインを使っていない時のコード

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="150px" height="150px" viewBox="0 0 150 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
    <title>svgo-test</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <rect id="path-1" x="0" y="0" width="150" height="150"></rect>
        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="150" height="150" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
    </defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g stroke-width="2" stroke="#979797" fill="#D8D8D8">
            <use mask="url(#mask-2)" xlink:href="#path-1"></use>
        </g>
    </g>
</svg>

プラグインを使っている時のコード

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <rect id="a" width="150" height="150"/>
    <mask id="b" width="150" height="150" x="0" y="0" fill="white">
      <use xlink:href="#a"/>
    </mask>
  </defs>
  <use fill="#D8D8D8" fill-rule="evenodd" stroke="#979797" stroke-width="2" mask="url(#b)" xlink:href="#a"/>
</svg>

使い方も簡単で、プラグインをインストールするだけ。右下のExport Objectボタンや「FileExport…」で書き出しをすれば自動的に圧縮してくれます(書き出しのアクションがトリガーになっているため、デスクトップへドラッグ&ドロップする場合などは対象外です)。

また、SVGOのオプションも使えるようになっており、プラグインメニューから「About SVGO Compressor」を選択し、表示されるウィンドウの[Edit SVGO Settings…]ボタンを押せば、設定のJSONファイルを編集することができます。

各種オプションについては、SVGOのGitHubに掲載されているのでそちらをご覧ください。


それでは、楽しいSketchライフを。

tags