SVG <rect>

SVG has some predefined shape elements that can be used and manipulated by developers.

SVG Shapes

SVG has some predefined shape elements that can be used and manipulated by developers:

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

The following chapters will explain each element, starting with the rect element.

The <rect> Tag

The <rect> tag is used to create a rectangle and variations of a rectangle shape.

To understand how this works, copy the following code into Notepad and save the file as "rect1.svg". Place the file in your Web directory:

Code explanation:

• The width and height attributes of the rect element define the height and the width of the rectangle
• The style attribute is used to define CSS properties
• The CSS fill property defines the fill color of the rectangle (either an rgb value, a color name, or a hexadecimal value)
• The CSS stroke-width property defines the width of the border of the rectangle
• The CSS stroke property defines the color of the border of the rectangle

View example

Let's look at another example that contains some new attributes:

Code explanation:

• The x attribute defines the left position of the rectangle (e.g. x="0" places the rectangle 0 pixels from the left of the browser window)
• The y attribute defines the top position of the rectangle (e.g. y="0" places the rectangle 0 pixels from the top of the browser window)
• The CSS fill-opacity property defines the opacity of the fill color (legal range: 0 to 1)
• The CSS stroke-opacity property defines the opacity of the stroke color (legal range: 0 to 1)

View example

Define the opacity for the whole element:

Code explanation:

• The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)

View example

Last example, create a rectangle with rounded corners:

Code explanation:

• The rx and the ry attributes rounds the corners of the rectangle

View example

Free Online Website Builder - No Downloading Needed

Create a free Flash website with our simple, online web design editing platform. Stunning templates and user-friendly tools make website building easy and fun.

Start Creating your free website now!

Altova® MapForce®
Graphical XML Mapping Tool from the Developers of XMLSpy®

Need an easy way to get data into XML, or transform XML to another format? MapForce lets you map XML data to/from any combination of XML, database, flat file, Excel 2007, XBRL, or Web services data. Then it transforms data instantly or auto-generates royalty-free code for recurrent conversions. New features in Version 2010!

Easy-to-use, graphical data mapping interface Instant data transformation XSLT 1.0/2.0 and XQuery code generation Java, C#, and C++ code generation Advanced data processing functions Support for all major relational databases including SQL Server, IBM DB2, Oracle, and more Visual Studio & Eclipse integration Available in 32-bit and 64-bit versions Download a fully-functional trial today!