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

Constructing Modern UIs with SVG

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
210
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
180
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
Avatar for timgthomas timgthomas
0
180
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
420

Other Decks in Technology

See All in Technology
Point Cloud as a Foreign Language for Multi-modal Large Language Model
Avatar for Takuya MINAGAWA takmin
0
350
どんな手を使っても絶対間に合わせるスケジューラ
Avatar for asari asari194617
0
1.5k
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.5k
AIエージェントを雇う前に決める5つのこと
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
1
130
サーバー常駐型の 簡易障害調査AI エージェントを作ってみた話
Avatar for masayoshi masayoshi
1
500
When Token Pruning is Worse than Random: Understanding Visual Token Information in VLLMs
Avatar for SansanTech sansantech
PRO
0
220
Claude Teamプランの コスト最適化を考える
Avatar for ふくだ（fukuda ryu） rfdnxbro
2
860
顧客の要望は2次情報である 〜アンテナを張るFDEの構造論〜
Avatar for Noriaki Oji noriakioji
5
1.1k
[DroidKaigi 2026] Making UI specifications visible: Android UI development in the AI agent era supported by Compose Screenshot Testing and galleries
Avatar for syarihu syarihu
0
250
AI駆動開発を組織で促すために
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
7
9.1k
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
20k
AIとペアプロを始める。人との会話が消えていく。なんだか寂しい。 / The Conversations We Lost to AI
Avatar for yuki honyanya
0
100

Featured

See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
10k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
520
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
41k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
260
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
570
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
180
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.7k

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