Sideway
output.to from Sideway
Draft for Information Only

Content

SVG Basics
 The coordinate system
 Simple objects
  Colors and drawing order
  <line>
  <rect>
  <circle>
  <ellipse>
  <path>
   Paths: M and L
 Sources and References

SVG Basics

The coordinate system

The default coordinate system in SVG is much the same as in HTML. It works as a two-dimensional x-y plane. The origin (where x=0 and y=0) is the upper left-hand corner. As we move right from there, x increases. As we move downward, y increases. Generally, units are measured in pixels. That is, if our browser window has a rectangle of 200 pixels high by 500 pixels wide then the lower right corner of that window will be the point (500,200). image Now, to be sure, things are not always this simple. Sometimes, we have scaling and zoom effects in place which can be affected by a number of considerations, foremost among which might be the viewBox, a rectangle which resets the scale of the units associated with the viewing rectangle. Also, the dimensions of the HTML window may interact with the SVG object if it is embedded in HTML. These considerations will be discussed in more detail later in the book.

Other than that, we can generally assume that when we refer to a point with coordinates (100,100), it will be a point diagonally downward (100√2 pixels) from the upper left corner of the browser's viewable window.

Simple objects

According to the World Wide Web Consortium's Recommendations, the SVG graphics elements are "the element types that can cause graphics to be drawn onto the target canvas. Those are: 'path', 'text', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon', 'image' and 'use'."6

These are the primitives, so to speak, and form an appropriate starting point for our discussion. The <polyline> and <polygon> objects don't add anything that the more flexible path cannot do, so those will not be considered in this treatment. It makes sense to discuss <use> along with grouping and transformations (once we have something worth <use>-ing), so I will present the others starting with the simpler objects first.

I offer three recommendations on how one might learn all of this:
  • Don't just read this book; try the examples. You have my permission and the permission of the publishers to do so. This sort of subject does not enter a passive brain as well as it enters an active one. It will help if you engage yourself actively.
  • Don't just copy these examples; experiment. Try changing an attribute here and there. Imagine some picture, and see if you can draw it.
  • For those fairly comfortable with learning new technologies, skip ahead and read, at the same time, the chapter on SMIL animation. As you are experimenting with a tag and its attributes, try animating the attributes so you can see what they affect and to what degree. It can give you a quicker and clearer understanding.

Colors and drawing order

Before discussing the basic drawing objects, let's first consider the use of color values in SVG and the order in which drawn objects appear on the page.

Colors may be specified in much the same way that they are in HTML/CSS:

  • color names: any of the HTML name space color terms, including such terms as "aqua", "lightgreen", "salmon", "tomato" and "papayawhip";
  • 6-digit hex RGB values: "#ff0a8f";
  • 3-digit hex RGB values: "#fd2"="#ffdd22";
  • functional values: either decimal (in the range 0 to 255), such as rgb(255,12,560); or percentage, such as rgb(100%, 50%, 20%).

Accordingly, the color "red" may be defined alternately as "red", "#f00", "#ff0000", "rgb(255,0,0)", or as "rgb(100%,0%,0%)".

Objects appear from back to front in the order they are defined, with objects defined later appearing in front of or above (and occluding if they overlap) those defined earlier. More concerning overlaying objects will be found in the next section "operations: grouping, reusing, scaling, translation and rotation."

<line>

The <line> object draws a line between two specified points: (x1,y1) and (x2,y2). In order to see the line, it must have a stroke (i.e., a color).

The code <line x1="10" y1="10" x2="100" y2="100"> draws an invisible line in most browsers, while in ASV+Internet Explorer, a faint hint of a grey line might be seen (which, curiously, does not expand in size when we zoom in on it).

Hence, a sort of minimal line consists of code such as the following:

<line x1="5" y1="5" stroke="red" x2="90" y2="90" />

Another attribute known as "stroke-width" controls the thickness of the line and, by default, is assigned a value of 1.

The stroke and stroke-width attributes as well as the starting and ending points are varied in the following illustration:

SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <line x1='5' y1='10' x2='99' y2='30' stroke-width='.5' stroke='red'/>
   <line x1='5' y1='30' x2='99' y2='50' stroke-width='1' stroke='red'/>
   <line x1='5' y1='50' x2='99' y2='70' stroke-width='2.5' stroke='red'/>
   <line x1='5' y1='70' x2='99' y2='90' stroke-width='4' stroke='blue'/>
