about SVG features

1. 2011 8 21

2. 2011 8 21

3. 2011 8 21

4. 2011 8 21

5. 2011 8 21

6. 2011 8 21

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. <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. <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. transform="scale(1.5) rotate(45)"
2011 8 21

11. 2011 8 21

12. 2011 8 21

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

15. 2011 8 21

16. 2011 8 21

17. 2011 8 21

18. 2011 8 21

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

26. 2011 8 21

27. 2011 8 21

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

36. 2011 8 21

37. path:hover{
fill-opacity:0.5;
}
@media(max-width:400px){
path{
fill:#36f;
stroke:#000;
stroke-width:6;
}
}
2011 8 21

38. path:hover{
fill-opacity:0.5;
}
@media(max-width:400px){
path{
fill:#36f;
stroke:#000;
stroke-width:6;
}
}
2011 8 21

39. path:hover{
fill-opacity:0.5;
}
@media(max-width:400px){
path{
fill:#36f;
stroke:#000;
stroke-width:6;
}
}
2011 8 21

40. 2011 8 21

41. 2011 8 21

42. 2011 8 21

43. 2011 8 21

44. 2011 8 21

45. 2011 8 21

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

56. 2011 8 21

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

59. 2011 8 21

60. 2011 8 21

61. 2011 8 21

62. 2011 8 21

63. in="sourceAplha"
2011 8 21

64. <feGaussianBlur/>
2011 8 21

65. <feOffet/>
2011 8 21

66. in="sourceGraphic"
2011 8 21

67. <feMerge/>
2011 8 21

68. 2011 8 21

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

77. 2011 8 21

78. 2011 8 21

79. 2011 8 21

80. 2011 8 21

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

88. 2011 8 21

89. 2011 8 21

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

92. 2011 8 21

93. 2011 8 21

94. 2011 8 21

95. <body>
<h1>img </h1>
<img src="image.svg" alt="">
</body>
2011 8 21

96. <body>
<h1>img </h1>
<img src="image.svg" alt="">
</body>
2011 8 21

97. 2011 8 21

98. <body>
<h1>img </h1>
<svg width="300" height="300">
<path d="..." />
<path d="..." />
<path d="..." />
</svg>
</body>
2011 8 21

99. <body>
<h1>img </h1>
<svg width="300" height="300">
<path d="..." />
<path d="..." />
<path d="..." />
</svg>
</body>
2011 8 21

100. 2011 8 21

101. 2011 8 21

102. 2011 8 21

103. 2011 8 21

104. 2011 8 21

105. 2011 8 21

106. 2011 8 21

107. 2011 8 21

108. 2011 8 21

109. 2011 8 21