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
200
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
370
Other Decks in Technology
See All in Technology
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.5k
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
190
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
480
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
Create Ruby native extension gem with Go
sue445
0
120
slog.Handlerのよくある実装ミス
sakiengineer
4
460
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
310
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Docker and Python
trallard
46
3.6k
Facilitating Awesome Meetings
lara
55
6.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Designing Experiences People Love
moore
142
24k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
How GitHub (no longer) Works
holman
315
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Context Engineering - Making Every Token Count
addyosmani
3
58
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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