Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Constructing Modern UIs with SVG

timgthomas
June 14, 2018
Technology
0
100

Constructing Modern UIs with SVG

timgthomas

June 14, 2018
Tweet

More Decks by timgthomas

See All by timgthomas
Living Style Guides: Bringing Designers and Developers Together
timgthomas
0
72
Icons and the Web: Symbols of the Modern Age
timgthomas
0
68
Browser Invasion: Desktop Apps and the Web
timgthomas
0
78
Mind the Gap: Bringing Designers and Developers Together
timgthomas
0
58
Zero to App Store: A Hybrid App’s Tale
timgthomas
1
87
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
69
Ember ATX: Ember.Evented
timgthomas
0
59
Ember ATX: Components
timgthomas
0
67
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
250

Other Decks in Technology

See All in Technology
書籍を書きました。 そう、VS Codeで。
takumanakagame
4
4.6k
Oracle Transaction Manager for Microservices Free 22.3 製品概要
oracle4engineer
PRO
5
110
Google Cloud Workflows: API automation, patterns and best practices
glaforge
0
100
MoT/コネヒト/Kanmu が語るプロダクト開発xデータ分析 - 分析から機械学習システムの開発まで一人で複数ロールを担う大変さ
masatakashiwagi
3
770
re:Inventの完全招待制イベント Building a Roadmap to SaaSについて / Building a Roadmap to SaaS an invitation only event at reinvent
yayoi_dd
0
140
Oktaの管理者権限を適切に移譲してみた
shimosyan
2
270
Oracle Cloud Infrastructure：2023年1月度サービス・アップデート
oracle4engineer
PRO
0
170
あつめたデータをどう扱うか
skrb
2
160
IoT から見る AWS re:invent 2022 ― AWSのIoTの歴史を添えて/Point of view the AWS re:invent 2022 with IoT - with a history of IoT in AWS
ma2shita
0
280
AI Services 概要 / AI Services overview
oracle4engineer
PRO
0
170
「一通りできるようになった」その先の話
hitomi___kt
0
130
NGINXENG JP#2 - 2-NGINXの動作の詳細
hiropo20
1
140

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
12
1.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
29k
A Philosophy of Restraint
colly
193
15k
Designing for Performance
lara
600
65k
Bash Introduction
62gerente
601
210k
Making the Leap to Tech Lead
cromwellryan
117
7.7k
Producing Creativity
orderedlist
PRO
335
38k
In The Pink: A Labor of Love
frogandcode
132
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
10
1.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Teambox: Starting and Learning
jrom
124
7.9k
Building Your Own Lightsaber
phodgson
96
4.9k

