Showing posts with label SVG. Show all posts
Showing posts with label SVG. Show all posts

Wednesday, 27 March 2019

drawing iphone icon using SVG

    
iphone icon


 <!--drawing iphone icon using SVG-->
<html>
<head> </head>
<body>
<h3>Drawing Graphic using SVG</h3>
<hr/>
<svg id="mysvg1" 
        width="400"
height="500"
style="border:2px solid blue;">

<!--outer rectangle-->

<rect x="80" y="50"
 rx="15" ry="15"
width="230" height="400"
style=fill:black;
stroke-width:2;stroke:black;"/>



<!--inner rectangle-->

<rect x="95" y="80"
  rx="15" ry="15"
 width="200" height="325"
  style=fill:white;
stroke-width:2;stroke:black;"/>

<!--Big circle-->

 <circle cx="190" cy="428" r="20"
      Stroke="black"
         stroke-width="2"
             fill="white"/>
  
<!--small circle-->

<circle cx="190" cy="65" r="10"
       Stroke="black"
        stroke-width="2"
         fill="white"/>
</svg>
</body>
</html>




Thursday, 7 February 2019

HTML 5 Graphics -SVG Demo


  1.  <html>
  2. <head>
  3. </head>
  4. <body>
  5. <h1> HTML 5 Graphics -SVG </h1>
  6. <hr/>

  7. <svg id="svg1" width="300" height="300" style="border:2px solid blue;">
  8. <line X1="0" Y1="0" X2="300" Y2="300" style="stroke:red; stroke-width:5"/>

  9. <line X1="20" Y1="0" X2="300" Y2="280" style="stroke:green; stroke-width:5"/>

  10. <line X1="0" Y1="20" X2="280" Y2="300" style="stroke:blue; stroke-width:5"/>

  11.  <line X1="300" Y1="0" X2="0" Y2="300" style="stroke:black; stroke-width:5"/>
  12.  
  13.  <line X1="0" Y1="280" X2="280" Y2="0" style="stroke:yellow; stroke-width:5"/>
  14.  
  15.  <line X1="320" Y1="0" X2="0" Y2="320" style="stroke:pink; stroke-width:5"/>
  16.  
  17. < circle cx="150" cy="150" r="60" stroke:red stroke-width:3 fill="green"/>

  18.  <circle cx="150" Cy="150" r="30" stroke:red stroke-width:2 fill="lightblue"/>
  19. </svg>

  20. </body>
  21. </html>