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
140
About Sebastiaan
sebdeckers
0
150
Frontend 100
sebdeckers
1
490
Frontend 101
sebdeckers
4
550
Frontend 102
sebdeckers
3
490
Frontend 103
sebdeckers
2
490
Frontend Testing
sebdeckers
3
340
Grunt: The JavaScript Task Runner
sebdeckers
8
410
Other Decks in Programming
See All in Programming
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
生成AIで日々のエラー調査を進めたい
yuyaabo
0
620
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
290
CursorはMCPを使った方が良いぞ
taigakono
0
150
Select API from Kotlin Coroutine
jmatsu
1
180
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
130
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
1
130
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
270
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
320
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
130
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
3
760
Effect の双対、Coeffect
yukikurage
5
1.4k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Why Our Code Smells
bkeepers
PRO
337
57k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Automating Front-end Workflow
addyosmani
1370
200k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Adaptive Systems
keathley
43
2.6k
Building an army of robots
kneath
306
45k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Documentation Writing (for coders)
carmenintech
71
4.9k
Docker and Python
trallard
44
3.4k
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