Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dive Into SVG

6,144 views

Published on

about SVG features

Published in: Technology, Art & Photos
  • /.DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... /.DOWNLOAD PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... /.DOWNLOAD EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... /.DOWNLOAD doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... /.DOWNLOAD PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... /.DOWNLOAD EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... /.DOWNLOAD doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×