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
150
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
140
About Sebastiaan
sebdeckers
0
150
Frontend 100
sebdeckers
1
500
Frontend 101
sebdeckers
4
550
Frontend 102
sebdeckers
3
500
Frontend 103
sebdeckers
2
490
Frontend Testing
sebdeckers
3
350
Grunt: The JavaScript Task Runner
sebdeckers
8
410
Other Decks in Programming
See All in Programming
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.4k
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
2.6k
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
120
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
220
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.2k
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
1
170
Server Less Code More - コードを書かない時代に生きるサーバーレスデザイン / server-less-code-more
gawa
5
1.9k
Current States of Java Web Frameworks at JCConf 2025
kishida
0
520
CSC305 Lecture 04
javiergs
PRO
0
230
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
670
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
実践AIチャットボットUI実装入門
syumai
7
2.4k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Become a Pro
speakerdeck
PRO
29
5.5k
Building an army of robots
kneath
306
46k
Facilitating Awesome Meetings
lara
56
6.6k
Why Our Code Smells
bkeepers
PRO
339
57k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Context Engineering - Making Every Token Count
addyosmani
3
150
For a Future-Friendly Web
brad_frost
180
9.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
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