Very fast, but not as beautiful as the full featured file. This is a template for a fictitious ecommerce web site designed for display at any screen size. Be it a HDTV, iPhone, iPad or computer screen the file is designed to scale to the full height and width of the screen.

The "Avatar" of web design, 3D without the funky glasses. Currently only available using the Opera web browser and runs slowly, although the newest Opera version is a big improvement. Kudos to the Opera team! It is well worth seeing what is on the horizon for screen display.

This presentation expounds on a presentation given at the 2009 SVG conference in Mountain View, California. It explains the unique approach that is used for graphic display and provides hands on examples that allow quick use and modification of the example SVG font. It teaches how to display your own images in a 1920 by 1080 pixel HDTV environment.

This is how to view the How To file the way it was designed to be seen. Again, only available using the Opera web browser and runs slowly. These Opera files utilize advanced SVG font features that allow multiple usage of graphic elements from a single data source. Both files use some of the same graphic images in different ways without any duplication of the image data.

If you are using the Opera web browser there are advanced W3C standard features that are employed in the right hand file listings. Unfortunately, these features are not available if you are using American based technologies. Although American technology companies lag behind in implementing W3C standards, they are beginning to see the error of their ways.

One important feature that Opera implements is the font-face-uri element.

This feature allows, and requires, a new thinking of how graphic images and UI elements are used and deployed. If you were to view the source code for the two files you will see that there are no graphic images or graphic data contained within the code. All images and UI elements have been converted to a separate custom graphic font file that is independently placed on the server. Both of the Opera files contain references to the font images using the font-face-uri element. This means that both files display the images independently from one another from a single data source, but both files use the image data differently.

Color, size, placement and transforms are independently controlled without having to create new images.

Traditionally, when preparing a project for print or online display, the graphic images are created at a fixed size and resolution. These files are then grouped together and stored as part of the project. SVG changes this method by allowing a single file to be displayed and used with any device and screen size. The above SVG files are all designed for HDTV screen resolution of 1080p, but they automatically scale to whatever screen size they are being viewed on. This means that the creation of separate images designed for specific purposes can be replaced by the creation of single file graphic data instead. Once this single file graphic data is created, it is just a matter of changing the size, colors, adding filters or gradients and changing the x and y axis in relation to the 1920 by 1080 pixel layout of the display page. The video display processor then renders the image. There is no need for a graphic designer to open any graphic imaging software and edit files, this can all be done by anyone with a text editor.

The page size matters, but so does your content.

With both Google and Apple moving into internet TV, there will be great interest in how best to display your message. Todays toilet paper database driven HTML pages will not work well in this medium. It is inconceivable that people sitting ten feet away from their televisions are going to want to scroll the screen to see the display. Google TV, slated for release in Fall 2010, comes with a keyboard and mouse. This shows lack of foresight on their part and will be rendered obsolete almost immediately. The future of navigation and interaction will be through slate size devices, such as the iPad. There will quickly be an "App" for using your iPad to control the TV, just like sending a page to a printer, you will control the display. That being said, it is also important to address the layout of your content within a fixed page size of 1920 by 1080 pixels. You may think that this does not give you enough room to display all the information you want to display. Not true. When you see a web page that is long and requires scrolling, you are seeing the data displayed top to bottom on the y axis. The content starts at the top of the page and ends at the bottom. What is needed is to NOT use the y axis, but instead use the Cartesian Z axis. Instead of top to bottom, think front to back. The above How To file discusses this in greater detail. Notice that in the example files when you click on a button there is no page refreshing, unless you are directed to an external file. You can view the source code to see how this is accomplished.

Is it hard to learn? How come this technology is not in wider use?

Not really, the hardest part is being open to realizing that SVG is just the natural progression of internet languages. HTML was the beginning, then came DHTML, now there is XHTML and next will be SVG. You might ask "What about HTML 5?" It is human nature to resist change, even if it is beneficial. Couple this with the millions and millions of dollars the big corporations have invested in HTML technology and software and you can see how it is in their vested interest to maintain the status quo and stall progression. Unfortunately for these corporations, most of which are headquartered in America, they can not control other countries progression. When a small company in Norway, with less then 500 people, can implement a native SVG web browser, the jig is up. That is why the American based web browsers, such as Google Chrome, Apple Safari, Firefox, Konqueror for Linux and even Microsoft Internet Explorer are now implementing the same features. Of course this will take some time as these corporations have only tens of thousands of people working for them, please be patient.

If the corporations don't want me to learn, why bother?

If you are just looking to punch a clock for a paycheck with one of these corporations, then there is no need to worry about advancing in the IT field. You will be able to scrape by for a few more years until your skills are obsolete. For those that actually enjoy working in this field, and take pride in their skills, you should realize that the traditional workplace is changing. In the future many more of us will be working as freelance contractors. It is imperative to be prepared for any opportunities that arise, and opportunities for developers with SVG knowledge are becoming available. Realize that the best teacher you can find is yourself. Read the specs, practice usage and get involved with SVG technology groups and enjoy the future. I hope these small tutorial examples can help.