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

Constructing Modern UIs with SVG

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for timgthomas timgthomas
June 14, 2018
Technology
220
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
260
Icons and the Web: Symbols of the Modern Age
Avatar for timgthomas timgthomas
0
200
Browser Invasion: Desktop Apps and the Web
Avatar for timgthomas timgthomas
0
190
Mind the Gap: Bringing Designers and Developers Together
Avatar for timgthomas timgthomas
0
140
Zero to App Store: A Hybrid App’s Tale
Avatar for timgthomas timgthomas
1
170
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
Avatar for timgthomas timgthomas
0
170
Ember ATX: Ember.Evented
Avatar for timgthomas timgthomas
0
120
Ember ATX: Components
Avatar for timgthomas timgthomas
0
110
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
Avatar for timgthomas timgthomas
0
410

Other Decks in Technology

See All in Technology
Terraformモジュールは、なぜ「魔境」化するのか
Avatar for hayama hayama17
1
180
トークン数だけでは測れない — Claude Code 組織展開の効果検証から学んだこと
Avatar for Masaki Kubota makikub
0
120
価格.comをAI駆動で全面刷新する ー 30年分の技術的負債を返し、次の30年の土台をつくる ー / AI Engineering Summit Tokyo 2026
Avatar for tkyowa tkyowa
46
48k
Ruby::Boxでできること、Refinementsでできること
Avatar for Tomohiro Hashidate joker1007
3
380
noUncheckedIndexedAccess、3時間、1万円。 / noUncheckedIndexedAccess, 3 Hours, 10,000 JPY.
Avatar for 株式会社カオナビ kaonavi
1
240
最低限これだけ押さえれ大丈夫_Claude Enterprise/Team企業展開ガバナンス入門
Avatar for t-kikuchi tkikuchi
1
750
「速く作る」から「正しく作る」へ ─ 生成AI時代の開発フロー改革の ロードマップと実行 ─
Avatar for starfish719 starfish719
0
6.6k
Databricks 月刊サービスアップデート 2026年05月号
Avatar for ちょし tyosi1212
0
200
形式手法特論：公平性制約の位相的特徴づけ #kernelvm / Kernel VM Study Kansai 12th
Avatar for y_taka_23 ytaka23
1
710
個人最適 から 全体最適 へ　AI情報共有会・AIギルド・AI-DLC で進める カンリーの組織展開
Avatar for ふくだ（fukuda ryu） rfdnxbro
0
1.3k
AI駆動開発が変える、大規模開発の前提 ーHuman in the Loop から Human on the Loop へ / AIE2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
3
2.8k
大学生が本気でDatabricksを活用してDiscordサークルをデータ駆動させてみた
Avatar for Kazuki Date phantomjuju
1
340

Featured

See All Featured
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
350
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.3k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
550
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
600
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
940
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
220
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.3k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k

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