Xceedas

Xceedas
xceedas

Friday, 7 November 2014

SVG Overview in HTML5

 
This article will provide some light on a tag of HTML5 named SVG. SVG stands for “Scalable Vector Graphics”. It is basically used to define vector based graphics for the web. A very good advantage of the SVG is that if we zoom or resize an image then there is no loss of quality of the image. 

SVG always defined the graphics in XML format. Using SVG we can animate every attribute in the file.



We can use this SVG tag inside the HTML tag or outside. If we use SVG from outside then for linking this SVG page to a HTML page we use:
  1. <iframe src=”filename.SVG” width=” ” height=” ”>  
Now we move to doing some work on SVG.

1. How to make a rectangle using SVG 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
  3. <!--Scalable Vector Graphic-->  
  4. <svg version="1.1"   
  5.      xmlns="http://www.w3.org/2000/svg"  
  6.      xmlns:xlink="http://www.w3.org/1999/xlink"  
  7.      xmlns:ev="http://www.w3.org/2001/xml-events"       
  8.      baseProfile="full">  
  9.      <rect x="10" y="10" height="100" width="100"  
  10.           style="stroke:#333; stroke-width:4; fill:#0F0"/>  
  11. </svg>  
Output



So here we can see examples of a SVG in which there is no loss of image quality after zooming the image.

2. Make text using SVG 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
  3. <!--Scalable Vector Graphic-->  
  4. <svg version="1.1"   
  5.      xmlns="http://www.w3.org/2000/svg"  
  6.      xmlns:xlink="http://www.w3.org/1999/xlink"  
  7.      xmlns:ev="http://www.w3.org/2001/xml-events"       
  8.      baseProfile="full">  
  9.      <text x="20" y="40"  
  10.     style="stroke:none; fill:#000000;">  
  11.     sanjay kumar singh  
  12.     </text>  
  13. </svg>  
Output


Here we can also see that there is no loss of image quality after zooming the image.

INKSCAPE software 

Inkscape is a professional vector graphics editor for Windows, Mac OS X and Linux. It's free and open source. 



Download inkscape: 

http://sourceforge.net/projects/inkscape/files/latest/download?source=files 

Here I make a man using the inkscape tool.

