HTML and CSS Reference
In-Depth Information
FIGURE 1-40 Progression of text with changing styles
The canvas is a strong utility for presenting graphics dynamically in the browser. However,
it's not the only graphical tool available. In the next section, you look at using Scalable Vector
Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVG) is an XML-based language for creating two-dimensional
graphics. It's implemented by using tags defined by the SVG XML namespace and embedded
in HTML5 documents within opening and closing <svg> elements.
SVG objects don't lose any quality as users zoom in or out. You can access SVG objects
via the DOM, and—similar to HTML elements—SVG elements support attributes, styles,
and event handlers. The <svg> element provides a container in which to render graphics;
SVG renders inline with the page's layout. Here's an example of an SVG graphic with event
<!DOCTYPE html>
<title>Test Web Page</title>
<script language="javascript">
function Red(evt) {
var circle =;
circle.setAttribute("style", "fill: red");
function Green(evt) {
var circle =;
circle.setAttribute("style", "fill: green");
Search WWH ::

Custom Search