HTML and CSS Reference
In-Depth Information
fill=”#ff9900”
stroke=”#ff0000”
stroke-width=”2.0”
stroke-linejoin=”round”
stroke-linecap=”butt”>
</path> </svg>
</body>
</html>
Adding the SVG coded directly to a web page only requires that
you use SVG element tags inside of your HTML.
At the end of the day, it is really up to you as to how you want
to add SVG images to your web pages.
Understanding the Basics of Creating Shapes
As with HTML, SVG is built of elements. The difference
between SVG and HTML is that the elements in SVG are used to
construct images. The main elements you will use in building
your drawings are:
• LINE—for deining lines
• POLYLINE—for deining shapes constructed of lines
• RECT—for deining rectangles
• CIRCLE—for deining circles
• ELLIPSE—for deining ellipses
• POLYGON—for deining polygons
• PATH—for deining arbitrary paths
The most basic drawing element for SVG is a line. To define a
straight line you need to declare where in the viewBox property
the line starts on the X and Y axes and where the line ends on the
X and Y axes. This is referred to as X1, Y1 and X2, Y2. Here is an
example of a straight 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 width=”100%” height=”100%” version=”1.1”
xmlns=”http://www.w3.org/2000/svg”>
<line x1=”25” y1=”150” x2=”300” y2=”150”
style=”stroke:red;stroke-width:10”/>
In this example the line starts 25 pixels in from the left side of
the browser window, the line is 300 pixels long, and the line is
horizontal along the Y axis. Figure 3.7 is how it looks in your web
browser with additional CSS styling to emphasize the line.
Figure 3.7
A line is drawn in SVG using the LINE element.
