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
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
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
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
「最後に責任を取るのはチーム」— 人間のPRレビューを最小化してアップデートしたメンタルモデル
Avatar for Jotaro Nishime jnishime_dresscode
0
940
AI Coding Agent時代のcdk-nagガードレール 〜組織ルールを強制CIで守り抜く設計の挑戦〜
Avatar for みずほリサーチ&テクノロジーズ株式会社 先端技術研究部 mhrtech
3
440
OpenTelemetryにおけるGoのゼロコード・コンパイル時計装について #fukuokago
Avatar for quiver quiver
0
130
LLM/Agent評価：トップ営業の発言を「正解」にする 〜暗黙的正解による評価を営業資産に変える〜
Avatar for Hirotaka takkuhiro
1
230
[2026-07-15] AI Ready なはずだったアーキテクチャと、見えてきた課題・次に目指す状態
Avatar for 和田 悠佑 wxyzzz
9
4k
SRE Next 2026 何でも屋からの脱却
Avatar for Masato Bito bto
0
1k
インフラと開発の垣根を超えていき！〜元AWSインフラエンジニアがAWS開発で奮闘している話〜
Avatar for da-hatakeyama hatahata021
3
300
変更し続けられるシステムをどう保つか — AI時代のSSoTという設計原則
Avatar for かわうそ kawauso
1
260
世界、断片、モデル。そして理解
Avatar for SAKO Hiroshi ardbeg1958
1
130
AI時代のYAGNI：「爆速で無駄になった機能」からの学び / 20260720 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
3
380
GoでCコンパイラを作った話
Avatar for repunit11 repunit
0
130
10年目を迎えた「ABEMA」がどのように AI 活用を推進して、AI 駆動開発にシフトしているのか / How ABEMA, entering its 10th year, is promoting the use of AI and shifting toward AI-driven development
Avatar for Yusei Yamanaka miyukki
0
290

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
38k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
860
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
72
40k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.8k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
420
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
520
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
380
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
430
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
420

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