Use of Predefine SVG Shapes in XML
Posted in
XML | SVG July 04, 2019
In this article I have describe about a rectangle shape in XML.
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
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
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