SVGをコードで見てみよう

SVG勉強会大阪 vol.1
2017.8.30
Kozaru

自己紹介

名前　こざる（小寺順子）
所属　こざる舎（フリーランス）
仕事　マークアップエンジニア
趣味　ビール、オイスター、絵本、電子工作系手芸
ほか　CoderDojoメンター、concrete5 Kansai Girls 運営
　　　DojoCon Japan 2017 実行委員

アジェンダ

難易度：★☆☆☆☆（簡単・初心者向け）

SVGを使ったことがない方、知っているけどお仕事で使うのを悩んでいる方向けに

マークアップ作業目線からのお話をします

SVGの構造
SVGをwebサイトに表示する
Illustratorから書き出したSVG
Sketchから書き出したSVG
Zeplinから書き出したSVG（with Sketch)

SVG

Scalable Vector Graphicsの略。
XMLをベースにしたベクトルグラフィックスの記述言語です。

ベクターデータなので、解像度の高いモニターでもカピカピしないです！

SVGは画像？コード？

XML（テキスト）で書かれた画像形式です。テキストエディタではXMLのコード、webブラウザでは画像で表示されます。

今日はSVGのコードを見ていきしょう！

SVGの構造

See the Pen svg sample01 by Kozaru (@kozaru) on CodePen.

XML宣言(<?xml ) → 省略できます！
DOCTYPE宣言(<!DOCTYPE) → 省略できます！
ルート要素(<svg>) → 書き方コツあります！
- 各画像要素など

XML宣言

XML文書は、始めにXML宣言を記述することが推奨されるが、以下の条件を満たして入れば、省略可能

文字コード UTF-8 or UTF-16
XMLのバージョン 1.0
スタンドアロン宣言 no

DOCTYPE宣言

SVG 1.1 ：DOCTYPE宣言記載は非推奨

ルート要素(<svg>)

XML文書のツリー構造で最上位の要素

ルート要素の属性

名前空間宣言（SVG）
viewBox・width・height属性