</svg>    
HTML Web Page Embedded Output:
A number of other attributes exist for lines, two of which: the stroke-dasharray and the stroke-linecap are worth mentioning in this treatment.
SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <line x1='15' y1='15' x2='140' y2='135' stroke-width='25' stroke='blue' stroke-linecap='round'/>
   <line x1='15' y1='15' x2='140' y2='135' stroke-width='25' stroke='aqua' stroke-dasharray='8,3,2,18'/>
   <line x1='15' y1='155' x2='160' y2='60' stroke-width='25' stroke='blue'/>
   <line x1='15' y1='155' x2='160' y2='60' stroke-width='25' stroke='orange' stroke-dasharray='8,3,2'/>
</svg>    
HTML Web Page Embedded Output:
The stroke-dasharray gives a flexible way of making dashed lines, shape borders, and paths. In the above illustration, we have made two pairs each consisting of two identical lines (except for the stroke and its dasharray) one on top of the other. The top line of each pair has had its stroke-dasharray applied which takes a sequence of numeric values S=(v1,v2,v3,...,vn) and turns the stroke on and off: on for the first value v1 pixels along the length of the line; off for the next v2 pixels and so forth. If the sum of the values vi in S is less than the length of the line, then the values are repeated again as needed. In the case of the first line, the value of stroke-dasharray="8,3,2,18" has an even number of values so the blue and aqua colored bands repeat aqua 8 pixels, clear 3 pixels, aqua 2 pixels and clear 18 pixels, starting over again with 8 more pixels of aqua. Since the underlying but identically shaped line is blue, the blue of the underlying line is what shows. In the case of the second line, the value of stroke-dasharray="8,3,2" has an odd number of values so the repeating sequence goes like this:

(8 orange, 3 clear, 2 orange, 8 clear, 3 orange, 2 clear, ...).

The first of the two pairs of lines has two lines; both use stroke-linecap, having stroke-linecap="round". This makes the end of the line rounded instead of flat, as in the second example which uses the default or flat value of stroke-linecap.

Another useful aspect of lines involves the <marker> tag which can be used to define arrow or other shapes appropriate for attaching to the beginning or ends of lines. The W3C gives a clear example7 for those so interested, though it is a bit verbose for our treatment here. Another example can be seen at http://srufaculty.sru.edu/david.dailey/svg/newstuff/simpleshapes.svg.

<rect>

The <line>, <rect>-angle, <circle> and <ellipse> elements can all be seen as special cases of what could instead be done with the <path> object. But these are such familiar geometric objects that it is natural to define them separately.

A rectangle is drawn using the <rect> tag, which, by default, produces a rectangle with sides parallel to the edges of the browser window. We will see how to rotate rectangles later on so that they might be parallel to something other than the ground, without having to lift and tilt our monitors. We may also skew them so that they cease to be rectangles at all, but rather become parallelograms.

A <rect> receives a starting point (x,y) a width and a height attribute. If no fill color or pattern is specified, by default, the rectangle will be filled with black.

<rect x="60" y="95" height="30" width="50" />

Common attributes that are used in conjunction with the rectangle include the fill, which specifies its color (or pattern), its stroke and stroke-width (which determine aspects of its border or edge). Here are some rectangles that exemplify these attributes as well as the use of various color reference schemes and the partial overlay and occlusion of objects.

SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <rect x='62' y='25' height='110' width='16' fill='rgb(100%,50%,50%)' stroke='black' stroke-width='2'/>
   <rect x='35' y='35' height='30' width='50' fill='red' stroke='black' stroke-width='2'/>
   <rect x='5' y='60' height='30' width='50' fill='#f88' stroke='black' stroke-width='2'/>
   <rect x='25' y='70' height='30' width='50' fill='#ff8888' stroke='black' stroke-width='2'/>
   <rect x='65' y='60' height='30' width='50' fill='#eac' stroke='black' stroke-width='2'/>
   <rect x='85' y='70' height='30' width='50' fill='#eeaacc' stroke='black' stroke-width='2'/>
   <rect x='60' y='95' height='30' width='50' fill='rgb(255,0,0)' stroke='black' stroke-width='2'/>
