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
99
Ember ATX: Components
timgthomas
0
74
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
300
Other Decks in Technology
See All in Technology
AWSを始めた頃に陥りがちなポイントをまとめてみた
oshanqq
1
3.4k
ビジネスとエンジニアリングを繋ぐプロダクトを中心とした組織づくりの実践
sansantech
PRO
1
170
Agile in Automotive Industry, puzzles and lights.
hiranabe
2
310
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
190
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
550
2024年版 運用者たちのLLM
nwiizo
3
540
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
0
13k
Evolving DevOps Teams and Flexible Organizational Culture
kakehashi
1
250
難しいから面白い!医薬品×在庫管理ドメインの複雑性と向き合い、プロダクトの成長を支えるための取り組み / Initiatives to Support Product Growth
kakehashi
2
190
自社サービスのための独自リリース版Redmine「RedMica」の取り組み
vividtone
0
1.1k
不動産売買取引におけるAIの可能性とプロダクトでのAI活用
zabio3
0
210
PDF Viewer作成の今までとこれから
hunachi
0
270
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
28
1.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Debugging Ruby Performance
tmm1
72
12k
Fireside Chat
paigeccino
31
2.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
How to name files
jennybc
75
98k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
27
8.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
34
1.7k
A Tale of Four Properties
chriscoyier
155
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
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