モックアップやプロトタイプづくりを 加速させる。それが...
-
Upload
naoki-matsuda -
Category
Design
-
view
10.077 -
download
3
description
Transcript of モックアップやプロトタイプづくりを 加速させる。それが...
松田直樹
モックアップやプロトタイプづくりを
加速させる。それが 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。