Full/Half Circle, Rectangle in SVG file.

Hi Friends,

Today let see how can we create the a logo or any icon using the SVG (Scalable Vector Graphics).

Initially we need to understand the basic on svg file.  Whats the basic and how can we start to create our first svg file.
1.  Open notepad and write the following lines -

<svg version="1.1" height="100px" width="100px"  xmlns="https://www.w3.org/2000/svg" >
      <circle cx="50px" cy="50px" r="40px" style="fill:green" />
</svg>

2.  Save the file as FirstSVG.svg.

3.  Open the file in any browser it will show you a circle with filled green color.

Here the first and last line is mandatory and in between we write the code according to what we want. here its basic SVG file.

we have few standard tags for different-different design which we can use to draw icon or logo, like - Line, Circle, eclipse, rectangle, polygon or any other path.

Line- 

<svg version="1.1" height="100px" width="200px"  xmlns="https://www.w3.org/2000/svg" >
      <line x1="0" y1="0" x2="200" y2="100"
          style="stroke: #E28965;stroke-width:2" />
</svg>

Circle- 

<svg version="1.1" height="100px" width="100px"  xmlns="https://www.w3.org/2000/svg" >
      <circle cx="50px" cy="50px" r="40px" style="fill:#89BDFF; stroke:#E28965;
      stroke-width:5;" />
</svg>

Rectangle- 

<svg version="1.1" height="100px" width="200px"  xmlns="https://www.w3.org/2000/svg" >
      <rect x="10px" y="10px" height="80px" width="180px" style="fill:#89BDFF;
      stroke:#E28965; stroke-width:5;" />
</svg>

Ellipse- 

<svg version="1.1" height="100px" width="200px"  xmlns="https://www.w3.org/2000/svg" >
      <ellipse cx="100px" cy="50px" rx="90px" ry="40" style="fill:#89BDFF;
      stroke:#E28965; stroke-width:5;" />
</svg>

Polygon- 

<svg version="1.1" height="200px" width="200px"  xmlns="https://www.w3.org/2000/svg" >
      <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:#89BDFF;
      stroke:#E28965;stroke-width:5;fill-rule:evenodd;" />
</svg>

Half-Circle(Clipping)- 

<svg version="1.1" height="200px" width="200px"  xmlns="https://www.w3.org/2000/svg" >
      <clipPath id="cut-off-bottom">
          <rect x="0" y="0" width="200" height="100" />
      </clipPath>

      <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>

Path- 

<svg version="1.1" height="200px" width="200px"  xmlns="https://www.w3.org/2000/svg" >
      <path d="M10,10 L100,190 L190,100 Z" style="fill:#89BDFF;
      stroke:#E28965;stroke-width:5;" />
</svg>

Lets understand the tag <path> and its parameter d = "... " M10,10 -> we want to start from 10,10 L100,190 -> draw a line to the point 100,190 L190,100 -> draw a line to the point 190,100 Z -> go from current point to start point mean (10,10)

Curv (<Path> tag)- 

<svg version="1.1" height="200px" width="220px"  xmlns="https://www.w3.org/2000/svg" >
      <path style="fill:#89BDFF;stroke:#E28965;stroke-width:2;" d="M10,60
 c0,0,50,-50,100,-13
 c0,0,50,40,100,13
 c0,0,-50,50,-100,13
 c0,0,-50,-40,-100,-13
 " />
</svg>

To Understand the tag <path>  in more details refer this page 

Happy Knowledge Sharing.. :)