Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SVG

81a211a67ee5824ed8d6ee4df08dfced?s=47 James Coleman
May 20, 2014
Programming
1
410

 SVG

Using SVG as a main component of your phonegap/cordova application.

81a211a67ee5824ed8d6ee4df08dfced?s=128

James Coleman

May 20, 2014
Tweet

More Decks by James Coleman

See All by James Coleman
81a211a67ee5824ed8d6ee4df08dfced?s=48 ojame
2
79
81a211a67ee5824ed8d6ee4df08dfced?s=48 ojame
1
83

Other Decks in Programming

See All in Programming
8834a79ab8e0412b2130131817be73d9?s=48 gtongy
0
420
13f3313ae1ec1d9b3ed76ccbd746291b?s=48 takuyaa
4
460
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
2
750
A1792748885fe8f2555d9c718ee7ae53?s=48 joytomo
1
520
Ba0adbbfa699d09f6ee7b4402e4dcf9f?s=48 kulkarniankita09
0
260
8847086af047cbf895ab3277b59529fe?s=48 andpad
0
320
5c588fdfe782f92fa6b081903edd82bb?s=48 hr01
1
4.1k
Ee398a67f5017cc2ad5c02d67d10e516?s=48 doyaaaaaken
1
290
Dee9a95c0e5483692c54cc5e60e8b09e?s=48 yusuke57
2
260
3179e6bb62dc91d29bb906ffef4fa2d4?s=48 marcoow
0
160
3cfad86677c5966ecfe9b81955fa3489?s=48 inoue2002
1
280
C766fe58109bc3750d333f4835ba43c2?s=48 emberconf
0
130

Featured

See All Featured
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
146
20k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
201
20k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
81
3.4k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
220
120k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
88
4k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
312
21k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
200
9.7k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
283
47k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
220
15k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
107
14k

Transcript

  1. James Coleman UI Developer

  2. ianfeather.co.uk

  3. SVG

  4. <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

  5. developer.mozilla.org/en-US/docs/Web/SVG/Element

  6. <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

  7. <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

  8. <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

  9. <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
  10. None

  11. <?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

  12. <?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

  13. <?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

  14. github.com/svg/svgo

  15. <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

  16. SVGO Usage

  17. SVGO Usage

  18. SVGO Usage

  19. github.com/svg/svgo

  20. SVGO Usage

  21. None

  22. Other music festival apps

  23. Inline or background image?

  24. <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

  25. 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.

  26. <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

  27. <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

  28. Inline has no size restrictions Up to 5 decoded megapixels

  29. Inline has no size restrictions Up to 5 decoded megapixels

  30. Inline or background image?

  31. SVG in Sketch

  32. SVG Export

  33. PDF Export

  34. Illustrator SVG Export

  35. 100% width

  36. Filling the space

  37. SVG Map result

  38. Optimisation

  39. Separate DOM SVG nodes vs. Defs

  40. Don’t use 3D transforms

  41. Don’t Base64 encode for Android

  42. Grouped elements result in a 7% faster paint

  43. SVG is painted up to 11% faster with Use elements

  44. Optimised (a little)

  45. The bad

  46. 3.0

  47. Use canvas if you’re rendering all of the nodes, ever.

  48. None

  49. The great

  50. Resolution independence past @2x

  51. Mutable

  52. Animate

  53. Thanks!