Use of Predefine SVG Shapes in XML

In this article I have describe about a rectangle shape in XML.
  • 1586

Read about SVG here

Some predefine SVG Shapes

SVG provide some predefine shape use for the program

  • Rectangle <rect>
  • Circle <circle>
  • Ellipse <ellipse>
  • Line <line>
  • Polyline  <polyline>
  • Polygon <polygon>
  • Path <path>

First we define the Rectangle <rect>

Rectangle <rect> is used to define the variations rectangle shapes.

Example 1

<?xml version="1.0" encoding="utf-8" ?>
<html>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <rect width="200" height="75"
      style="fill:rgb(0,0,255)"/>
    </svg>
  </body>
</html>

Output

SVG 2.jpg

Define the code

  • Xml define the namespace and version use the program.
  • Width and height define the width and height of rectangle.
  • The style attribute is define CSS properties and CSS is define the rectangle color.

 Example 2

<?xml version="1.0" encoding="utf-8" ?>
<html>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <rect x="50" y="20" width="100" height="100"
      style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
        stroke-opacity:0.9"/>
    </svg>
  </body>
</html>

Output

SVG 3.jpg

Define the code

  • XML define the namespace and version use the program.
  • x and y attributes define the position of rectangle.
  • The style attribute is define CSS properties and CSS is define the rectangle color and stroke property define the stroke color.

You may also want to read these related articles :

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2019 DotNetHeaven. All rights reserved.