SVGの基本＆活用法。SVGのメリットと事例を基礎から学ぶ。
41 likes43,469 views
2015.07.25 HTML5fun & マカベン勉強会発表スライド
SVGの基本＆活用法。SVGのメリットと事例を基礎から学ぶ。
- 1. Webデザインのトレンド、SVGの基本＆ 活用法。SVGのメリットと事例を基礎か ら学ぶ。 2015年7月25日（土） マカベン × HTML5fun HTML5 基礎から学んで、最新のライブラリを覚えよう！！
- 2. 自己紹介
- 3. 自己紹介 ● 越水大輔（33歳） ● 営業からWeb制作に転身 ● 現在フリーランス ● アイドットデザイン ● マークアップ多め
- 6. 本日の目標
- 8. 本日の目標
- 10. SVGってなに？
- 14. ラスター画像
- 15. ラスター画像 ベクター画像
- 16. SVGの特徴
- 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. SVGのメリット
- 38. SVGの実装例
- 40. SVGの実装例 企業での導入事例 ● スターバックス http://www.starbucks.com/ ● ニューヨーク・タイムズ http://www.nytimes.com/ ● 日本経済新聞社 http://www.nikkei.com/
- 41. SVGの使い方
- 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) + C Ctrl(command) + V
- 46. SVGの使い方・実装方法 Web表示で使いやすいものを4つを紹介 ● img要素 ● object要素 ● CSSのbackground ● HTML5でインラインSVGを記述する
- 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. ここまでがざっくりとした概要
- 59. インラインSVGを書いてみる
- 60. インラインSVGを書いてみる
- 62. インラインSVGを書いてみる 図形の塗りと線 ● rect ● fill ● stroke
- 64. インラインSVGを書いてみる 塗りやスタイルの設定をグループ化する。 ● <g>でグループ化 ● <g></g>のなかにある要素にまとめてスタイル 指定できる。 ● 特定の要素だけ別のスタイルを指定したい場合 は直接記述
- 65. インラインSVGを書いてみる グラデーションを設定する ● <defs>で要素のidと結びつける ● <linearGradient>でグラデーション ● <stop />で色と場所を指定 ● x1,y1,x2,y2で始発点・終了点を指定
- 66. インラインSVGを書いてみる 直線・円・楕円を作成する ● <line> 直線 ● <circle> 円 ● <ellipse> 楕円
- 69. インラインSVGを書いてみる 作成した図形をアニメーションさせる ● 要素のなかに<animate>を記述する ● dur=""でアニメーションの間隔 ● begin=""で何秒後に開始するか設定
- 71. 役立つツール・ライブラリ
- 72. 役立つツール・ライブラリ LAZY LINE PAINTER 線画アニメーションのjQueryプ ラグイン http://lazylinepainter.info/
- 74. 役立つツール・ライブラリ Textures.js SVGでテクスチャも作成でき る！ http://riccardoscalco.github.io/textures/
- 80. Web制作者（マークアップ）のスキルセット ● HTML（文書構造の意識） ● CSS・メタ言語（Sass, Less） ● JavaScript ● CMS ● レスポンシブ・マルチデバイス対応 + ● SVG New!
- 81. 差別化を図るチャンスかも？
- 83. ありがとうございました！