</svg>    
HTML Web Page Embedded Output:

Note in the above example that the first rectangle defined, the tall thin one, appears under all subsequent rectangles. Note also, that the colors "#f88" #ff8888" are equivalent and that "rgb(100%,50%,50%)" while visibly similar, is actually a bit darker since half of "ff" is actually "7f" rather than "88".

The fill of a <rect> can also be a more complex. Gradients, masks, patterns, and various filters are all available to alter the way a rectangle appears in SVG. These are more advanced topics and are dealt with later in this book. For something analogous to the stroke-dasharray seen above for the <line> element, consider the <gradient> as discussed in the next chapter.

<circle>

A circle is indeed a special case of an ellipse, so if you prefer parsimony in the amount of syntax you have to learn, please feel free to skip right ahead to the ellipse. The <circle> does have a slightly simpler syntax, so if you prefer keeping your keystrokes few, or if the ellipse's eccentricity troubles you in some fundamental way, then <circle> may be worth your while to learn.

The simplest circle requires only a center point (cx,cy) and a radius, r:

<circle cx="80" cy="50" r="40"/>

This produces a circle of radius 40 pixels filled (by default) with black.

Just as with rectangles, we might play with the stroke, the stroke-width and the stroke-dasharray to create various interesting effects. Note that if we wish a circle to appear to have an empty center, we define some stroke color and then set fill="none" to make it hollow. The illustration below shows the effects of adjusting several of these attributes.

SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <circle cx='80' cy='50' r='40'/>
   <circle cx='80' cy='110' r='40' fill='red'/>
   <circle cx='80' cy='170' r='40' fill='yellow' stroke='blue' />
   <circle cx='80' cy='160' r='20' fill='red' stroke='black' stroke-width='10'/>
   <circle cx='140' cy='110' r='60' fill='none' stroke='#579' stroke-width='30' stroke-dasharray='3,5,8,13'>
</svg>    
HTML Web Page Embedded Output:

<ellipse>

The ellipse is just like the circle but has two radii instead of one. rx represents half the distance from the leftmost to the rightmost sides, while ry is the distance from top to center of the ellipse. The ellipse is always aligned with its horizontal axis parallel to the bottom of the window, unless one applies a rotation transform (as discussed later in this chapter). The ellipse can be a considerably more evocative shape than a circle, and given that it is a circle when rx=ry, it is more flexible as well.

SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <ellipse cx='80' cy='110' rx='75' ry='105' fill='#538'/>
   <ellipse cx='80' cy='110' rx='60' ry='40' fill='black' stroke='red' stroke-width='25'/>
   <ellipse cx='80' cy='110' rx='35' ry='20' fill='#538' stroke='yellow' stroke-width='25'/>
   <ellipse cx='80' cy='50' rx='40' ry='30' fill='red' stroke='black' stroke-width='25' stroke-dasharray='3,6'/>
   <ellipse cx='80' cy='50' rx='30' ry='20' fill='orange' stroke='red' stroke-width='10' stroke-dasharray='3,6'/>
   <ellipse cx='80' cy='170' rx='40' ry='30' fill='yellow' stroke='orange' stroke-width='25' stroke-dasharray='3,6' />
   <ellipse cx='80' cy='170' rx='30' ry='20' fill='red' stroke='black' stroke-width='10' stroke-dasharray='3,6'/>
</svg>    
HTML Web Page Embedded Output:

The code of the two illustrations is identical except that the figure on the left has had the attribute-value pair stroke-dasharray="3,6"added to four of its seven ellipses.

<path>

If one wanted to learn only one drawing primitive, then the <path> would probably be it. It can be used to replace <rect>, <ellipse>, and <circle>, though it would not be advised unless your mental arithmetic skills are quite good (e.g. simultaneous differential equations). <path> is a very flexible drawing option. It renders the movement of a stylus through two dimensions, with both pen-up and pen-down options, including straight and curved segments joined together at vertices which are either smooth or sharp.

There are many aspects of the <path> that we will not discuss here. Fortunately, the W3C's chapter on paths is thorough and has plenty of illustrations of most of its numerous facets. Here, we cover only absolute rather than relative coordinates, and only the raw path elements rather than their simplified forms (such as "S" as a special case of "C"). We will deal with pen-down, linear, quadratic and cubic forms, and arcs.

