Constructing Modern UIs with SVG

Transcript

1. Constructing Modern UIs with SVG Tim G. Thomas • @timgthomas
2. Today Basics Integration Advanced SVG
3. Basics
4. SVG Scalable Vector Graphics
5. SVG Scalable Vector Graphics
6. SVG Scalable Vector Graphics
7. SVG Scalable Vector Graphics
8. SVG Scalable Vector Graphics
9. SVG Scalable Vector Graphics
10. Why SVG? Non-flow-based layout Visual effects Why not?
11. Uses for SVG Glyphs + Icons Visualizations Components Full Apps
12. Creating SVG By hand Apps Procedurally Libraries
13. Creating SVG By hand Apps Procedurally Libraries <svg> <rect /> </svg>
14. Creating SVG By hand Apps Procedurally Libraries
15. Creating SVG By hand Apps Procedurally Libraries
16. Creating SVG By hand Apps Procedurally Libraries <svg> {{#each shape as |d|}} <path d={{d}} /> {{/each}} </svg>
17. Creating SVG By hand Apps Procedurally Libraries svgjs.com snapsvg.io d3js.org
18. Integration
19. Integration Inline Reference <use>
20. Integrating SVG Inline <body> <svg> <rect x="0" y="0" width="100" height="100" /> </svg> </body>
21. Integrating SVG Inline with React render() { return ( <div> <Header /> <svg> <path d={pathData} /> </svg> </div> ); },
22. Integrating SVG References .logo { background-image: url('logo.svg'); }
23. Integrating SVG <use> <svg> <use href="glyphs.svg#favorite"></use> </svg> <!-- glyphs.svg --> <svg> <symbol id="favorite"> <path /> </symbol> </svg>
24. Styling SVG Attributes CSS
25. Styling SVG Attributes <rect />
26. Styling SVG Attributes <rect fill="#6495ed" />
27. Styling SVG Attributes <rect fill="#6495ed" stroke="#ff1493" />
28. Styling SVG Attributes <rect fill="#6495ed" stroke="#ff1493" rx="10" ry="10" />
29. Styling SVG CSS <rect rx="10" ry="10" /> rect { fill: #6495ed; stroke: #ff1493; }
30. Advanced SVG
31. Advanced SVG Blend Modes Line Drawing Symbols Clipping Filters A Real-World App
32. Advanced SVG Blend Modes
33. Advanced SVG Blend Modes
34. Advanced SVG Blend Modes .tint { mix-blend-mode: color; }
35. Advanced SVG Blend Modes Branding Photo Filters UI Tricks
36. Advanced SVG Line Drawing
37. Advanced SVG Line Drawing
38. Advanced SVG Line Drawing Create Path Stroke with Dash Add Dash Offset+Width Animate!
39. Advanced SVG Line Drawing Create Path Stroke with Dash Add Dash Offset+With Animate!
40. Advanced SVG Line Drawing Create Path Stroke with Dash Add Dash Offset+Width Animate!
41. Advanced SVG Line Drawing Create Path Stroke with Dash Add Dash Offset+Width Animate!
42. Advanced SVG Line Drawing Create Path Stroke with Dash Add Dash Offset+Width Animate!
43. Advanced SVG Line Drawing Create Path Stroke with Dash Add Dash Offset+Width Animate!
44. Advanced SVG Line Drawing path { stroke-dasharray: 750, 1000; } @keyframes handwriting { 0% { stroke-offset: 0%; } 100% { stroke-offset: 100%; } }
45. Advanced SVG Line Drawing path { stroke-dasharray: 750, 1000; } @keyframes handwriting { 0% { stroke-offset: 0%; } 100% { stroke-offset: 100%; } }
46. Advanced SVG Line Drawing Use Sparingly!
47. Advanced SVG Symbols
48. Advanced SVG Symbols <symbol id="doc"> <path d="..." /> </symbol>
49. Advanced SVG Symbols <symbol id="doc"> <path d="..." /> </symbol> <use href="#doc" />
50. Advanced SVG Symbols <symbol id="doc"> <path d="..." /> </symbol> <use href="#doc" style="fill: #6495ed" /> <use href="#doc" style="fill: #ff1493" />
51. Advanced SVG Symbols Reduce Duplication Composition Glyphs/Icons
52. Advanced SVG Clipping + Masking
53. Advanced SVG Clipping + Masking <defs> <clipPath id="mask"> </clipPath> </defs>
54. Advanced SVG Clipping + Masking <defs> <clipPath id="mask"> <circle cx="128" cy="128" r="128" /> </clipPath> </defs>
55. Advanced SVG Clipping + Masking <defs> <clipPath id="mask"> <circle cx="128" cy="128" r="128" /> </clipPath> </defs> <image width="256" height="256" href="unclipped.png" />
56. Advanced SVG Clipping + Masking <defs> <clipPath id="mask"> <circle cx="128" cy="128" r="128" /> </clipPath> </defs> <image width="256" height="256" href="unclipped.png" clip-path="url(#mask)" />
57. Advanced SVG Clipping + Masking Use sparingly!
58. Advanced SVG Filters
59. Advanced SVG Filters <filter id="filter"> </filter> <text style="filter: url(#filter)">NDC</text>
60. Advanced SVG Filters <filter id="filter"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" /> </filter> <text style="filter: url(#filter)">NDC</text>
61. Advanced SVG Filters <filter id="filter"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" /> <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="50" xChannelSelector="R" yChannelSelector="G" result="displacement" /> </filter> <text style="filter: url(#filter)">NDC</text>
62. Advanced SVG Filters <filter id="filter"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" /> <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="50" xChannelSelector="R" yChannelSelector="G" result="displacement" /> <feGaussianBlur in="displacement" stdDeviation="3" /> </filter> <text style="filter: url(#filter)">NDC</text>
63. Advanced SVG Filters <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"> <animate attributeType="XML" attributeName="baseFrequency" from="0.05" to="0" dur="10s" repeatCount="indefinite" /> </feTurbulence>
64. Advanced SVG Filters <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"> <animate attributeType="XML" attributeName="baseFrequency" from="0.05" to="0" dur="10s" repeatCount="indefinite" /> </feTurbulence>
65. Advanced SVG A Real-World App
66. Custom Shapes Blend Modes Clip Paths
67. Custom Shapes Blend Modes Clip Paths
68. Further Research developer.mozilla.org/docs/Web/SVG css-tricks.com/mega-list-svg-information bit.ly/ndcoslo-svg
69. Thanks for coming! @timgthomas • timgthomas.com