XML —

Inside the SVG Language

As is the case with most XML-based languages, there are some housekeeping issues associated with SVG that you must know about before diving into the creation of SVG documents. Following are some key pieces of information related to SVG that are helpful to know as you begin learning more about the SVG language:

  • SVG has four different DTDs (Document Type Definition), which are declared as follows:

    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">

  • The SVG namespace is http://www.w3.org/2000/svg.

  • For server considerations, the MIME type for SVG is image/svg+xml.

The SVG DTDs are important for SVG document validation. The first DTD is for the original version of SVG, 1.0, while the latter three DTDs refer to different variations of SVG 1.1. More specifically, the latter three DTDs refer to the full version of SVG 1.1, the basic version of SVG 1.1 (SVGB), and the tiny version of SVG 1.1 (SVGT), respectively. Although the DTDs are all important for SVG document validation, the SVG namespace is necessary for using elements and attributes within the SVG language. The SVG MIME type isn't quite as critical and really enters the picture only from a web-server perspective when SVG documents are being served to web browsers.

The Bare Bones of SVG

As with all XML documents, SVG documents are required to have a root element, which in the case of SVG is the svg element. Beneath the SVG element is where you place specific SVG content consisting of additional SVG elements and attributes. There are three fundamental types of graphical objects that can be used within SVG drawings:

  • Primitive vector shapes (squares, circles, and so on)

  • Vector text

  • External bitmap images

Vector shapes are what you might typically think of as traditional vector graphics objects, with examples including lines, squares, circles, and so on. Additionally, you can include vector text, which is basically any text rendered in a mathematical font, such as a TrueType font. To style vector text, SVG makes use of CSS (Cascading Style Sheet) attributes. Please see XML Formatting Strategies, "XML Formatting Strategies," and Styling XML Content With CSS, "Styling XML Content with CSS," for more information about using CSS to create style sheets and the section in this tutorial, "Drawing Shapes with SVG Child Elements," for specifics of style rule names and functions that have been adapted for use in SVG.

In the wider scheme of things, you can also use XSL transformations and XSL formatting objects to broaden the reach of SVG or to broaden another application's access to SVG. See XSL Basics, Transforming XML With XSLT, and Formatting XML With XSL-FO for an in-depth discussion of XSL technologies.

SVG Coordinate Systems

To render graphics on a page or monitor, a graphics application must refer to a system of coordinates that determines the size and units of measurement associated with the drawing surface. SVG supports a few different systems, depending on your specific needs. By default, SVG measures its drawing surface in arbitrary "non-dimensional local units." Whereas some shapes can be defined by pixels (px), points (pt), inches (in), or centimeters (cm), other elements can be described only in abstract units, which the browser maps to pixels on the screen. When you don't specify real-world units of measurementfor instance, when you say r="50" to indicate the radius of a circleSVG uses these non-dimensional local units to determine how an object is drawn to the screen. Additionally, some graphical elements, like path and polygon, support only such units. If you need to work with real-world measurements, you must redefine the coordinate system, as discussed in the following section.

By default, the opening "canvas" of an SVG drawing is infinite, which means it has no width or height. It's generally a good idea to set the size of the canvas using the width and height attributes of the root svg element. You learn how this is accomplished in the next section when you start assembling your first SVG drawing. In fact, let's get started now.