松田直樹

モックアップやプロトタイプづくりを

加速させる。それが SVG。

松田直樹CCO, Web Designer

なにかと話題の

SVG

10年前から

Illustrator CC 2014 Sketch 3

SVG（ベクター）なツールが充実してきた

Illustrator CC なら

なんと

Illustrator CC なら

画像の「書き出し」いらず

SVG ならコピペで OK

⌘ + C ⌘ + V

コピペで SVG のコードをお好きなエディタに貼り付け

Sketch 3 ではできない

コードドリブン で

プロトタイプを作ることあるじゃないですか？

そんなときに便利なので

ちょっとデモ

ということは

こんなことまで

CSSにSVGのコードを直接貼り付けて背景画像を指定

background: url('data:image/svg+xml;charset=utf8,

<svg xmlns="http://www.w3.org/2000/svg"

viewBox="0 0 100 100"

width="100" height="100">

<circle fill="orange" cx="50" cy="50" r="50"/>

</svg>

');

Base 64 にしなくてもいい

他にも

Edge Reflow にもそのままコピペできる

（余談）

テキストが含まれるとテキストだけしかコピーされない

⌘ + C ⌘ + V

PIZZA

ちゃんと使うときは

ちゃんとコードを整形しよう

<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In -->

<svg version="1.1"

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"

x="0px" y="0px"

width="67.7px" height="63.5px"

viewBox="0 0 67.7 63.5"

style="enable-background:new 0 0 67.7 63.5;"

xml:space="preserve">

いらない部分は削除

<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In -->

<svg version="1.1"

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"

x="0px" y="0px"

width="67.7px" height="63.5px"

viewBox="0 0 67.7 63.5"

style="enable-background:new 0 0 67.7 63.5;"

xml:space="preserve">

width, height の指定は適宜削除

<g id="ハンバーガー_1_">

<path class="st0"

d="M38.1,0h-8.5C17.9,0,2.1,9.5,2.1,21.2v2.1c0,1.2,0.9,2.1,2.1,2.1h5

9.3c1.2,0,2.1-0.9,2.1-2.1v-2.1C65.6,9.5,49.8,0,38.1,0z

M2.1,59.3c0,2.3,1.9,4.2,4.2,4.2h55c2.3,0,4.2-1.9,4.2-4.2V55H2.1V59.

3z"/>

<path class="st1"

d="M4.2,46.6h59.3c2.3,0,4.2,1.9,4.2,4.2c0,2.3-1.9,4.2-4.2,4.2H4.2C1

.9,55,0,53.1,0,50.8C0,48.5,1.9,46.6,4.2,46.6z"/>

<path class="st2"

d="M4.2,38.1h59.3v8.5h-4.2l-6.4,6.4l-6.3-6.4H4.2V38.1z"/>

レイヤー名に日本語使うと修正必須

とにかく

と で

HTML ベースのプロトタイピングに

超便利です

http://www.slideshare.net/ssuser99dc16/svg-maniaxcss-nite-after-dark7-svgmatsuda

SVG MANIAX - CSS Nite After dark7

ありがとうございました

松田直樹

モックアップやプロトタイプづくりを

加速させる。それが SVG。