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
59

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
38
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
46
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
52
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
46
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
1
67
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
43
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
52
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
65
Af7acd01448753af3dfd648c3f5ea287?s=48 timgthomas
0
230

Other Decks in Technology

See All in Technology
C21becdee5cd08b34c7452276e64c1fe?s=48 yamamuteki
3
870
Ad22fcf5773b906c08330f4d57242212?s=48 inductor
1
140
97a7f7899e0df28c3636b8d44bbe6578?s=48 korodroid
0
260
70357f859596e494c8373be7a87966b1?s=48 1027kg
0
210
40301c0affdf359eaca771713e22b71a?s=48 harshbothra
0
150
A645e7c3a6635ead8fa323c583769591?s=48 hololab
0
250
B83a91887164b8b538ff4b20d24e4491?s=48 yuji1484
3
920
877f92a3597118cda2715790fa170ad4?s=48 benzookapi
1
450
991fe792d878a5ae41bdc4d0c9ee18cb?s=48 hagyyyy
1
200
D3be793aaf76ed1915295001712ce0f1?s=48 jrfk
0
230
8a84268593355816432ceaf78777d585?s=48 dena_tech
1
240
A73ed5cefbbd84abd2c5e14a5eb4a339?s=48 ippey
2
220

Featured

See All Featured
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
288
110k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
82
4.7k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
117
4.9k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
359
62k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
71
3.6k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
107
14k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
8.8k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
94
5.5k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
70
3.6k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
260
11k
Ecdea9b9714877b86cee08458f085481?s=48 trallard
14
720
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
11
820

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