Code that is automatically generated by the inkscape tool to only make the man:
  1. <SVG  
  2. xmlns:dc="http://purl.org/dc/elements/1.1/"  
  3. xmlns:cc="http://creativecommons.org/ns#"  
  4. xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"  
  5. xmlns:SVG="http://www.w3.org/2000/SVG"  
  6. xmlns="http://www.w3.org/2000/SVG"  
  7. xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"  
  8. xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"  
  9. width="744.09448819"  
  10. height="1052.3622047"  
  11. id="SVG3787"  
  12. version="1.1"  
  13. inkscape:version="0.48.5 r10040"  
  14. sodipodi:docname="drawing.SVG">  
  15. <defs  
  16. id="defs3789" />  
  17. <sodipodi:namedview  
  18. id="base"  
  19. pagecolor="#ffffff"  
  20. bordercolor="#666666"  
  21. borderopacity="1.0"  
  22. inkscape:pageopacity="0.0"  
  23. inkscape:pageshadow="2"  
  24. inkscape:zoom="0.35"  
  25. inkscape:cx="-70.714286"  
  26. inkscape:cy="520"  
  27. inkscape:document-units="px"  
  28. inkscape:current-layer="layer1"  
  29. showgrid="false"  
  30. inkscape:window-width="1366"  
  31. inkscape:window-height="705"  
  32. inkscape:window-x="-8"  
  33. inkscape:window-y="-8"  
  34. inkscape:window-maximized="1" />  
  35. <metadata  
  36. id="metadata3792">  
  37. <rdf:RDF>  
  38. <cc:Work  
  39. rdf:about="">  
  40. <dc:format>image/SVG+xml</dc:format>  
  41. <dc:type  
  42. rdf:resource="http://purl.org/dc/dcmitype/StillImage" />  
  43. <dc:title></dc:title>  
  44. </cc:Work>  
  45. </rdf:RDF>  
  46. </metadata>  
  47. <g  
  48. inkscape:label="Layer 1"  
  49. inkscape:groupmode="layer"  
  50. id="layer1">  
  51. <path  
  52. sodipodi:type="arc"  
  53. style="opacity:0.95999995;fill:#0000ca;fill-opacity:1;stroke:#010900;stroke-opacity:0.96296297"  
  54. id="path4305"  
  55. sodipodi:cx="534.28571"  
  56. sodipodi:cy="360.93362"  
  57. sodipodi:rx="148.57143"  
  58. sodipodi:ry="142.85715"  
  59. d="m 682.85713,360.93362 a 148.57143,142.85715 0 1 1 -297.14285,0 148.57143,142.85715 0 1 1 297.14285,0 z"  
  60. transform="translate(-185.71429,-145.71428)" />  
  61. <path  
  62. sodipodi:type="arc"  
  63. style="opacity:0.95999995;fill:#0000ca;fill-opacity:1;stroke:#0109e3;stroke-opacity:0.96296297"  
  64. id="path4315"  
  65. sodipodi:cx="188.57143"  
  66. sodipodi:cy="200.93361"  
  67. sodipodi:rx="22.857143"  
  68. sodipodi:ry="40"  
  69. d="m 211.42857,200.93361 a 22.857143,40 0 1 1 -45.71429,0 22.857143,40 0 1 1 45.71429,0 z"  
  70. transform="matrix(0.57125058,0,0,1,90.649876,0)" />  
  71. <path  
  72. sodipodi:type="arc"  
  73. style="opacity:0.95999995;fill:#0000ca;fill-opacity:1;stroke:#0109e3;stroke-opacity:0.96296297"  
  74. id="path4317"  
  75. sodipodi:cx="492.85715"  
  76. sodipodi:cy="190.93361"  
  77. sodipodi:rx="15.714286"  
  78. sodipodi:ry="35.714287"  
  79. d="m 508.57143,190.93361 a 15.714286,35.714287 0 1 1 -31.42857,0 15.714286,35.714287 0 1 1 31.42857,0 z" />  
  80. <path  
  81. sodipodi:type="arc"  
  82. style="opacity:0.95999995;fill:#0000ca;fill-opacity:1;stroke:#0109e3;stroke-opacity:0.96296297"  
  83. id="path4319"  
  84. sodipodi:cx="284.28571"  
  85. sodipodi:cy="180.93361"  
  86. sodipodi:rx="18.571428"  
  87. sodipodi:ry="17.142857"  
  88. d="m 302.85713,180.93361 a 18.571428,17.142857 0 1 1 -37.14285,0 18.571428,17.142857 0 1 1 37.14285,0 z" />  
  89. <path  
  90. sodipodi:type="arc"  
  91. style="opacity:0.95999995000000005;fill:#71ecca;fill-opacity:1;stroke:#01f3e3;stroke-opacity:0.96296296999999997"  
  92. id="path4321"  
  93. sodipodi:cx="280"  
  94. sodipodi:cy="179.50504"  
  95. sodipodi:rx="22.857143"  
  96. sodipodi:ry="21.428572"  
  97. d="m 302.85714,179.50504 a 22.857143,21.428572 0 1 1 -45.71428,0 22.857143,21.428572 0 1 1 45.71428,0 z"  
  98. transform="matrix(1.3288976,0,0,0.54378156,-84.573681,72.117398)" />  
  99. <path  
  100. sodipodi:type="arc"  
  101. style="opacity:0.95999995;fill:#71ecca;fill-opacity:1;stroke:#01f3e3;stroke-opacity:0.96296297"  
  102. id="path4323"  
  103. sodipodi:cx="395.71429"  
  104. sodipodi:cy="175.21933"  
  105. sodipodi:rx="27.142857"  
  106. sodipodi:ry="11.428572"  
  107. d="m 422.85715,175.21933 a 27.142857,11.428572 0 1 1 -54.28571,0 27.142857,11.428572 0 1 1 54.28571,0 z"  
  108. transform="matrix(1,0,0,1.0610854,2.8571429,-16.624552)" />  
  109. <path  
  110. sodipodi:type="arc"  
  111. style="opacity:0.95999995;fill:#71ecca;fill-opacity:1;stroke:#01f3e3;stroke-opacity:0.96296297"  
  112. id="path4325"  
  113. sodipodi:cx="347.14285"  
  114. sodipodi:cy="222.36218"  
  115. sodipodi:rx="7.1428571"  
  116. sodipodi:ry="30"  
  117. d="m 354.28571,222.36218 a 7.1428571,30 0 1 1 -14.28571,0 7.1428571,30 0 1 1 14.28571,0 z" />  
  118. <path  
  119. sodipodi:type="arc"  
  120. style="opacity:0.95999995;fill:#71ecca;fill-opacity:1;stroke:#01f3e3;stroke-opacity:0.96296297"  
  121. id="path4327"  
  122. sodipodi:cx="347.14285"  
  123. sodipodi:cy="290.93362"  
  124. sodipodi:rx="75.714287"  
  125. sodipodi:ry="15.714286"  
  126. d="m 422.85714,290.93362 a 75.714287,15.714286 0 1 1 -151.42857,0 75.714287,15.714286 0 1 1 151.42857,0 z"  
  127. transform="matrix(0.79802031,0,0,0.64883286,68.765695,96.647987)" />  
  128. <path  
  129. sodipodi:type="arc"  
  130. style="opacity:0.95999995000000005;fill:#0709ca;fill-opacity:1;stroke:#01f3e3;stroke-opacity:0.96296296999999997"  
  131. id="path4339"  
  132. sodipodi:cx="348.57144"  
  133. sodipodi:cy="625.2193"  
  134. sodipodi:rx="202.85715"  
  135. sodipodi:ry="235.71428"  
  136. d="m 551.42859,625.2193 a 202.85715,235.71428 0 1 1 -405.7143,0 202.85715,235.71428 0 1 1 405.7143,0 z"  
  137. transform="matrix(0.94592035,0,0,1,21.711865,-34.285714)" />  
  138. <rect  
  139. style="opacity:0.95999995;fill:#0709ca;fill-opacity:1;stroke:#01f3e3;stroke-opacity:0.96296297"  
  140. id="rect4341"  
  141. width="17.142857"  
  142. height="182.85715"  
  143. x="262.85715"  
  144. y="803.79077" />  
  145. <rect  
  146. style="opacity:0.95999995;fill:#0709ca;fill-opacity:1;stroke:#01f3e3;stroke-opacity:0.96296297"  
  147. id="rect4345"  
  148. width="80"  
  149. height="14.285714"  
  150. x="194.28572"  
  151. y="980.93359" />  
  152. <rect  
  153. style="opacity:0.95999995;fill:#0709ca;fill-opacity:1;stroke:#01f3e3;stroke-width:1.03391075;stroke-opacity:0.96296297"  
  154. id="rect4347"  
  155. width="18.325224"  
  156. height="182.85715"  
  157. x="405.21429"  
  158. y="809.50507" />  
  159. <rect  
  160. style="opacity:0.95999995;fill:#0709ca;fill-opacity:1;stroke:#01f3e3;stroke-opacity:0.96296297"  
  161. id="rect4349"  
  162. width="97.14286"  
  163. height="14.285714"  
  164. x="414.28571"  
  165. y="975.2193" />  
  166. <rect  
  167. style="opacity:0.95999995000000005;fill:#0709ca;fill-opacity:1;stroke:#010be3;stroke-opacity:0.96296299"  
  168. id="rect4351"  
  169. width="148.57143"  
  170. height="20"  
  171. x="48.57143"  
  172. y="480.93362" />  
  173. <rect  
  174. style="opacity:0.95999995000000005;fill:#0709ca;fill-opacity:1;stroke:#0105e3;stroke-width:0.76282506999999999;stroke-opacity:0.96296299"  
  175. id="rect4353"  
  176. width="14.963196"  
  177. height="131.42857"  
  178. x="48.343803"  
  179. y="500.93362" />  
  180. <rect  
  181. style="opacity:0.95999995000000005;fill:#0709ca;fill-opacity:1;stroke:#0116e3;stroke-opacity:0.96296299"  
  182. id="rect4357"  
  183. width="145.71428"  
  184. height="22.857143"  
  185. x="517.14288"  
  186. y="478.07648"  
  187. ry="0" />  
  188. <rect  
  189. style="opacity:0.95999995000000005;fill:#0709ca;fill-opacity:1;stroke:#0116e3;stroke-width:0.96534306000000003;stroke-opacity:0.96296299"  
  190. id="rect4361"  
  191. width="20.499195"  
  192. height="129.88486"  
  193. x="637.14288"  
  194. y="348.98215" />  
  195. </g>  
  196. </SVG>  
Output


at

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )