HTML5NAGOYA#14のテーマ「フロントエンド入門」でSVGについて発表した内容です。 スライドでは、SVGのいいところをご紹介しながら、使う前に気をつけたいところをご紹介しています。 SVGでつまずいてしまう人の役に立てたらいいなと思います。

1. 使う前に知っておきたい
SVGのこと
有限会社アップルップル 森田 かすみ
HTML5NAGOYA#14

2. SVGでつまずくことがある

3. SVGでつまずくことがある

4. それなのにSVGは注目されつつ
ある（同じことが何年も前から言われてるらしいけど）

5. それなのにSVGは注目されつつ
ある（同じことが何年も前から言われてるらしいけど）

6. 使う前に問題を知っておけば
こわくない！

7. SVGの魅力を伝えながら
気をつけたいところをご紹介
します

8. SVGとは

9. SVGとは

10. SVGとは

11. ベクター形式の画像フォーマット

12. ベクター形式とラスタ形式の画像の違い

13. マークアップ言語のひとつ

14. SVGができること

15. SVGができること

16. SVG効果

17. clippath要素でパスの切り
抜き
IE10
ハマりレベル

18. クリップパスとは
http://mkasumi.com/demo/SVG/clippath.html
+ =

19. クリップパスとは
http://mkasumi.com/demo/SVG/clippath.html
+ =
jpeg SVG

20. 実装

21. CSSだけで形を指定する
http://mkasumi.com/demo/SVG/clippath_basic.html

22. SVG要素を使用するべき複雑な形の例
http://mkasumi.com/demo/SVG/clippath_text.html

23. フィルター効果
IE10
ハマりレベル

24. Blur効果の例
→
http://mkasumi.com/demo/SVG/filter.html
png

25. 実装

26. CSSのfilterとのちがい
IE非対応

27. アニメーション

28. アニメーション

29. JSのアニメーション
http://snapsvg.io/
http://d3js.org/
http://www.svgjs.com/

30. CSSのアニメーション
ハマりレベル
IE非対応

31. SMILアニメーション
ハマりレベル
IE非対応

32. SMILアニメーション
http://mkasumi.com/demo/SVG/smilAnimation.html

33. 使い方次第で表現方法が豊
富になる！

34. パスアニメーション
http://tympanus.net/Tutorials/ShapeHoverEffectSVG/index2.html

35. フォーム
http://tympanus.net/Development/AnimatedCheckboxes/

36. クリップパスをつかったスライド
http://codepen.io/yoksel/pen/eIxmr?editors=110

37. 表現方法を選択する基準

38. SVGを表示する方法

39. SVGを表示する方法

40. 画像として書き出して表示する
ハマりレベル

41. 画像として書き出して表示する
ハマりレベル

42. img要素
ハマりレベル

43. object要素
ハマりレベル

44. こんなこともできる

45. background-imageプロパティ
ハマりレベル

46. HTMLに直接書いてインラインで表示する

47. svg要素

48. JSやCSSが適用される

49. リンクがつけられる

50. フォールバック

51. SVGの表示方法を選ぶ基準

52. SVGの表示方法を選ぶ基準

53. 実際にSVG画像を
作成してみる

54. SVG編集ソフト

55. ツールでSVG作ったときに気
をつけたいところ

56. レイヤー名、グループ名は後のid名になる

57. レイヤー名、グループ名は後のid名になる

58. フォントはアウトライン化しておく
ハマりレベル

59. 保存する

60. 保存する

61. テキストエディタで編集する

62. 不要なコードの削除

63. ちょっとしたポイント

64. ちょっとしたポイント

65. 軽量化
https://github.com/svg/svgo
http://petercollingridge.appspot.com/svg_optimiser

66. MIMEタイプの設定
ハマりレベル
MAX

67. 実際ハマったページ

68. 実際ハマったページ

69. まとめ

71. まだ業務で必ず使う技術じゃ
ないかもしれない

72. 今のうちに勉強して慣れてお
きたい言語のひとつです！
だからこそ

73. ご清聴ありがとうございました！