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
130
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
120
Icons and the Web: Symbols of the Modern Age
timgthomas
0
110
Browser Invasion: Desktop Apps and the Web
timgthomas
0
100
Mind the Gap: Bringing Designers and Developers Together
timgthomas
0
72
Zero to App Store: A Hybrid App’s Tale
timgthomas
1
100
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
89
Ember ATX: Ember.Evented
timgthomas
0
94
Ember ATX: Components
timgthomas
0
74
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
290
Other Decks in Technology
See All in Technology
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
AWSでRAGを作る法方
sonoda_mj
1
140
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
470
簡単に始めるSnowflakeの機械学習
nayuts
1
190
Classmethod Odyssey 登壇資料
yamahiro
0
390
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
Azure AI ことはじめ
tsubakimoto_s
0
130
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
120
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
4 Signs Your Business is Dying
shpigford
178
21k
Visualization
eitanlees
139
14k
Designing for humans not robots
tammielis
247
25k
The Mythical Team-Month
searls
217
43k
Designing the Hi-DPI Web
ddemaree
276
34k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
How GitHub (no longer) Works
holman
305
140k
Embracing the Ebb and Flow
colly
81
4.3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Unsuck your backbone
ammeep
666
57k
For a Future-Friendly Web
brad_frost
173
9.2k
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