Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Constructing Modern UIs with SVG

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

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
46
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
52
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
56
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
49
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
1
73
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
53
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
53
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
65
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
240

Other Decks in Technology

See All in Technology
F400611942a8b7a695f741f9a720fcf8?s=48 koooootake
3
120
C31510e1430372434b634a415c656988?s=48 bake0937
0
140
6dc67d02d6b322ee317cece9b045317d?s=48 kalupas226
2
130
7a0bc9670ff654b04d4361a9afd1bba8?s=48 hcrane
3
350
38aff0f87502c6aef87e6eca03742403?s=48 fire_fire_2
1
220
5a9fb3b80c517e51e4e95a27b63c6a67?s=48 takuyatezuka
3
1.9k
195f71c8183f8d27da66aa0618f293b6?s=48 task4233
17
12k
79dcb04101764d7bf66f898dd446838e?s=48 tsukubachallenge
0
240
Fccb5974b63d64636a7c90faf3bab51f?s=48 kikuzo
2
220
2d1ae5ea9354a50d87b46f4503d11f4e?s=48 tuhin1729
0
130
140494d272a4d89883a94fdfdb29dea2?s=48 oracle4engineer
PRO
2
120
73c9d1065e0075a9da6e404e08fe77fb?s=48 siroitori0413
0
140

Featured

See All Featured
79acae287842acf29084005533a7fb3b?s=48 hursman
111
9.5k
828ace851b606e1206900f26459f55ad?s=48 speakerdeck
PRO
0
300
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
209
7.1k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
129
20k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
92
4.1k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
56
2k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
32
1.1k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
6
730
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
43
4.9k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.8k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
654
120k

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