HTML and CSS Reference
In-Depth Information
Rectangle shapes can be created in SVG using the RECT
element. The RECT element has two attributes,
width
and
height
. The following SVG adds a rectangle of width 400 pixels
and height 400 pixels. Additional styling using CSS has been
added to the drawing so you can see it. The results are shown in
Figure 3.11.
<?xml version=”1.0” standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width=”100%” height=”100%” version=”1.1”
xmlns=”http://www.w3.org/2000/svg”>
<rect width=”400” height=”400”
style=”fill:red;stroke-width:5;
stroke:yellow”/>
</svg>
Creating circles is similar to creating rectangles in SVG. The
difference is you use the CIRCLE element. At its most basic, the
CIRCLE element only requires that you define the radius of the
circle using an
R
attribute. The following SVG code draws a circle
with a radius of 150 pixels.
Figure 3.11
The RECT element allows you to easily create rectangle shapes such as this
square.
