モックアップやプロトタイプづくりを加速させる。それが SVG。@DIST.4 「Life is Short」

モックアップやプロトタイプづくりを
加速させる。それが SVG。
松田直樹

CCO, Web Designer
松田直樹

SVG（ベクター）なツールが充実してきた
Illustrator CC 2014 Sketch 3

なんと
Illustrator CC なら

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

SVG ならコピペで OK
⌘ + C ⌘ + V

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

コードドリブンで
プロトタイプを作ることあるじゃないですか？

そんなときに便利なので
ちょっとデモ

ということは
こんなことまで

CSSにSVGのコードを直接貼り付けて
背景画像を指定
Base 64 にしなくてもいい
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>
');

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

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

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

いらない部分は削除

<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 の指定は適宜削除
!-- 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

レイヤー名に日本語使うと
修正必須
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-3z/
path class=st1
d=M4.2,46.6h59.3c2.3,0,4.2,1.9,4.2,4.2c0,2.3-.9,55,0,53.1,0,50.8C0,48.5,1.9,46.6,4.2,46.6z/

とで
HTML ベースのプロトタイピングに
超便利です

SVG MANIAX - CSS Nite After dark7
http://www.slideshare.net/ssuser99dc16/svg-maniaxcss-nite-after-dark7-svgmatsuda

ありがとうございました
モックアップやプロトタイプづくりを
加速させる。それが SVG。
松田直樹

モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」

More Related Content

What's hot

Similar to モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」