Constructing Modern UIs with SVG

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

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
26
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
44
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
50
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
44
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
1
64
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
42
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
48
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
65
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
230

Other Decks in Technology

See All in Technology
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
1
310
1cf2de2da02f94ad87a7a31038721e6c?s=48 capsmalt
1
140
B29f42636a5f1249b640473d49aa4514?s=48 linedevth
1
180
8120d39cb575881c830287046f06fec8?s=48 daoka
1
1.9k
5bbbb20da49b1f802af50b0f17a4f31f?s=48 miuranobuki
0
950
Ad22fcf5773b906c08330f4d57242212?s=48 inductor
4
740
9df0566fad9c9ca3bf669917848878fe?s=48 i35_267
1
990
E2640ce3612d9e7848dc957b519d8ca0?s=48 polar3130
2
230
11b879ad001638b95dd62331eed65505?s=48 fortegp05
0
120
Cb7edd153cf503f44c727b73647558bf?s=48 tetsuroito
0
800
703c34db2db0e609fddec6a5585ceccc?s=48 kenta_sato3
1
110
Dd7fa413be25d8672c03a487db6a8fe6?s=48 fujiihda
14
3.1k

Featured

See All Featured
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
274
31k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
236
23k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
60
2.4k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
281
46k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
7
580
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
68
3.4k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
607
54k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
115
4.7k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
478
150k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
27k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
256
10k

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