Sketchで簡単SVG書き出し コントロールしやすいデータ運用方法

ロゴやアイコンをSVGで作成しているサイトが増えていますね。
ベクターデータなので、サイズ変更や高解像度表示に強く、データも軽量。また、CSSやJSでコントロールが可能など、多くのメリットがあります。

今日は、それらSVGのデータ制作から運用について紹介します。

Sketchでデータを作成する

プラグイン「SVGO Compressor」をインストール

Sketchから書き出した生のSVGはデータ量が多かったり、余分なコードもあるため、プラグインを通して使いやすいコードに整形(圧縮)します。

使用するのは、Sketchプラグイン「SVGO Compressor」。

「SVGO Compressor」はSVG書き出し時に生成されるコードから不要な部分を取り除いてくれるプラグインです。
書き出し時の詳細設定は「Plugins → SVGO Compressor → About SVGO Compressor」から行います。

次に、生成されたsvgo.json内のjsonデータを書き換えてルールを設定します(といってもfalseかtrueくらい)

今回のSVG使用目的は、ダークモード時にロゴカラーの色を変えたいというものなので、下記ポイントを変更しました。

svgo.json

{
// 3行目 pretty(整形)を無効に
"pretty": false,

// 48行目 idはcss操作で使用するので削除しない
{
  "name": "cleanupIDs",
  "enabled": false
},

// 104行目 余分なパスを整理する
{
  "name": "convertShapeToPath",
  "enabled": true
},

// 159行目 width,height削除
{
  "name": "removeDimensions",
  "enabled": true
},

// 163行目 fill属性の削除(cssで操作するので)
{
  "name": "removeAttrs",
  "enabled": true,
  "params": {
    "attrs": "fill"
  }
}
}

簡単に説明すると、idはCSS操作で使用するので削除しない。
デフォルトのfill(塗り)属性はCSS優先度の都合上使いづらいので削除する。

その他、詳しい詳細は SVGO Compressorのgithubページをご確認ください。

CSSで操作したいレイヤーにidをつける

レイヤー名がそのままidになります。

レイヤー名などを整えたら、あとは通常通りの方法で書き出すだけです。

書き出したファイル名を変更する

SVGで書き出し後、ファイル名の末尾に.phpをつける。

hoge.svg → hoge.svg.php

※hoge.phpとしても良いですが、.svg.phpとして方が運用しやすい(後述)

SVGを使用する

テンプレートタグまたはincludeで読み込む

SVGコードをインラインで貼り付けても良いのですが、コード全体が見づらくなってしまうのであまり好きではありません。

WordPressでの運用に限りますが、私は以下のような方法で管理しています。

WordPressの場合

スラッグ名に「svg」、ハイフンを挟んで「画像名」。
ロゴだったらこのような感じに「svg-logo.svg.php」(「svg-」の部分は何でもOKです)

これをimgフォルダに入れて

theme
└img
    └svg-logo.svg.php

get_template_partで読み込みます。

<?php get_template_part( 'img/svg','logo.svg'); ?>

この時、ファイル名末尾の「.php」は省略できるので、「logo.svg」というわかりやすいコードになります。

通常のphpであればinclude

<?php include(‘ファイルのパス’); ?>

cssでidのカラーを操作する

#svg-logo__primary{
  fill:red;
}

/* ダークモード時に色を変更する場合 */
@media (prefers-color-scheme: dark) {
  #svg-logo__primary{
    fill:blue;
  }
}

まとめ

  • 1.SkechにSVGO Compressorをインストール
  • 2.WordPressで外部ファイルとして読み込む
  • 3.CSSで自由にコントロール

画像にもよりますが、SVGはjpgやpngより軽くてコントロールしやすいので積極的に使っていきたいですよね。
以上、CSSでコントロールしやすいSVG書き出し方法でした。

最新記事