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
880
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
320
Other Decks in Programming
See All in Programming
Rails 8 Frontend: 10 commandments & 7 deadly sins in 2025
yshmarov
1
590
GraphQLとGigaViewer for Apps
numeroanddev
4
880
dbt-ga4パッケージを実業務に導入してみた話
t_tokumaru_feedcorp
0
110
Cancel Next.js Page Navigation: Full Throttle
ypresto
1
110
C#および.NETに対する誤解をひも解く
ymd65536
0
220
Интеграционное тестирование: как приручить хаос
mariyasaygina
0
480
Kubernetes上でOracle_Databaseの運用を楽にするOraOperatorの紹介
nnaka2992
0
150
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
4
93k
Quarto Clean Theme
nicetak
0
220
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
190
[KR] Server Driven Compose With Firebase
skydoves
1
120
CDKを活用した 大規模コンテナ移行 プロジェクトの紹介
yoyoyopg
0
230
Featured
See All Featured
Designing Experiences People Love
moore
138
23k
Happy Clients
brianwarren
97
6.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
403
65k
The Invisible Customer
myddelton
119
13k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Docker and Python
trallard
40
3k
Being A Developer After 40
akosma
84
590k
Testing 201, or: Great Expectations
jmmastey
38
7k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
A better future with KSS
kneath
235
17k
BBQ
matthewcrist
84
9.2k
Bash Introduction
62gerente
608
210k
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!