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
150
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
150
Icons and the Web: Symbols of the Modern Age
timgthomas
0
140
Browser Invasion: Desktop Apps and the Web
timgthomas
0
120
Mind the Gap: Bringing Designers and Developers Together
timgthomas
0
89
Zero to App Store: A Hybrid App’s Tale
timgthomas
1
120
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
100
Ember ATX: Ember.Evented
timgthomas
0
110
Ember ATX: Components
timgthomas
0
77
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
340
Other Decks in Technology
See All in Technology
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
High Performance PHP
cmuench
0
140
Larkご案内資料
customercloud
PRO
0
600
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
730
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Rails Girls Zürich Keynote
gr2m
94
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
RailsConf 2023
tenderlove
29
1k
Faster Mobile Websites
deanohume
306
31k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
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