Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Constructing Modern UIs with SVG
Search
timgthomas
June 14, 2018
Technology
0
180
Constructing Modern UIs with SVG
timgthomas
June 14, 2018
Tweet
Share
More Decks by timgthomas
See All by timgthomas
Living Style Guides: Bringing Designers and Developers Together
timgthomas
0
220
Icons and the Web: Symbols of the Modern Age
timgthomas
0
160
Browser Invasion: Desktop Apps and the Web
timgthomas
0
150
Mind the Gap: Bringing Designers and Developers Together
timgthomas
0
120
Zero to App Store: A Hybrid App’s Tale
timgthomas
1
140
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
120
Ember ATX: Ember.Evented
timgthomas
0
110
Ember ATX: Components
timgthomas
0
82
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
380
Other Decks in Technology
See All in Technology
Node.js 2025: What's new and what's next
ruyadorno
0
700
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
340
React19.2のuseEffectEventを追う
maguroalternative
2
560
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
140
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
160
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
0
180
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
100
ビズリーチ求職者検索におけるPLMとLLMの活用 / Search Engineering MEET UP_2-1
visional_engineering_and_design
1
180
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
0
120
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
180
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
140
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Balancing Empowerment & Direction
lara
5
690
Scaling GitHub
holman
463
140k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building an army of robots
kneath
306
46k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
It's Worth the Effort
3n
187
28k
Transcript
Constructing Modern UIs with SVG Tim G. Thomas • @timgthomas
Today Basics Integration Advanced SVG
Basics
SVG Scalable Vector Graphics
SVG Scalable Vector Graphics
SVG Scalable Vector Graphics
SVG Scalable Vector Graphics
SVG Scalable Vector Graphics
SVG Scalable Vector Graphics
Why SVG? Non-flow-based layout Visual effects Why not?
Uses for SVG Glyphs + Icons Visualizations Components Full Apps
Creating SVG By hand Apps Procedurally Libraries
Creating SVG By hand Apps Procedurally Libraries <svg> <rect />
</svg>
Creating SVG By hand Apps Procedurally Libraries
Creating SVG By hand Apps Procedurally Libraries
Creating SVG By hand Apps Procedurally Libraries <svg> {{#each shape
as |d|}} <path d={{d}} /> {{/each}} </svg>
Creating SVG By hand Apps Procedurally Libraries svgjs.com snapsvg.io d3js.org
Integration
Integration Inline Reference <use>
Integrating SVG Inline <body> <svg> <rect x="0" y="0" width="100" height="100"
/> </svg> </body>
Integrating SVG Inline with React render() { return ( <div>
<Header /> <svg> <path d={pathData} /> </svg> </div> ); },
Integrating SVG References .logo { background-image: url('logo.svg'); }
Integrating SVG <use> <svg> <use href="glyphs.svg#favorite"></use> </svg> <!-- glyphs.svg -->
<svg> <symbol id="favorite"> <path /> </symbol> </svg>
Styling SVG Attributes CSS
Styling SVG Attributes <rect />
Styling SVG Attributes <rect fill="#6495ed" />
Styling SVG Attributes <rect fill="#6495ed" stroke="#ff1493" />
Styling SVG Attributes <rect fill="#6495ed" stroke="#ff1493" rx="10" ry="10" />
Styling SVG CSS <rect rx="10" ry="10" /> rect { fill:
#6495ed; stroke: #ff1493; }
Advanced SVG
Advanced SVG Blend Modes Line Drawing Symbols Clipping Filters A
Real-World App
Advanced SVG Blend Modes
Advanced SVG Blend Modes
Advanced SVG Blend Modes .tint { mix-blend-mode: color; }
Advanced SVG Blend Modes Branding Photo Filters UI Tricks
Advanced SVG Line Drawing
Advanced SVG Line Drawing
Advanced SVG Line Drawing Create Path Stroke with Dash Add
Dash Offset+Width Animate!
Advanced SVG Line Drawing Create Path Stroke with Dash Add
Dash Offset+With Animate!
Advanced SVG Line Drawing Create Path Stroke with Dash Add
Dash Offset+Width Animate!
Advanced SVG Line Drawing Create Path Stroke with Dash Add
Dash Offset+Width Animate!
Advanced SVG Line Drawing Create Path Stroke with Dash Add
Dash Offset+Width Animate!
Advanced SVG Line Drawing Create Path Stroke with Dash Add
Dash Offset+Width Animate!
Advanced SVG Line Drawing path { stroke-dasharray: 750, 1000; }
@keyframes handwriting { 0% { stroke-offset: 0%; } 100% { stroke-offset: 100%; } }
Advanced SVG Line Drawing path { stroke-dasharray: 750, 1000; }
@keyframes handwriting { 0% { stroke-offset: 0%; } 100% { stroke-offset: 100%; } }
Advanced SVG Line Drawing Use Sparingly!
Advanced SVG Symbols
Advanced SVG Symbols <symbol id="doc"> <path d="..." /> </symbol>
Advanced SVG Symbols <symbol id="doc"> <path d="..." /> </symbol> <use
href="#doc" />
Advanced SVG Symbols <symbol id="doc"> <path d="..." /> </symbol> <use
href="#doc" style="fill: #6495ed" /> <use href="#doc" style="fill: #ff1493" />
Advanced SVG Symbols Reduce Duplication Composition Glyphs/Icons
Advanced SVG Clipping + Masking
Advanced SVG Clipping + Masking <defs> <clipPath id="mask"> </clipPath> </defs>
Advanced SVG Clipping + Masking <defs> <clipPath id="mask"> <circle cx="128"
cy="128" r="128" /> </clipPath> </defs>
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" />
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)" />
Advanced SVG Clipping + Masking Use sparingly!
Advanced SVG Filters
Advanced SVG Filters <filter id="filter"> </filter> <text style="filter: url(#filter)">NDC</text>
Advanced SVG Filters <filter id="filter"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"
/> </filter> <text style="filter: url(#filter)">NDC</text>
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>
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>
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>
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>
Advanced SVG A Real-World App
Custom Shapes Blend Modes Clip Paths
Custom Shapes Blend Modes Clip Paths
Further Research developer.mozilla.org/docs/Web/SVG css-tricks.com/mega-list-svg-information bit.ly/ndcoslo-svg
Thanks for coming! @timgthomas • timgthomas.com