Scalable Vector Graphics (SVG) is a web standard markup language for graphics. Its syntax is very similar to
Hyper-Text Markup Language (HTML), a web standard used in all web pages. These standards are agreed upon and voted on by
the World Wide Web Consortium (W3C) whose membership includes all the companies making browsers,
i.e. Apple. Google, Microsoft, Mozilla, etc. as well as many other companies and individuals.
An SVG file is just text and is identified by its .svg file extension. SVG elements consist of
tagnames, attributes, and their values in the form <tagname attribute="value"> Each image file
starts with the tagname svg, i.e. <svg> and ends with its closing tag, i.e. </svg>
The <svg> element can have many attributes, but for the purpose of this lesson plan, it includes attributes;
width, height, and viewBox. The width and height attributes set the size of the image that will be inserted in the
browser's container for the image. For an SVG file, the container is the browser's window. This lesson will set the
width="100%" and height="100%" to use the whole browser window. SVG defaults to preserving the aspect ratio of the
image, so the browser will reduce either the height or width as needed to keep the image from being distorted.
The viewBox attribute defines the rectangular shape of the image and has the form viewBox="min-x min-y width height"
where the point (min-x,min-y) is the upper left corner of the image and has a width and height. In this lesson,
the viewBox="0 0 600 600" which sets the upper left corner of the image to (0,0) and the lower right corner to (600,600).
Additionally, the <svg> element contains some namespace attributes that refer to the W3C specifications for the markup used
in the file. Suffice it to say, they are needed. This lesson includes 2 common ones.
xmlns="http://www.w3.org/2000/svg" and xmlns:xlink="http://www.w3.org/1999/xlink" The first one is for SVG and the second
one is needed anytime there is a reference link used in the SVG elements. While this lesson has none, it is used so often
it is better to include it now than leave it out and copy and paste this in future work when it will be needed.
So our minimum requirements for an SVG file are:
<svg width="100%" height="100%" viewBox="0 0 600 600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
In this lesson <circle> and <ellipse> elements will be added as child elements by adding them between the
<svg> and </svg> tags. The <circle> element has attributes; cx, cy, and r where the center of the
circle is defined to be at point (cx,cy) and has a radius defined by the r attribute. A circle with a center at point (300,300)
with a radius of 100 would look like
<circle cx="300" cy="300" r="100" />
Similarly, The <ellipse> element has attributes; cx, cy, rx, and ry where the center of the
ellipse is defined to be at point (cx,cy), has a x-radius defined by the rx attribute, and has a y-radius defined
by the ry attribute. An ellipse with a center at point (300,300) with an x-radius of 100 and a y-radius or 50
would look like
<ellipse cx="300" cy="300" rx="100" ry="50" />
Note that since the <circle> and <ellipse> elements have no child elements, their closing tag,
i.e. </circle> and </ellipse> can be omitted by including a / at the end of the element. This is an
alternative way to close the element that is in standard use.
Lastly, the lesson will style the circles and ellipses using another web standard called CSS, short for Cascading Style Sheets.
CSS styles consist of name:value pairs separated by a semi-colon.
Each name is separated from its value with a colon. For example, style="name:value;name:value;"
This lesson will add 3 CSS styles, fill, stroke, and stroke-width, where fill paints the inside of the element and stroke draws
the outline of the element. The stroke-width sets the thickness of the outline. The fill and stroke styles take colors as their values
or the word none. Since the default fill is usually black, this lesson will use the name:value pair fill:none regularly.
If omitted, expect to see black where it is not desired. The stroke-width value is a number followed by its units. This lesson
will define the stroke-width in pixels, abbreviated px.
