SVGBasics

Basic Shapes with SVG

There's not much to say about rectangles and circles that hasn't been said before. We'll just show how to create them in SVG and you'll see plenty of examples of their use later on.

Examples

Looking at the source, the line

<rect x="100" y="100" width="400" height="200" fill="yellow" stroke="black" stroke-width="3" />

Describes a rectangle. Here's a brief piece by piece description of everything in that line:

<?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 viewBox = "0 0 500 600" version = "1.1">
    <rect x = "100" y = "100" width = "400" height = "200" fill = "yellow" stroke = "black" stroke-width = "3"/>
    <rect x = "100" y = "350" rx = "100" ry = "50" width = "400" height = "200" fill = "salmon" stroke = "black" stroke-width = "3"/>
</svg>

The next simple example is a circle. It works in a similar way to the rect, look at the line

<circle cx="100" cy="100" r="80" fill="orange" stroke="navy" stroke-width="10" />

This is what each part of that line does:

<?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 viewBox = "0 0 200 200" version = "1.1">
    <circle cx = "100" cy = "100" r = "80" fill = "orange" stroke = "navy" stroke-width = "10"/>
</svg>
©2004 Late Night PC Service | About Us | Site Map | Contact Us