Like <rect>, <line> and the other elements, we've seen, <path> has attributes like stroke, stroke-width, stroke-dasharray, and fill. But while the other elements we've looked at have special meanings given to particular coordinates (like "rx" or "x2"), the path has a sequence of such coordinates held in an attribute named "d". This string of coordinates can be of arbitrary length.

Paths: M and L

We begin by specifying where the drawing will begin by inserting as the first element of "d" a notation such as "M x y" for numbers x and y. We might think of "M x y" as meaning "move pen to the coordinate x y." From there, we have options of moving (with pen still down on the canvas) linearly (L), quadratically (Q), cubically (C) or through an elliptic arc (A). For example, d="M 100 100 L 200 200" would succeed in drawing a diagonal line from the point (100,100) to the point (200,200), as shown.

SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <path stroke='black' d='M 100 100 L 200 200'/>
</svg>    
HTML Web Page Embedded Output:

The pen-down and line modes stay in effect until turned off, so we might concatenate yet other pairs of coordinates into the path.

SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <path d='M 100 100 L 200 200 100 150'/>
</svg>    
HTML Web Page Embedded Output:

A couple of things should be noted. First, in the above example, we did not specify a stroke since, by default, the figure is filled with black. Second, if we specify that a path has no fill (using fill="none") then the path will not appear to loop back to the beginning. Third, we might, for sake of legibility, be tempted to add commas, between pairs of coordinates. This is just fine, in the general case, though a few cases have been reported in which certain browsers seem to be troubled by large numbers of commas as coordinate delimiters. Fourth, we may assume that L (or line) is the default way of moving to the next point, and it need not be specifed. That is d="M 100 100 L 200 200 100 150" should be equivalent to d="M 100,100 200,200 100,150" . These observations are illustrated as follows. Note that once we specify fill="none" the figure will be invisible, unless we specify a stroke.

SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <path d='M 50,100 150,200 50,150'/>
   <path d='M 100 50 L 200 150 100 100' fill='none' stroke='black'/>
</svg>    
HTML Web Page Embedded Output:

The path will also be unclosed — that is, the two endpoints will not be connected unless we specify that they should be. If we wish a path to be closed, we modify it with the z flag at the end of the path as follows:

open:

<path d="M 100,50 200,150 100,100" fill="none" stroke="black"/>

closed:

<path d="M 100,50 200,150 100,100 z" fill="none" stroke="black"/>

Since paths are, by default, filled with black, it is natural to wonder what happens when the path crosses itself. By default, the union of the regions traversed by the path is filled, unless we specify otherwise.

SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='300' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <path d='M 70,290 L 150,150 200,250 40,250 100,150 170,290'/>
   <path d='M 270,290 L 350,150 400,250 240,250 300,150 370,290' fill-rule='evenodd'/>
</svg>    
HTML Web Page Embedded Output:

Here we show the default fill technique as well as the "even-odd" fill rule on a shape which intersects itself on more than one occasion. The points are labeled just to make it easier to read what might seem a long list of six coordinate pairs.

Another interesting aspect of <path> is that we might combine multiple path segments into a common path definition. That is, a path may have multiple components by having more than one pen-down operation. Note in the figure below that the two path segments are indeed treated as one since the orange fill is applied to the entire figure rather than to the two separate triangular components. The interior of the figure is also transparent, as illustrated by the rotated and reduced version of the image appearing partly inside and partly outside the foreground figure.

SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='300' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <g transform='scale(0.8) translate(27.5 39.25) rotate(30 110 157)'>
   <path fill='green' d='M 10,215 210,215 110, 42 z M 10,100 210,100 110,273 z' stroke='purple' stroke-width='3'/>
   </g>
   <path fill='orange' d='M 10,215 210,215 110, 42 z M 10,100 210,100 110,273 z' stroke='purple' stroke-width='3'/>
</svg>    
HTML Web Page Embedded Output:

Sources and References

https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html

©sideway

ID: 211200002 Last Updated: 12/2/2021 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close

Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1


Copyright © 2000-2024 Sideway . All rights reserved Disclaimers last modified on 06 September 2019