Download as PDF, PPTX
SVGの基本＆活用法。SVGのメリットと事例を基礎から学ぶ。
- 1. Webデザインのトレンド、SVGの基本＆ 活用法。SVGのメリットと事例を基礎か ら学ぶ。 2015年7月25日（土） マカベン × HTML5funHTML5 基礎から学んで、最新のライブラリを覚えよう！！
- 2.
- 3. 自己紹介 ● 越水大輔（33歳） ● 営業からWeb制作に転身 ●現在フリーランス ● アイドットデザイン ● マークアップ多め
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 14.
- 15.
- 16.
- 18. SVGの特徴 ● ベクター形式のXML文書 ● HTMLと似たような「タグ」で構成されている ●画像でありながらマークアップ言語でもある ● 80個のタグ https://developer.mozilla.org/ja/docs/Web/SVG/Element
- 19. ブラウザの対応状況 ● Firefox 1.5〜 ●Chrome 1〜 ● Safari 3〜 ● iOS Safari 2〜
- 20. ブラウザの対応状況 ● Firefox 1.5〜 ●Chrome 1〜 ● Safari 3〜 ● iOS Safari 2〜 ● IE9〜 ● Android 3〜
- 21. ブラウザの対応状況 ● Firefox 1.5〜 ●Chrome 1〜 ● Safari 3〜 ● iOS Safari 2〜 ● IE9〜 ● Android 3〜 利用が広がってきている！
- 22. Web制作者（マークアップ）のスキルセット ● HTML ● CSS ●JavaScript
- 23. Web制作者（マークアップ）のスキルセット ● HTML（文書構造の意識） ● CSS・メタ言語（Sass,Less） ● JavaScript ● CMS ● レスポンシブ・マルチデバイス対応
- 24. Web制作者（マークアップ）のスキルセット ● HTML（文書構造の意識） ● CSS・メタ言語（Sass,Less） ● JavaScript ● CMS ● レスポンシブ・マルチデバイス対応 + ● SVG New!
- 25. WHY？ ● 表現の幅の広さ （アニメーション、CSS装飾、アクセシビリティの 担保） ● マークアップ言語で覚えた強みを活かせる ●デザインとエンジニアリングの橋渡し （インタラクション、UI）
- 26. WHY？ ● 表現の幅の広さ （アニメーション、CSS装飾、アクセシビリティの 担保） ● マークアップ言語で覚えた強みを活かせる ●デザインとエンジニアリングの橋渡し （インタラクション、UI）
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. SVGの実装例 企業での導入事例 ● スターバックス http://www.starbucks.com/ ● ニューヨーク・タイムズ http://www.nytimes.com/ ●日本経済新聞社 http://www.nikkei.com/
- 41.
- 42. SVGの使い方・実装方法 illustratorで作るのがカンタン！ 文字データの場合はアウトライン化する。 1. 「保存」または「別名で保存」 2. ファイル形式を.svgで選択 保存時のオプション設定はAdobeのページを参考に。 参考：SVG形式で書き出す方法 （Illustrator CC）https://helpx.adobe.com/jp/illustrator/kb/5710.html
- 45. SVGの使い方・実装方法 illustratorからコピペでもOK！ Ctrl(command) + CCtrl(command) + V
- 46. SVGの使い方・実装方法 Web表示で使いやすいものを4つを紹介 ● img要素 ● object要素 ●CSSのbackground ● HTML5でインラインSVGを記述する
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54. SVGの使い方・実装方法 ● img要素 ● object要素 ●CSSのbackground ● HTML5でインラインSVGを記述する
- 55. SVGの使い方・実装方法 ● img要素 ● object要素 ●CSSのbackground ● HTML5でインラインSVGを記述する 各方法やブラウザによっても注意点やフォールバックの方法が 異なる。
- 56. SVGの使い方・実装方法 参考スライド SVG MANIAX -CSS Nite After dark7 http://www.slideshare.net/ssuser99dc16/svg-maniaxcss-nite- after-dark7-svgmatsuda 各ブラウザにおける注意点などがまとめら れています。
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64. インラインSVGを書いてみる 塗りやスタイルの設定をグループ化する。 ● <g>でグループ化 ● <g></g>のなかにある要素にまとめてスタイル 指定できる。 ●特定の要素だけ別のスタイルを指定したい場合 は直接記述
- 65. インラインSVGを書いてみる グラデーションを設定する ● <defs>で要素のidと結びつける ● <linearGradient>でグラデーション ●<stop />で色と場所を指定 ● x1,y1,x2,y2で始発点・終了点を指定
- 66.
- 67.
- 68.
- 69. インラインSVGを書いてみる 作成した図形をアニメーションさせる ● 要素のなかに<animate>を記述する ● dur=""でアニメーションの間隔 ●begin=""で何秒後に開始するか設定
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80. Web制作者（マークアップ）のスキルセット ● HTML（文書構造の意識） ● CSS・メタ言語（Sass,Less） ● JavaScript ● CMS ● レスポンシブ・マルチデバイス対応 + ● SVG New!
- 81.
- 82.
- 83.