Pro Yearly is on sale from $80 to $50! »

Constructing Modern UIs with SVG

Af7acd01448753af3dfd648c3f5ea287?s=47 timgthomas
June 14, 2018
Technology
0
57

Constructing Modern UIs with SVG

Af7acd01448753af3dfd648c3f5ea287?s=128

timgthomas

June 14, 2018
Tweet

More Decks by timgthomas

See All by timgthomas
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
32
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
45
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
51
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
45
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
1
66
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
42
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
49
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
65
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
230

Other Decks in Technology

See All in Technology
38f77168b7c5802adc9cc3a5cfcf031b?s=48 niharika28
0
240
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
120
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
190
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
120
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
120
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
250
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
140
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
200
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
840
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
100
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
230
64a4ba69d50590e592cd8e572454daa8?s=48 olegkovalov
0
210

Featured

See All Featured
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
55
9.3k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
255
19k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
10k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
218
15k
78b475797a14c84799063c7cd073962f?s=48 holman
288
130k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
5
1.2k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
284
18k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
39k
245cee81a9c424266e5e401d844ea881?s=48 lara
172
9.4k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
116
4.8k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1349
190k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
168
6.9k

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