Save 37% off PRO during our Black Friday Sale! »

SVG

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

 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
80
81a211a67ee5824ed8d6ee4df08dfced?s=48 ojame
1
96

Other Decks in Programming

See All in Programming
75486cbfd37125f121cf4a6c5614601c?s=48 hideokamoto
PRO
2
1.1k
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
230
6b8e2101579190ad96e747e01c279898?s=48 pauloxnet
1
130
Bdd3fb3269e67bbc512f2530c409a926?s=48 tnishinaga
0
480
9a5d3eac40dd7a3a8d5373b22145fa88?s=48 sntree2mi8
0
110
Ef1341e83c896b7b1c5061674951aa2c?s=48 kumashun
0
1.3k
04df7340898eac3a0536d3b47c55501c?s=48 hirotokirimaru
0
140
587223eccffb4d264fd18bb9d54cd1d9?s=48 webdevwithmatt
0
280
8847086af047cbf895ab3277b59529fe?s=48 andpad
0
120
A10e41b0a61d59f2258d7f6172c33479?s=48 kaityo256
2
110
4047c64e3a1e2f81addd4ba675ddc451?s=48 zsmb
0
150
9b600b6d2f592d0944507e989770b9b3?s=48 issei126
0
120

Featured

See All Featured
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
58
3.9k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
149
12k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
3.9k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
67
4.6k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
16
950
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
342
16k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
337
30k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
332
36k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
118
27k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
660
55k
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
PRO
7
7.7k

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!