Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu. Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="500" height="500">

<!--A rectangle -->
<rect x="20" y="10" width="80" height="60" style="fill:rgb(0,0,255);
stroke-width:1; stroke:rgb(0,0,0)"/>

<!-- A square with rounded corners -->
<rect x="23" y="100"
rx="10" ry="10" width="55" height="55" style="fill:red; stroke:purple;
stroke-width:5; fill-opacity:0.3"/>

</svg>

The <rect> places a rectangle (60h x 80w pixels) with its top left corner at x (=20) pixels from the left side of the window, and y (=10) pixels down from the top of the window.

The <rect> can also create a square by defining an equal length for both the height & width. In square example, the rx and the ry attributes (rx="10" ry="10") rounds the corners of the square.

Coordinates may be specified without units, in which case pixels are the assumed coordinate system, or with units such as em, in, pt, cm, mm etc.

The style attribute is used to define CSS properties for graphical objects.

• The fill property (e.g. fill:rgb(0,0,255)) defines the fill color of the rectangle (either an rgb value, a color name, or a hexadecimal value).
• The stroke-width property (e.g. stroke-width:1) defines the width of the border of the rectangle.
• The stroke property (e.g.stroke:rgb(0,0,0)) defines the color of the border of the rectangle.
• The fill-opacity property (e.g.fill-opacity:0.3) defines the opacity of the fill color (legal range: 0 to 1)