SCALABLE VECTOR GRAPHICS
Please note that SVG images on this page may not be displayed on older versions of browsers especially Internet Explorer 9 and earlier. They should be displayed properly on the latest versions of Chrome, Firefox, Opera, Iron and Vivaldi on desktops running Windows 7 or later operating systems. On Android 4.4 or later on phones and tablets try using the Puffin browser. Unlike IE 9 and previous Internet Explorer browsers, IE 10, IE 11 and Edge can handle the text shadows, but still cannot run the animation in the SVG analogue clocks and do not support HTML Ogg Vorbis audio, but we have added an MP3 file for the audio below. The new Edge beta version for Android will run the animated SVG and play HTML Ogg Vorbis audio. If there are layout problems with some graphics, try refreshing the browser. Note that since this site has implemented HTTPS, Safari 5.1.7 on Windows and browsers on mobile devices below Android version 4.4 cannot access this website.
There are also problems with images in smaller viewports. Mobile phones, using recent versions of iOS and Android operating systems should be able display most of the graphics in the landscape orientation and using the desktop setting may help. However, they will still have problems, especially with the layout and the larger images and most mobile browsers do not support Flash™. This page will continue to be a work in progress and, as browser issues were investigated, we added a page comparing browsers, using this SVG page for testing. From the comparisons you will see that this SVG page is best viewed on the larger screens of computers with Chrome, Firefox, Opera, Iron or Vivaldi browsers on desktops and Puffin browser or Webgenie SWF & Flash Browser on Android devices. You can test your computer browsers’ CSS3 and HTML5 capabilities by clicking on the links on the page More Web Tools.
Many of the images on this page are examples of scalable vector graphics, usually referred to as SVGs, which are included in specifications (see footnote 5) issued by the W3C (World Wide Web Consortium). The official icon is shown above using an SVG image. These 2-D graphics range from very simple mono-colour icons to extremely complex multicoloured interactive graphics presentations. It is based on the use of strokes and fills, whose positions and colours can be defined purely by coding using XML (Extensible Markup Language). Simple shapes and geometric patterns can be created by coding mathematically defined vectors, but software such as the free open-source Inkscape and Adobe Illustrator® may be used to create images and add many effects, which can be saved in the SVG format. While Adobe Illustrator® has some similar features to Adobe Photoshop®, it has many fundamental differences. The latter is used used to create and manipulate images, which are made up of pixels displayed on a raster. Such pictures have a certain resolution and, if increased in size, it will become evident that they have limits as to how big they can be enlarged as the image loses sharpness. By contrast, an SVG image can be blown up to virtually any size without losing sharpness. Thus the image, such as the one shown above can fill a mobile phone screen; but could be shown on a screen thousands of times larger with the same sharpness. To get an idea of the efficiency of the use of SVG, the original single logo image file of this logo which has been coded to display the above sizes with variations from 175 x 175 pixels to 20 x 20 pixels is less than 5 kB in size. If you click on the first image, it should open an image that will fill your largest screen. It is not within our scope to discuss the technology of creating or displaying SVG images, but we feel that they are worthy of inclusion to whet the appetite of anyone, who uses modern multimedia devices, to look at this technology.
The animation of SVG images opens some interesting possibilities and clocks have been a subject of much attention. The realistic representation of a flip clock, below on the left, was made using Flash™ with images, but the clock on the right was created by Hardik Sondagar to show UTC (Coordinated Universal Time) using SVG. The original had a white font face and we darkened the font face and the empty parts of the rings, to give more contrast on our page.
The clock on the right was created by Jacopo Colò and originally designed with the background filling the screen. It is interesting because the background changes colour every second by using the time to generate an HTML colour using the hexadecimal notation. Because there are no letters and not all numbers are used in the double-digit values, bright colours are not generated. For more explanation regarding the hexadecimal notation of colours, see the More Web Tools page.
Animated analogue clocks are more of a challenge than simple two-dimensional digital clocks, although the three-dimensional digital clock illustrated below is in a class of its own. The first two examples of analogue clocks shown below were created using Flash™. They have the advantage that most older browsers will display them without problems. As mentioned above, older browsers such as Internet Explorer 8 and earlier will not display SVG images. However, for those that do, you may click on the link in the text below the clock and it should open a large display on a separate page to illustrate the scalability. Even the more simple creations will look better, when increased in size. Small details, such as fine lines will display with rough edges on screens with lower resolutions, but are crisp and clear when enlarged. When Internet Explorer, Safari and other browsers stumble in displaying SVG images and certain types of styling, there are sometimes alternative methods of coding and ways around these problems, which present interesting challenges for web developers. As a last resort for static images, it can be arranged to use a fall-back image in another format.
Simple Flash™ Analogue Clock
This is a simple clean-looking Flash™ analogue clock with a transparent background and black hour marks and hands. Shadows are rendered from the hour marks and the hands.
Adobe SVG Analogue Clock
This is a simple rendition of an SVG analogue clock, which was first published by Adobe in 2001 as an SVG file and released into the public domain. The original had 1 pixel wide bezel and a red second hand. It has been modified here to show all black details and a wider bezel.
La Crosse SVG Analogue Clock
This is an elegant, beautifully rendered example of an SVG analogue clock with realistic fine details, an off-white face and black bezel with a shadow. This work has been released into the public domain by its author, Richard Fussenegger.
Multi-dial Flash™ Analogue Clock
This multi-dial Flash™ analogue clock was included to show the complexity that can be achieved, with month, date and day indicators. Shadows are rendered from the the hands.
Coloured SVG Analogue Clock
This SVG analogue clock is similar to the one from Adobe, but has a transparent face without numbers. Many variations can be played on this theme. Here colours were added to the bezel and the hands, which are now rounded at the ends.
3-D SVG Digital Clock
A truly amazing SVG digital clock, but unlike most digital clocks, this is three-dimensional with a black background and a change of colour on the reverse side of the number display. Changes were made to the font face, size and colour of the flashing date. This graphics file is credited to: www.bogotobogo.com.
Geared SVG Analogue Clock
This is a beautifully crafted analogue clock showing the hours, minutes and seconds. It has a transparent background, with amazing details of the gearing. As those who have designed gearing will know, the design of meshing rears is complicated, but this image accomplishes this and displays the time in an interesting way. A dark grey border was added. An even more elaborate SVG graphics date and time creation, which is rather too big to be squeezed onto this page may be seen by clicking this link: SVG Month, Day, Hour, Minute and Second Display. These graphics files were created by the master SVG craftsman Tavmjong Bah © 2007.
24-hour Analogue Clocks
Any page about analogue clocks would be incomplete without some 24-hour analogue clocks. Although on a digital clock with a 24-hour display the exact time of day will be immediately clear, on an analogue display it can be confusing, because we tend to look the the position of the hands that we are used to seeing on a 12-hour clock, where we can easily tell the time to a minute even without any numbers.
Simple 24-hour SVG Analogue Clock
We adapted this 24-hour SVG analogue clock from the Adobe 12-hour clock shown above and put the zero hour position at the top. The minute and second hands follow a conventional 12-hour clock rotation with 60 minutes and 60 seconds respectively per rotation of the hands. The inner markings for the hours have been added separately from the minute and five-minute marks to make it easier to read the time.
Single-hand 24-hour SVG Analogue Clock
This 24-hour SVG analogue clock only has one hand and at first glance looks more like a compass than a clock. If displayed at larger sizes, the simple clear markings make it possible to estimate the time to an accuracy of about one minute, from the hour hand alone.
Day and Night 24-hour SVG Analogue Clock
This 24 hour SVG analogue clock with a black bezel, the styled hour and minute hands and the symbols drawn with SVG. The white top half of the face represents daylight (06:00 h – 18:00 h) and the grey part of the lower half represents night (18:00 h – 06:00 h), which would be more or less true year-round near to the equator. This clock was created by John Vandervort.
This is a 24-hour analogue clock showing hours, minutes and seconds. The design is best described as a minimalist. The original design, as created by Kurt Grigg, had a black background and grey numbers, which were not appropriate for this page, although very attractive on a black page. This clock may not display, if ad-blocker programmes or apps are being used. In the case of Adguard, you may see the logo (below) in the bottom right-hand corner of this page. If you click on this logo and select accordingly, you can stop the blocking of this image.
SVG Replica of the London Tower Clock
For those who like really big clocks, it is worth looking at the magnum opus of Jim Blackler. Unfortunately his web site has closed, but we had saved the files and you can still see his creation by clicking on the following links: a close-up view or a more distant view of the Tower Clock created with a mixture of raster images, SVG coding and scripts. If you scroll down to the bottom of the more distant image, you will see the gilded inscription in Latin: Domine Salvam Fac Reginam Nostrum Victoriam Primam, meaning “O Lord, keep safe our Queen Victoria the First”. The SVG animated images should open and work well on the latest versions of the four major browsers and the Android default browser.
During the week of 18th August, 2014, the four clock faces on this 96 metre high tower were cleaned for the first time in four years. An unusual task needing special care. Each face is made up of 312 pieces of opal glass. During the cleaning period, the hands of the clock were stopped at 12 o’clock.
This well known Clock Tower at the Palace of Westminster in London, was renamed the Elizabeth Tower as a tribute to Queen Elizabeth II in her Diamond Jubilee year of 2012. The clock has a 7 metre diameter dial and chimes the hour with the striking of the Great Bell, fondly known as Big Ben, which weighs 13.76 tonnes. The hammer used weighs 200 kg and Big Ben’s sound, for more than 150 years has been heard for a distance of up to 8 km. Sadly there is no accompanying sound with the animated graphics. However, the best known bell in the world, which was first heard over radio the via a BBC radio broadcast at midnight on December 31st, 1923 and has been heard on most days ever since, can be heard striking 12 o’clock on a New Year’s eve by clicking the player button.
A recording by BBC World Service of Big Ben at midnight on New Year’s Eve: