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

Constructing Modern UIs with SVG

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for timgthomas timgthomas
June 14, 2018
Technology
230
0

Constructing Modern UIs with SVG

Avatar for timgthomas

timgthomas

June 14, 2018

More Decks by timgthomas

See All by timgthomas
Living Style Guides: Bringing Designers and Developers Together
Avatar for timgthomas timgthomas
0
270
Icons and the Web: Symbols of the Modern Age
Avatar for timgthomas timgthomas
0
220
Browser Invasion: Desktop Apps and the Web
Avatar for timgthomas timgthomas
0
210
Mind the Gap: Bringing Designers and Developers Together
Avatar for timgthomas timgthomas
0
150
Zero to App Store: A Hybrid App’s Tale
Avatar for timgthomas timgthomas
1
190
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
Avatar for timgthomas timgthomas
0
180
Ember ATX: Ember.Evented
Avatar for timgthomas timgthomas
0
130
Ember ATX: Components
Avatar for timgthomas timgthomas
0
110
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
Avatar for timgthomas timgthomas
0
420

Other Decks in Technology

See All in Technology
When Does a Local Qwen Start to Break
Avatar for Shoto morshoto
0
170
Guerilla InnerSource in enterprises, during the AI hype
Avatar for Oleg Nenashev onenashev
PRO
0
150
Redmine 7.0で私が開発した新機能の狙いと背景
Avatar for MAEDA Go vividtone
1
110
#jawssonic2026 あの時代が悪かった ~動かなかったSageMakerと共に迎えたイベント当日~
Avatar for Kana Kitagawa ktkn1129
0
130
Bet AI Day 2026丨AIによって本質に戻るシステムリスク管理
Avatar for LayerX layerx
PRO
0
880
Microsoft 365 Copilot chat -tekoälypalvelun tietosuojaongelmat
Avatar for Harto Pönkä hponka
0
110
Kiro Crewしか勝たん！？
Avatar for Kazuki Miura miu_crescent
PRO
0
180
AIに丸投げしないトイル削減 / Eliminating Toil Without Leaving It All to AI
Avatar for kohbis kohbis
2
120
Level Up Your CDK DX: 5 Tools I’ve Been Building
Avatar for k.goto gotok365
2
190
プロダクト思考 × 基盤思考を AIで実現する Compound Engineering
Avatar for Watanabe Takeshi(Buzz) tkc66buzz
1
260
Genie Code ワークショップ 基礎編 / Genie-Code-Workshop-fundamental
Avatar for Databricks Japan databricksjapan
PRO
0
350
DMMブックスのNext.js化を加速させるAI活用 / Migrating DMM Books to Next.js with AI
Avatar for Kentaro Matsushita kentarom
1
330

Featured

See All Featured
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.7k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.5k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.6k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4.3k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
200
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
570
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
240
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
520
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.3k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k

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