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
SVG
Search
Rogerio Angeliski
September 21, 2017
Programming
0
130
SVG
https://youtu.be/7NcnVEF5cmE
Rogerio Angeliski
September 21, 2017
Tweet
Share
More Decks by Rogerio Angeliski
See All by Rogerio Angeliski
Processando bilhões de eventos - Aprendizados de uma Black Friday em produção
angeliski
0
98
Workshop de Feedback
angeliski
0
27
O mantra da produtividade
angeliski
0
53
Let's talk about PWA
angeliski
1
110
Other Decks in Programming
See All in Programming
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
130
CSC509 Lecture 04
javiergs
PRO
0
300
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
CSC305 Lecture 05
javiergs
PRO
0
210
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
440
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
830
CSC305 Lecture 04
javiergs
PRO
0
270
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
1k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
230
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
The Invisible Side of Design
smashingmag
302
51k
How to Ace a Technical Interview
jacobian
280
24k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Mobile First: as difficult as doing things right
swwweet
224
10k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Transcript
SVG SIMPLE - VALUABLE - GRATIFYING
SCALABLE VECTOR GRAPHICS XML & Two-Dimensional Graph
WHY? • Colorful & Detailed • Interactive & Stylish with
css • Responsive • Advanced Animations • Gzip • Cross-Browser Suport
WHEN NOT TO USE? Complex images & Images no vector
HOW USE? • Tag IMG • Background-image • iframe/object/embed •
Data URIs • Inline SVG
Cartesian plane 50 50
Structure <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- draw! --> </svg>
Rect <svg width="500" height="200"> <rect x="20" y="10" width="100" height="50" stroke="#000"
fill="blue" /> </svg>
Circle <svg width="500" height="200"> <circle cx="100" cy="100" r="40" stroke="#000" fill="blue"
/> </svg>
Ellipse <svg width="500" height="200"> <ellipse cx="100" cy="60" rx="100" ry="50" fill="blue"
/> </svg>
Line <svg width="500" height="200"> <line x1="20" y1="10" x2="180" y2="60" stroke="blue"
stroke-width="4"/> </svg>
Polyline <svg width="500" height="200"> <polyline points="0,40 40,40 40,80 80,80 80,120
120,120 120,160" fill="white" stroke="blue" stroke-width="4" /> </svg>
Polygon <svg width="500" height="200"> <polygon points="50,5 100,5 125,30 125,80 100,105
50,105 25,80 25,30" fill="blue" stroke="#000" stroke-width="4"/> </svg>
Path <svg width="500" height="200"> <path d="M250,10 L200,100 L300,100z" fill="none" stroke="blue"
stroke-width="4"/> </svg>
Animation - CSS (https://codepen.io/angeliski/pen/WZwLzZ) - Keyframes - Animation CSS3 -
SMIL (https://codepen.io/angeliski/pen/rGePVg) - Embedded
JS Manipulation - Exemplo: https://codepen.io/angeliski/pen/xXVMOG - D3.js - Snap.svg -
Greensock
Getting Started - Download SVG (Icomoon, SVG Cuts, https://github.com/willianjusten/awesome-svg) -
Inkscape, Sketch e Illustrator - Go!
Fim @angeliski_ https://github.com/angeliski https://angeliski.com.br