Before getting into implementation details, a brief explanation of computer graphics is in order. There are two types of graphics:
Filename: shape.svg
Mandatory elements are shown in blue;
options shown in green.
The "xml" declaration line must not be preceded by spaces or
blank lines.
Note that the syntax for comments is the same for XML as for HTML.
i.e. a comment begins with "<!--" and ends with "-->".
<xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <!-- Comment: The svg10.dtd is the Document Type Definition for SVG 1.0. The specification for SVG that corresponds to this DTD is available at: http://www.w3.org/TR/2001/REC-SVG-20010904/ --> <svg width="100" height="100 "> <title>Sample Image for CS170</title> <!-- Head --> <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" /> <!-- Eyes --> <circle cx="55" cy="80" r="10" style="stroke: black; fill: black;" /> <circle cx="85" cy="80" r="10" style="stroke: black; fill: black;" /> <!-- Glass line --> <line x1="21" y1="80" x2="60" y2="80" style="stroke: black;" /> <line x1="60" y1="80" x2="80" y2="80" style="stroke: black;" /> <line x1="90" y1="80" x2="119" y2="80" style="stroke: black;" /> <!-- Smile --> <polyline points="45 110, 55 120, 85 120, 95, 110" style="stroke: black; fill: none;" /> </svg>
Shape | Instruction |
---|---|
rectangle | <rect x="left-x" y="top-y" width="width" height="height"/> | circle | <circle cx="center-x" cy="center-y" r="radius /> | ellipse | <ellipse cx="center-x" cy="center-y" rx="x-radius ry="y-radius /> | line | <line x1="start-x" y1="start-y" x2="end-x" y2="end-y"> | polyline - like a polygon, but not closed at the ends | <polyline points="pairs of x-y coordinates" /> | polygon - SVG will automatically connect the last point to the first | <polygon points="pairs of x-y coordinates" /> |
The previous table only shows the part of the instructions that define the structure of the shape.
To define the presentation of the shape you use:
style=" stroke:characteristic; fill:characteristic;"
Some of the available stroke and style attributes are:
stroke: colour | Colour values can be:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive purple, red, silver, teal, white, or yellow. A hexadecimal value in the form #rrggbb representing values for red, green, and blue. |
stroke-opacity: n | Where n can be a value between 0.0 and 1.0.
0.0 means transparent and 1.0 means opaque. If this attribute is not specified, opaque is the default. |
fill: colour | Colour values as above. |
fill: none | Specifies no fill at all i.e. an empty shape. |
fill-opacity: n | Values as above. |
To put the struture and presentation attributes together in one instruction, here is the example given at the start of this document:
< circle cx="70" cy="95" r="50" style="stroke: black; fill:none" />; ^-- structure ^-- presentation
The explanation given in these notes is intended to get you started using SVG. For more details look into the following references. Notice in particular, Dr. Fong's reference on Generating SVG images from C++. Since SVG is a simple text format, you can use a C++ program to generate an SVG file. This is extremely attractive to programmers in computer graphics. By using fractal geometry in a C++ program you can create a simple arithmetic expression that generates an infinitely complex geometric shape.
Of course you can search the Internet for any number of references!
|
|
|