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
James Coleman
May 20, 2014
Programming
1
890
SVG
Using SVG as a main component of your phonegap/cordova application.
James Coleman
May 20, 2014
Tweet
Share
More Decks by James Coleman
See All by James Coleman
Managing CSS in a Sate of Flux
ojame
1
92
The ABCs of Web Typography
ojame
1
330
Other Decks in Programming
See All in Programming
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
250
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
9
1k
qmuntal/stateless のススメ
sgash708
0
120
Server Driven Compose With Firebase
skydoves
0
400
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
9
4.1k
CSC509 Lecture 08
javiergs
PRO
0
110
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
3.1k
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
Identifying User Idenity
moro
6
7.9k
Tuning GraphQL on Rails
pyama86
2
1k
CSC305 Lecture 13
javiergs
PRO
0
130
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Faster Mobile Websites
deanohume
304
30k
Unsuck your backbone
ammeep
668
57k
Building Adaptive Systems
keathley
38
2.2k
We Have a Design System, Now What?
morganepeng
50
7.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Docker and Python
trallard
40
3.1k
4 Signs Your Business is Dying
shpigford
180
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Documentation Writing (for coders)
carmenintech
65
4.4k
Gamification - CAS2011
davidbonilla
80
5k
Transcript
James Coleman UI Developer
ianfeather.co.uk
SVG
<svg width="200" height="200" xmlns="http://www.w3.org/ 2000/svg" version="1.1"> <circle fill="black" cx="100" cy="100"
r="100"/> </svg> SVG Structure
developer.mozilla.org/en-US/docs/Web/SVG/Element
<svg width="400" height="200" xmlns="http://www.w3.org/ 2000/svg" version="1.1"> <g fill="#69BFA7" stroke="#3F8C70" stroke-
width="20"> <circle cx="100" cy="100" r="80"/> <circle fill="#91D996" cx="300" cy="100" r="80"/> </g> </svg> Group tag
<svg width="600" height="200" xmlns="http://www.w3.org/ 2000/svg" version="1.1"> <g fill="#69BFA7" stroke="#3F8C70" stroke-
width="20"> <circle cx="100" cy="100" r="80"/> <circle fill="#91D996" cx="300" cy="100" r="80"/> </g> ! <defs> <g fill="#F27166" stroke="#86403a" stroke- width="20"> <circle cx="100" cy="100" r="80"/> <circle fill="#BF584E" cx="300" cy="100" r="80"/> </g> </defs> </svg> Definition tag
<svg width="600" height="400" xmlns="http://www.w3.org/ 2000/svg" version="1.1"> <g fill="#69BFA7" stroke="#3F8C70" stroke-
width="20"> <circle cx="100" cy="100" r="80"/> <circle fill="#91D996" cx="300" cy="100" r="80"/> </g> ! <defs> <g fill="#F27166" stroke="#86403a" stroke- width="20" id="redCircles"> <circle cx="100" cy="100" r="80"/> <circle fill="#BF584E" cx="300" cy="100" r="80"/> </g> </defs> ! <use xlink:href="#redCircles" x="200" y="200"/> </svg> Use tag
<svg width="600" height="400" xmlns="http://www.w3.org/ 2000/svg" version="1.1" viewBox="0 0 300 200">
<g fill="#69BFA7" stroke="#3F8C70" stroke- width="20"> <circle cx="100" cy="100" r="80"/> <circle fill="#91D996" cx="300" cy="100" r="80"/> </g> ! <defs> <g fill="#F27166" stroke="#86403a" stroke- width="20" id="redCircles"> <circle cx="100" cy="100" r="80"/> <circle fill="#BF584E" cx="300" cy="100" r="80"/> </g> </defs> ! <use xlink:href="#redCircles" x="200" y="200"/> </svg> viewBox tag
None
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="596px" height="380px" viewBox="0 0 596
380" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <title>Some circles</title> <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="circlesvgo" sketch:type="MSLayerGroup" transform="translate(10.000000, 10.000000)" stroke- width="20"> <g id="Group" stroke="#3F8C70" sketch:type="MSShapeGroup"> <circle id="Oval" fill="#69BFA7" cx="80" cy="80" r="80"></circle> <circle id="Oval" fill="#91D996" cx="280" cy="80" r="80"></circle> </g> <g id="redCircles" transform="translate(216.000000, 200.000000)" stroke="#86403A" sketch:type="MSShapeGroup"> <circle id="Oval" fill="#F27166" cx="80" cy="80" r="80"></circle> <circle id="Oval" fill="#BF584E" cx="280" cy="80" r="80"></circle> </g> </g> </g> </svg> Sketch export
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="596px" height="380px" viewBox="0 0 596
380" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <title>Some circles</title> <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="circlesvgo" sketch:type="MSLayerGroup" transform="translate(10.000000, 10.000000)" stroke- width="20"> <g id="Group" stroke="#3F8C70" sketch:type="MSShapeGroup"> <circle id="Oval" fill="#69BFA7" cx="80" cy="80" r="80"></circle> <circle id="Oval" fill="#91D996" cx="280" cy="80" r="80"></circle> </g> <g id="redCircles" transform="translate(216.000000, 200.000000)" stroke="#86403A" sketch:type="MSShapeGroup"> <circle id="Oval" fill="#F27166" cx="80" cy="80" r="80"></circle> <circle id="Oval" fill="#BF584E" cx="280" cy="80" r="80"></circle> </g> </g> </g> </svg> Sketch export
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export
Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/ xlink" x="0px" y="0px" width="600px" height="400px" viewBox="0 0 600 400" enable-background="new 0 0 600 400" xml:space="preserve"> <g> <circle fill="#69BFA7" stroke="#3F8C70" stroke-width="20" cx="100" cy="100" r="80"/> <circle fill="#91D996" stroke="#3F8C70" stroke-width="20" cx="300" cy="100" r="80"/> </g> <g> <g id="redCircles"> <circle fill="#F27166" stroke="#86403A" stroke-width="20" cx="300" cy="300" r="80"/> <circle fill="#BF584E" stroke="#86403A" stroke-width="20" cx="500" cy="300" r="80"/> </g> </g> </svg> Illustrator export
github.com/svg/svgo
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400"> <g stroke="#3F8C70"
stroke-width="20"> <circle fill="#69BFA7" cx="100" cy="100" r="80"/> <circle fill="#91D996" cx="300" cy="100" r="80"/> </g> <g stroke="#86403A" stroke-width="20"> <circle fill="#F27166" cx="300" cy="300" r="80"/> <circle fill="#BF584E" cx="500" cy="300" r="80"/> </g> </svg> ! Optimised SVG using SVGO
SVGO Usage
SVGO Usage
SVGO Usage
github.com/svg/svgo
SVGO Usage
None
Other music festival apps
Inline or background image?
<svg width="300" height="600" xmlns="http://www.w3.org/2000/ svg" version="1.1"> <g fill="#69BFA7" stroke="#3F8C70" stroke-width="10">
<circle cx="50" cy="50" r="40"/> <circle fill="#91D996" cx="150" cy="50" r="40"/> </g> ! <defs> <g fill="#F27166" stroke="#86403a" stroke-width="10" id="redCircles"> <circle cx="50" cy="50" r="40"/> <circle fill="#BF584E" cx="150" cy="50" r="40"/> </g> </defs> ! <use xlink:href="#redCircles" x="0" y="150"/> </svg> iOS Inline issue
SVG and MathML elements must either have a start tag
and an end tag, or a start tag that is marked as self-closing, in which case they must not have an end tag.
<svg width="300" height="600" xmlns="http://www.w3.org/2000/ svg" version="1.1"> <g fill="#69BFA7" stroke="#3F8C70" stroke-width="10">
<circle cx="50" cy="50" r="40"></circle> <circle fill="#91D996" cx="150" cy="50" r="40"></ circle> </g> ! <defs> <g fill="#F27166" stroke="#86403a" stroke-width="10" id="redCircles"> <circle cx="50" cy="50" r="40"></circle> <circle fill="#BF584E" cx="150" cy="50" r="40"></ circle> </g> </defs> ! <use xlink:href="#redCircles" x="0" y="150"></use> </svg> iOS Inline issue
<svg width="300" height="600" xmlns="http://www.w3.org/2000/ svg" version="1.1"> <g fill="#69BFA7" stroke="#3F8C70" stroke-width="10">
<circle cx="50" cy="50" r="40"> <circle fill="#91D996" cx="150" cy="50" r="40"></ circle> </circle> </g> ! <defs> <g fill="#F27166" stroke="#86403a" stroke-width="10" id="redCircles"> <circle cx="50" cy="50" r="40"> <circle fill="#BF584E" cx="150" cy="50" r="40"></circle> </circle> </g> </defs> ! <use xlink:href="#redCircles" x="0" y="150"></use> </svg> iOS Inline issue
Inline has no size restrictions Up to 5 decoded megapixels
Inline has no size restrictions Up to 5 decoded megapixels
Inline or background image?
SVG in Sketch
SVG Export
PDF Export
Illustrator SVG Export
100% width
Filling the space
SVG Map result
Optimisation
Separate DOM SVG nodes vs. Defs
Don’t use 3D transforms
Don’t Base64 encode for Android
Grouped elements result in a 7% faster paint
SVG is painted up to 11% faster with Use elements
Optimised (a little)
The bad
3.0
Use canvas if you’re rendering all of the nodes, ever.
None
The great
Resolution independence past @2x
Mutable
Animate
Thanks!