Introducing The New Web

This series of articles explores how to integrate SVG into your DHTML applications. While building entire web applications in SVG+JavaScript is possible, most developers have spent a great deal of time and effort in HTML, JavaScript, CSS, and the DOM. Exploring some of the ways in which SVG can be used to integrate with and enhance HTML applications provides us an opportunity to apply what we've learned in SVG without having to start "from scratch" in developing web applications.

SVG, like XHTML, is a declarative XML grammar. XHTML is a format for text documents; SVG is a format for scalable web graphics. Also like XHTML, SVG comes with the ability to be scripted and provides its own Document Object Model (DOM).

Our Sample HTML Application

Let's start with a simple web application: A photo gallery. This application is bare bones, but for roughly 40 lines of code it's not bad: We've provided some minimal styling with CSS and 12 lines of JavaScript to handle switching images.

    function showPreview(img) {
        var div = document.getElementById("preview");
        if(div) {
            var preview_img = document.createElement("img");
            preview_img.className = "the_preview"; 
            preview_img.src = img.id + ".jpg";

            while(div.hasChildNodes()) { div.removeChild(div.firstChild); }
            div.appendChild(preview_img);
        }
    }

An equivalent web application could be built without any JavaScript by moving the business logic of the application to the server and employing a language such as PHP. For the sake of simplicity, the examples included in these articles will focus only on client-side interaction and use JavaScript.

Our first step will be to build the same functional application using SVG for the graphical elements. In other words our HTML document will host SVG thumbnails and an SVG preview image. In the process we will learn a little about the capabilities of SVG, how to integrate SVG with HTML, and how to script across the HTML-SVG document boundary.

Pages: 1 2 3 print