```

名前空間宣言（SVG/XLink）

SVG固有のタグが使えるようになる
HTML5のSVG要素（インライン要素）として扱う場合には省略可能
xmlns="http://www.w3.org/2000/svg"

href属性を使う場合は、下記の名前空間宣言が必要
SVG2.0では省略可能
xmlns:xlink="http://www.w3.org/1999/xlink"

viewBox・width・height

See the Pen svg sample01 by Kozaru (@kozaru) on CodePen.

width/height　SVGで表示する「枠・エリア」の大きさ
viewbox　「枠・エリア」内の座標
- 0 0 →左上座標　40 40 →右下の座標

viewBoxとwidth・heightの関係

See the Pen svg sample01 by Kozaru (@kozaru) on CodePen.

画像部分のコード

path: パス、rect: 四角形、circle: 円など。

各画像部分は Illustrator、SketchなどからSVGデータを書き出す際に、各アプリケーションで書き出すことが可能です。
このスライドでは、各画像部分は、IllustratorやSketchから書き出したデータを利用します。

ここまでのまとめ

See the Pen svg sample01 by Kozaru (@kozaru) on CodePen.

省略可能な部分をとると、すっきり！

See the Pen svg sample01 by Kozaru (@kozaru) on CodePen.

次はSVGを webサイトに表示する方法を
確認しましょう

SVGを表示する

インライン

img要素

背景画像

HTML内にSVGのコードを記載

img要素のsrcで
SVGファイルを読み込む

background-imageで
SVGファイルを読み込む

インライン：<svg>...省略...</svg>を直接HTMLに書き込みます。

SVGファイル：SVGのコードが書かれた、.svgの拡張子を持つファイルです

SVG要素に
width/height属性がない場合...

インライン

img要素

背景画像

width/heightをcssで設定

インライン

img要素

背景画像

SVGの親要素にcssを設定

img要素にcssを設定

background-sizeを設定

width/height を SVG要素に設定+
width/height を cssでも設定

インライン

img要素

背景画像

SVGの親要素にcssを設定

img要素にcssを設定

background-sizeを設定

インラインSVGのサイズを変更する

SVG要素のwidth/heightを変更

SVG要素にcssを設定

background-size: cover

右はSVGタグにwidth/height属性なし

IE11の場合

SVG属性に、width/heightをつけると解決します

ここまでをまとめます

SVG要素には

width/height属性
viewBox属性
名前空間xmlns="http://www.w3.org/2000/svg"

を設定しておくとよいでしょう。

次は、Illustratorから
書き出すコードをみていきましょう

Illustratorから書き出したSVG

書き出し方法がいろいろあります

DEMO

どんな書き出し方法があるか確認

書出方法ごとにSVGのコードが変わります

See the Pen svg sample01 by Kozaru (@kozaru) on CodePen.

どれがオススメなんだろう...

web用に使うなら...

スクリーン用に書き出し＋プレゼンテーション属性の設定が、コードが軽くなる場合が多いです。

スクリーン用に書き出し + プレゼンテーション属性
でばっちり！！！

のはずなんですが

こんなことないですか？

ブレンド

いただくカンプが
最新Illustratorじゃない

多分大丈夫

アメリカン

デザイナーさんと
環境やバージョンが違う

ほぼ大丈夫

ブレンド濃いめ

SVGデータを支給
書き出し形式を選べない

...

安心してください！

ジップロックよりすごいツールがあります！

SVGOMG

ブラウザから SVGファイルを最適化できるツール

See the Pen svg sample01 by Kozaru (@kozaru) on CodePen.

書き出し後、最適化するとなおよいですね！

では話題のSketchから
書き出したコードもみてみましょう！

Sketchから書き出したSVG

SVGO Compressor

書き出し時に、SVGファイルを最適化してくれるプラグインがあります！

DEMO

プラグインインストール後のSketchからコードを書出

Sketchの書き出すコード

Export：widthとheightが入らず
Copy SVG code：SVGO Compressor が効かず

See the Pen Sketchからの書出 by Kozaru (@kozaru) on CodePen.

いずれかで解決しましょう

Export した SVG に width/height 属性を追加
Copy SVG codeを、SVGOMGで最適化

See the Pen Sketchからの書出(解決) by Kozaru (@kozaru) on CodePen.

次は、Sketchの塗りをチェック！

fill-rule

Sketchのデフォルト：evenodd（白抜き）
SVGのデフォルト：nonzero（全面を塗る）

DEMO

fill-ruleのコード

nonzero(全面を塗る)で書き出すためには設定変更が必要

See the Pen Sketchからの書出(fill-rule) by Kozaru (@kozaru) on CodePen.

Illustratorの場合

See the Pen Illustratorからの書出（塗り） by Kozaru (@kozaru) on CodePen.

同じ星なのに、コードは別物ですね。びっくり。

Sketch Symbolの便利機能とSVG

DEMO

Sketch Symbolのoverride機能

便利なんですが、SVG書き出し時には注意が必要です

Exportで書き出す場合

width/height属性をいれましょう

See the Pen Sketchからの書出(symbol/export) by Kozaru (@kozaru) on CodePen.

Copy SVG Codeで書き出す場合

SVGOMGで最適化するとマスク部分の表示がおかしくなる場合があります

See the Pen Sketchからの書出(symbol/copy) by Kozaru (@kozaru) on CodePen.

なぜ...

ここで救世主Zeplinの登場です

Zeplinから書き出したSVG

ZeplinはアップロードしたSketchの
アートボードからSVGなどが書き出せるツールです

DEMO

ZeplinからのSVGの書き出し

ZeplinからのExport

SVGOで最適化されたSVGコードが書き出されます！

See the Pen Sketchからの書出(symbol/zeplin) by Kozaru (@kozaru) on CodePen.

Make Exportable

SketchからZeplinにアップロードする前に
Make Exportableを設定しましょう

思ってたより簡単でしょ！？

SVG使ってみましょう！

まとめ