Transcript

  1. Constructing Modern UIs with SVG Tim G. Thomas • @timgthomas

  2. Today Basics Integration Advanced SVG

  3. Basics

  4. SVG Scalable Vector Graphics

  5. SVG Scalable Vector Graphics

  6. SVG Scalable Vector Graphics

  7. SVG Scalable Vector Graphics

  8. SVG Scalable Vector Graphics

  9. SVG Scalable Vector Graphics

  10. Why SVG? Non-flow-based layout Visual effects Why not?

  11. Uses for SVG Glyphs + Icons Visualizations Components Full Apps

  12. Creating SVG By hand Apps Procedurally Libraries

  13. Creating SVG By hand Apps Procedurally Libraries <svg> <rect />

    </svg>

  14. Creating SVG By hand Apps Procedurally Libraries

  15. Creating SVG By hand Apps Procedurally Libraries

  16. Creating SVG By hand Apps Procedurally Libraries <svg> {{#each shape

    as |d|}} <path d={{d}} /> {{/each}} </svg>

  17. Creating SVG By hand Apps Procedurally Libraries svgjs.com snapsvg.io d3js.org

  18. Integration

  19. Integration Inline Reference <use>

  20. Integrating SVG Inline <body> <svg> <rect x="0" y="0" width="100" height="100"

    /> </svg> </body>

  21. Integrating SVG Inline with React render() { return ( <div>

    <Header /> <svg> <path d={pathData} /> </svg> </div> ); },

  22. Integrating SVG References .logo { background-image: url('logo.svg'); }

  23. Integrating SVG <use> <svg> <use href="glyphs.svg#favorite"></use> </svg> <!-- glyphs.svg -->

    <svg> <symbol id="favorite"> <path /> </symbol> </svg>

  24. Styling SVG Attributes CSS

  25. Styling SVG Attributes <rect />

  26. Styling SVG Attributes <rect fill="#6495ed" />

  27. Styling SVG Attributes <rect fill="#6495ed" stroke="#ff1493" />

  28. Styling SVG Attributes <rect fill="#6495ed" stroke="#ff1493" rx="10" ry="10" />

  29. Styling SVG CSS <rect rx="10" ry="10" /> rect { fill:

    #6495ed; stroke: #ff1493; }

  30. Advanced SVG

  31. Advanced SVG Blend Modes Line Drawing Symbols Clipping Filters A

    Real-World App

  32. Advanced SVG Blend Modes

  33. Advanced SVG Blend Modes

  34. Advanced SVG Blend Modes .tint { mix-blend-mode: color; }

  35. Advanced SVG Blend Modes Branding Photo Filters UI Tricks

  36. Advanced SVG Line Drawing

  37. Advanced SVG Line Drawing

  38. Advanced SVG Line Drawing Create Path Stroke with Dash Add

    Dash Offset+Width Animate!

  39. Advanced SVG Line Drawing Create Path Stroke with Dash Add

    Dash Offset+With Animate!

  40. Advanced SVG Line Drawing Create Path Stroke with Dash Add

    Dash Offset+Width Animate!

  41. Advanced SVG Line Drawing Create Path Stroke with Dash Add

    Dash Offset+Width Animate!

  42. Advanced SVG Line Drawing Create Path Stroke with Dash Add

    Dash Offset+Width Animate!

  43. Advanced SVG Line Drawing Create Path Stroke with Dash Add

    Dash Offset+Width Animate!

  44. Advanced SVG Line Drawing path { stroke-dasharray: 750, 1000; }

    @keyframes handwriting { 0% { stroke-offset: 0%; } 100% { stroke-offset: 100%; } }

  45. Advanced SVG Line Drawing path { stroke-dasharray: 750, 1000; }

    @keyframes handwriting { 0% { stroke-offset: 0%; } 100% { stroke-offset: 100%; } }

  46. Advanced SVG Line Drawing Use Sparingly!

  47. Advanced SVG Symbols

  48. Advanced SVG Symbols <symbol id="doc"> <path d="..." /> </symbol>

  49. Advanced SVG Symbols <symbol id="doc"> <path d="..." /> </symbol> <use

    href="#doc" />

  50. Advanced SVG Symbols <symbol id="doc"> <path d="..." /> </symbol> <use

    href="#doc" style="fill: #6495ed" /> <use href="#doc" style="fill: #ff1493" />

  51. Advanced SVG Symbols Reduce Duplication Composition Glyphs/Icons

  52. Advanced SVG Clipping + Masking

  53. Advanced SVG Clipping + Masking <defs> <clipPath id="mask"> </clipPath> </defs>

  54. Advanced SVG Clipping + Masking <defs> <clipPath id="mask"> <circle cx="128"

    cy="128" r="128" /> </clipPath> </defs>

  55. 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" />

  56. 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)" />

  57. Advanced SVG Clipping + Masking Use sparingly!

  58. Advanced SVG Filters

  59. Advanced SVG Filters <filter id="filter"> </filter> <text style="filter: url(#filter)">NDC</text>

  60. Advanced SVG Filters <filter id="filter"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"

    /> </filter> <text style="filter: url(#filter)">NDC</text>

  61. 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>

  62. 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>

  63. 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>

  64. 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>

  65. Advanced SVG A Real-World App

  66. Custom Shapes Blend Modes Clip Paths

  67. Custom Shapes Blend Modes Clip Paths

  68. Further Research developer.mozilla.org/docs/Web/SVG css-tricks.com/mega-list-svg-information bit.ly/ndcoslo-svg

  69. Thanks for coming! @timgthomas • timgthomas.com