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 Reality
Search
Sebastiaan Deckers
November 19, 2014
Programming
5
140
SVG Reality
Talk at CSSConf.asia 2014
http://2014.cssconf.asia/
Sebastiaan Deckers
November 19, 2014
Tweet
Share
More Decks by Sebastiaan Deckers
See All by Sebastiaan Deckers
Commons Host: Building a CDN for the rest of the world
sebdeckers
1
130
About Sebastiaan
sebdeckers
0
140
Frontend 100
sebdeckers
1
480
Frontend 101
sebdeckers
4
540
Frontend 102
sebdeckers
3
490
Frontend 103
sebdeckers
2
480
Frontend Testing
sebdeckers
3
330
Grunt: The JavaScript Task Runner
sebdeckers
8
400
Other Decks in Programming
See All in Programming
Identifying User Idenity
moro
6
7.9k
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
150
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
110
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
210
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.6k
Golang と Erlang
taiyow
8
1.9k
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
9
1k
C#/.NETのこれまでのふりかえり
tomokusaba
1
160
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
370
VR HMDとしてのVision Pro+ゲーム開発について
yasei_no_otoko
0
100
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
334
57k
Statistics for Hackers
jakevdp
796
220k
Agile that works and the tools we love
rasmusluckow
327
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Code Review Best Practice
trishagee
64
17k
KATA
mclloyd
29
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Designing Experiences People Love
moore
138
23k
Happy Clients
brianwarren
97
6.7k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Transcript
REALITY SVG REALITY SVG SVG REALITY
1024×768 1024×768 1024×768
OMG×FML OMG×FML OMG×FML
FIT FIT FIT
HiDPI HiDPI HiDPI
LoDPI LoDPI LoDPI
STRETCH STRETCH STRETCH
ONE DIV?! ONE DIV?! ONE DIV?!
RUBE GOLDBERG CSS RUBE GOLDBERG CSS RUBE GOLDBERG CSS
SCALABLE VECTOR GRAPHICS SCALABLE VECTOR GRAPHICS SCALABLE VECTOR GRAPHICS
None
SEBASTIAAN DECKERS SEBASTIAAN DECKERS SEBASTIAAN DECKERS FRONT END DEVELOPER AT
COFOUNDERS.SG FRONT END DEVELOPER AT COFOUNDERS.SG FRONT END DEVELOPER AT COFOUNDERS.SG
FRONT END DEVS SG FRONT END DEVS SG FRONT END
DEVS SG
SVG vs CSS SVG vs CSS SVG vs CSS HiDPI
Animations Hardware Acceleration Blending Modes Responsive Media Queries Debugging Inspector Filters DOM API Scripting Colour Profiles
USAGE USAGE USAGE
Native support for inline <svg/>
CSS url(image.svg)
SVG FONTS DEPRECATED COMEBACK? SVG FONTS DEPRECATED COMEBACK? SVG FONTS
DEPRECATED COMEBACK?
SVG FRAGMENTS SVG FRAGMENTS SVG FRAGMENTS
USAGE SVG Building Blocks SVG Building Blocks SVG Building Blocks
= CSS 2.1 UNITS = CSS 2.1 UNITS UNITS =
CSS 2.1
BASIC SHAPES
Paths <path> Text based drawing instructions for line, arc, bezier
curve, quadratic curve, etc. Use an editor! Inkscape, Sketch, Illustrator
Embedded images <image> with xlink:href="foobar.{png,jpeg, gif,webp,svg}" or Base64 encoded
And more... Groups, Patterns, Transformations, References, ...
SVG DOM SVG DOM SVG DOM
XMLNS XMLNS XMLNS svgns = “http://www.w3.org/2000/svg” document.createElementNS(svgns, …) document.setAttributeNS document.getElementsByTagNameNS
API WRAPPERS API WRAPPERS API WRAPPERS
WEB COMPONENTS WEB COMPONENTS WEB COMPONENTS document.registerElement('my-shape', { extends: 'circle',
prototype: Object.create( SVGCircleElement.prototype, {/*...*/} ) })
CSS & SVG CSS & SVG CSS & SVG
INLINE IN SVG CASCADING IN SVG CASCADING IN HTML EXTERNAL
FROM SVG INLINE IN SVG CASCADING IN SVG CASCADING IN HTML EXTERNAL FROM SVG
Tips & Tricks Tips & Tricks Tips & Tricks
viewBox min-x min-y width height
preserveAspectRatio preserveAspectRatio POOR MAN’S BG-SIZE preserveAspectRatio X/Y min/mid/max, slice/keep X/Y
min/mid/max, slice/keep X/Y min/mid/max, slice/keep POOR MAN’S BG-SIZE POOR MAN’S BG-SIZE
None
MAX SIZE MAX SIZE MAX SIZE Infinite resolution, but Maximum
±5 megapixels
SVGOptimizer SVGOptimizer SVGOptimizer also as {grunt,gulp}-svgmin also as {grunt,gulp}-svgmin also
as {grunt,gulp}-svgmin
BUT WAIT... BUT WAIT... BUT WAIT...
ANIMATION SMIL & JS ANIMATION SMIL & JS ANIMATION SMIL
& JS
SVG 1.2 SVG 2 SVG 1.2 SVG 2 SVG 1.2
SVG 2
THANK YOU THANK YOU THANK YOU