Dive Into SVG

5,741 views
5,647 views

Published on

about SVG features

Published in: Technology, Art & Photos
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,741
On SlideShare
0
From Embeds
0
Number of Embeds
537
Actions
Shares
0
Downloads
53
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Dive Into SVG

  1. 1. 2011 8 21
  2. 2. 2011 8 21
  3. 3. 2011 8 21
  4. 4. 2011 8 21
  5. 5. 2011 8 21
  6. 6. 2011 8 21
  7. 7. <path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path d="..." transform="skewX(45)"/>2011 8 21
  8. 8. <path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path d="..." transform="skewX(45)"/>2011 8 21
  9. 9. <path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path d="..." transform="skewX(45)"/>2011 8 21
  10. 10. transform="scale(1.5) rotate(45)"2011 8 21
  11. 11. 2011 8 21
  12. 12. 2011 8 21
  13. 13. selector { -webkit-transform : rotate(45deg); -moz-transform : rotate(45deg); -ms-transform : rotate(45deg); -o-transform : rotate(45deg); transform : rotate(45deg); }2011 8 21
  14. 14. 2011 8 21
  15. 15. 2011 8 21
  16. 16. 2011 8 21
  17. 17. 2011 8 21
  18. 18. 2011 8 21
  19. 19. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>2011 8 21
  20. 20. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>2011 8 21
  21. 21. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>2011 8 21
  22. 22. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>2011 8 21
  23. 23. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>2011 8 21
  24. 24. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>2011 8 21
  25. 25. 2011 8 21
  26. 26. 2011 8 21
  27. 27. 2011 8 21
  28. 28. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg>2011 8 21
  29. 29. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg>2011 8 21
  30. 30. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg>2011 8 21
  31. 31. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg>2011 8 21
  32. 32. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg>2011 8 21
  33. 33. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg>2011 8 21
  34. 34. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg>2011 8 21
  35. 35. 2011 8 21
  36. 36. 2011 8 21
  37. 37. path:hover{ fill-opacity:0.5; } @media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; } }2011 8 21
  38. 38. path:hover{ fill-opacity:0.5; } @media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; } }2011 8 21
  39. 39. path:hover{ fill-opacity:0.5; } @media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; } }2011 8 21
  40. 40. 2011 8 21
  41. 41. 2011 8 21
  42. 42. 2011 8 21
  43. 43. 2011 8 21
  44. 44. 2011 8 21
  45. 45. 2011 8 21
  46. 46. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
  47. 47. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
  48. 48. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
  49. 49. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
  50. 50. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
  51. 51. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
  52. 52. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
  53. 53. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
  54. 54. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
  55. 55. 2011 8 21
  56. 56. 2011 8 21
  57. 57. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
  58. 58. 2011 8 21
  59. 59. 2011 8 21
  60. 60. 2011 8 21
  61. 61. 2011 8 21
  62. 62. 2011 8 21
  63. 63. in="sourceAplha"2011 8 21
  64. 64. <feGaussianBlur/>2011 8 21
  65. 65. <feOffet/>2011 8 21
  66. 66. in="sourceGraphic"2011 8 21
  67. 67. <feMerge/>2011 8 21
  68. 68. 2011 8 21
  69. 69. <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5" result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter>2011 8 21
  70. 70. <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5" result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter>2011 8 21
  71. 71. <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5" result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter>2011 8 21
  72. 72. <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5" result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter>2011 8 21
  73. 73. <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5" result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter>2011 8 21
  74. 74. <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5" result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter>2011 8 21
  75. 75. <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5" result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter>2011 8 21
  76. 76. 2011 8 21
  77. 77. 2011 8 21
  78. 78. 2011 8 21
  79. 79. 2011 8 21
  80. 80. 2011 8 21
  81. 81. <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/>2011 8 21
  82. 82. <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/>2011 8 21
  83. 83. <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/>2011 8 21
  84. 84. <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/>2011 8 21
  85. 85. <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/>2011 8 21
  86. 86. <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/>2011 8 21
  87. 87. 2011 8 21
  88. 88. 2011 8 21
  89. 89. 2011 8 21
  90. 90. <svg xmlns="http://www.w3.org/2000/svg"> <g id="sample" ...> <path d="..."/> </g> <script type="application/ecmascript"> document.querySelector("#sample").addEventListener("click", function(){ this.setAttribute("fill","red"); alert("Clicked !!"); }, false); </script> </svg>2011 8 21
  91. 91. 2011 8 21
  92. 92. 2011 8 21
  93. 93. 2011 8 21
  94. 94. 2011 8 21
  95. 95. <body> <h1>img </h1> <img src="image.svg" alt=""> </body>2011 8 21
  96. 96. <body> <h1>img </h1> <img src="image.svg" alt=""> </body>2011 8 21
  97. 97. 2011 8 21
  98. 98. <body> <h1>img </h1> <svg width="300" height="300"> <path d="..." /> <path d="..." /> <path d="..." /> </svg> </body>2011 8 21
  99. 99. <body> <h1>img </h1> <svg width="300" height="300"> <path d="..." /> <path d="..." /> <path d="..." /> </svg> </body>2011 8 21
  100. 100. 2011 8 21
  101. 101. 2011 8 21
  102. 102. 2011 8 21
  103. 103. 2011 8 21
  104. 104. 2011 8 21
  105. 105. 2011 8 21
  106. 106. 2011 8 21
  107. 107. 2011 8 21
  108. 108. 2011 8 21
  109. 109. 2011 8 21

×