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
1k
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
110
The ABCs of Web Typography
ojame
1
450
Other Decks in Programming
See All in Programming
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
Rancher と Terraform
fufuhu
2
550
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
460
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
1.7k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
OSS開発者という働き方
andpad
5
1.7k
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
330
はじめてのMaterial3 Expressive
ym223
2
740
Featured
See All Featured
Designing for Performance
lara
610
69k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Agile that works and the tools we love
rasmusluckow
330
21k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
It's Worth the Effort
3n
187
28k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
A Modern Web Designer's Workflow
chriscoyier
696
190k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
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!