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

SVG

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

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

Other Decks in Programming

See All in Programming
Aa97a6ad2c4c8422f5580f4f9d5b5744?s=48 dulltz
0
520
3742ae4f74e584aed4f41c405232c3bb?s=48 yaamaa
0
440
Cb88f765dd38cd942c39aacb5abbea06?s=48 ufoo68
1
180
15bd11f2c2c5e3dd854153d03a102b0d?s=48 standfm
0
250
5c588fdfe782f92fa6b081903edd82bb?s=48 hr01
0
1.6k
6ef7914944df6af99a2ca81e98087332?s=48 taoshotaro
1
370
4782d92d3deeb4ab527ba6f867bf07c3?s=48 mizdra
7
4.9k
832ece085bfe2c7c5b0ed6be62d7e675?s=48 steipete
PRO
2
140
9b8f304ce234a4a8e38708247ffd68e0?s=48 rshindo
2
300
1623dd1adf096ba35ba33727d933e14c?s=48 nbkouhou
0
950
8c870088e1f657062e661fdaf5ce6ec3?s=48 nauleyco
0
210
99223605731d1a4d0a6db40bb7c21126?s=48 junmikai
0
290

Featured

See All Featured
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
165
19k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
220
15k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
168
7.2k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
258
24k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
27
1.9k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
103
5k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
283
47k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.5k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
8
430
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
368
42k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
52
4.1k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
338
16k

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!