昨今、Webデザインのツールとしても注目を浴び始めているベクターツール。老舗の Illustrator はもちろん、新参の Sketch 3 などもすでにWebデザインツールとして十分な実績を得ています。 もちろんデザインカンプを作るツールとしても優秀なこれらですが、モックアップづくりなどの中間成果物においてもベクターは僕らの味方です。ベクター、ひいては SVG の時間短縮的に効率的な活用法をご紹介します。

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

2. CCO, Web Designer
松田直樹

3. なにかと話題の
SVG

4. 10年前から

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

6. Illustrator CC なら

7. なんと
Illustrator CC なら

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

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

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

11. Sketch 3 ではできない

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

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

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

15. 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>
');

16. 他にも

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

18. （余談）

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

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

21. いらない部分は削除
<!-- 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

22. 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

23. レイヤー名に日本語使うと
修正必須
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/

24. とにかく

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

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

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