More Related Content
Similar to モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」 (20)
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
- 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>
');
- 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/
- 26. SVG MANIAX - CSS Nite After dark7
http://www.slideshare.net/ssuser99dc16/svg-maniaxcss-nite-after-dark7-svgmatsuda