SVG Maker Project - Day Calendar

This project details how to get started coding with Scalable Vector Graphics (SVG) by creating a Day Calendar. SVG is a web standard, therefore, this code will work in any browser. Edit this file with a simple text editor like Notepad on Windows or any editor that will allow you to save just the text (without embedded formatting comands). Make sure to save the file with a .svg extension, then open your file in a browser. Make a few changes in the editor, save it, and refresh the browser to see the effect of the change.

The image on the left required 11 lines of code, but only 5 lines define the calendar. The other 6 can be the same for a completely different image. They provide the required SVG container for the calendar elements.

The 5 lines of code defining the calendar consist of an outer rectangle, a line separating the day of the week from the day, and 3 lines of text. That's it!

Of course, it doesn't update with the correct date yet, but that is where the coding comes in. First, let's look at the actual SVG code, starting with those 5 lines of code that define the calendar. The line numbers are not part of the code, but are included for reference. Note: the other 6 lines of code have set up our image to have a width of 500 pixels and a height of 500 pixels.

Coding the Calendar

Before we get started, understand that SVG elements have tag names such as rect, line, text, etc. and these tag names are enclosed with < and > symbols. That's so the browser knows how to interpret it when displaying the image. Elements are always closed with a /. For example, a <tagname> is closed with a </tagename>. When an element such as a rect element doesn't require any information be contained in its start and closing tags, it can use a closing / before the > symbol as seen in the code above, i.e. the /> symbols you see. The rect and line elements use this method of closing the element. The text elements, however, can not use that method as the elements contain data - the text to display. With that, let's look at the 5 lines of code in detail.

Line 1 shows the outer rectangle. The rectangle has attributes: x, y, width, height, rx, and style. It starts 2 pixels right and 2 pixels down from the upper left hand corner of the image as defined by the x and y attributes. It has a width and height of 496 pixels as defined by the width and height attributes. It also has an rx attribute that defines the radius of the corners of the rectangle so it isn't so square. Lastly, it has a style attribute that defines how it looks. It is filled with the color white, has a stroke (or border) that is black. The width of the border is 4 pixels, 2 pixels on each side of the center (which is why we started 2 pixels in). Note that style properties are separated with a semicolon.

Line 2 defines the line under the day of the week, extending across the width of the outer rectangle. It is done using the SVG line element, which has attributes: x1, y1, x2, y2, and style. It draws a line across the image 150 pixels down from the top - from point (2,150) to point (496,150). It also uses the style attribute to define its appearance. It is black and 4 pixels wide.

Lines 3, 4 & 5 are text for the day of the week (dow), day, and month. Each text element has attributes: id, x, y, and style. The id attribute will be used to reference the element when we add coding to have it display today. The x and y attributes define the where the base line of the text starts. The text is centered, so the x attribute is 250, the center of our 500 pixel wide image. The y attribute defines how far down from the top the text will be. And again we use the style attribute to define how it looks. Each line of text is filled with a different color, has a different font-size, but all use the Arial font and have the text anchored in the middle (centered). The style properties are known as CSS (Cascading Style Sheets). CSS is a web standard as well for defining the presentation attributes of many web technologies - not just SVG.

Simple! Right? If it seems like too much to type, consider that you can copy and paste quite a bit of code as you develop it. For example, the style attributes are very similar. Once you get familiar with coding, you will see there are ways to share style definitions for elements so you don't have to type so much of it. Now let's take a look at the whole file - all 11 lines.

Coding the Image

Surprise! 3 of the other 6 lines of code are blank for readability of the code, a good practice. Lines 1, 2, and 11 define the container for the SVG image. Line 1 does all the work. It tells the browser that we want our SVG image to 100% of the width and height of the container the browser is going to put the image in. The viewBox attribute tells the browser that we want the container to have coordinates starting at (0,0) in the upper left hand corner of the container and (500,500) for the lower right hand corner of the container. The browser will scale the image to fit the container. For example, this page displays the image using an HTML img element defined to have a width and height of 150 pixels - not 500 as our SVG image is defined. The browser scales it down to fit. The beauty of SVG is it scales up and down without any loss of resolution. It is always crisp and clear.

Adding the Script

By adding some javascript we can make our calendar display today's date. Javascript has a Date object which provides the needed data to program the calendar. There are numerous online references for the properties and methods of the Date object. W3Schools http://w3schools.com is an excellent reference and offers free online tutorials to practice with. Look for the Javascript tutorial to help with things that are not clear.

To add code to the SVG image, add a <script> element. It has a type attribute defining the type of script being written. The script element contains data (the code) that is not XML compatible, so the browser needs to know that it should not try to interpret the code as image elements. That is done by enclosing the code in a CDATA section, i.e. <![CDATA[ ... ]]> Its unusual format has many reasons, but the only important one is that by using it, the browser will not try to interpret the text it contains as elements of the image.

Understanding the Javascript

The first line of javascript adds an event listener. The code passes 2 parameters to the window.addEventListener function, the event type (in this case "load"), and the function to call when the event occurs. The "load" event occurs when the browser has completed loading the image. It then calls the Update() function. It is important to wait for the load event before trying to access the image elements because if the load is not complete, the element might not be found.

The Update() function does all the work. Its code is contained in the braces { ... }. First it defines some variables needed and referenced in the code. The dt variable is set to a new copy of the javascript Date object, which provides access to the device's (computer, mobile device, etc.) current date and time.

Next the code will update each of the 3 lines of text in our SVG image. First it sets the variable, element, to the SVG element with id="day", then using that reference, it sets the first child's node value to the value returned by the date objects getDate() function - which is the day of the month (1-31). The firstChild of the SVG's text element is the data contained in the <text> and </text> tags. To better understand these properties and methods used to access the image, look at W3Schools HTML DOM Reference and XML DOM Reference. DOM stands for Document Object Model. These references will define the properties and methods of the document objects.

The Date object's getDay() function returns a value (0-6) referencing the day of the week. The code uses the returned value as an index into the Days array to get the text to display in the image. Similarily, the Date object's getMonth() function returns a value (0-11) which the code uses as an index into the Months array. The Months array contains the text to display in the image. An array is accessed using an index contained in brackets, i.e. Months[index].

That's it! Below is the entire code for the SVG image of a Day Calendar as displayed on this page. Copy and paste it into a text editor, then save it as an .svg file, then open that file in a browser. Wow! It fills the window of your browser, quite large compared to how it appears on this page. That is because we told the browser to use 100% of the width and height of the container it puts the image in, which in this case is the browser's window.

Edit the file. Try changing the colors, text positioning, etc in the text editor, save it, refresh the browser and see the change. You can't hurt anything, the worst thing that can happen is the browser takes an error trying to display it due to a typo. If that is too simple, try adding the year after the month to your calendar, i.e. September, 2015.

Entire Code of the SVG Day Calendar