SVG, graphics in XML for the Web

SVG, Scalable Vector Graphic, is a specification of documents to describe scalable 2D graphics in XML. It is compatible with XML 1.0.
It is mainly used in replacement to Flash for creating graphics for the Web.
There are frameworks to build Web applications in SVG.

Summary
tetris SVG
The Tetris game in SVG

Why use SVG?

SVG allows to put graphics inside a web page, or a desktop document that can interacts with textual data. A SVG page may be built from a database, it may be searched by a search engine. You can turn XML numeric data into graphics by an XSL transformation.

Compared with Canvas, SVG is better suited as a format for graphics produced with a drawing program, to be integrated into a web page, while Canvas is better for graphics dynamically created in the page when it appears.

Compared to a bitmap picture, SVG has the advantage of resizing without loss in definition, and allows interaction with the user.
You can display a city or a building and allow a user to visit it by selecting locations.

SVG is a standard defined by the World Web Consortium and may be freely used at production or end-user level without license to pay.

How to use SVG?

A SVG file is an XML document with graphical tags. It is viewed with a common browser with a plug-in, or a special viewer.
SVG may be used:

Example:

<embed src="webmasting.svg" type="image/svg+xml"  width="200" height="100">

Main functions of SVG

File format

A SVG file must have the ".svg" extension under Unix and Windows.
A compressed, zipped SVG file must have the ".svgz" extension.
In the same manner you can save an image taken from a web page, you can save SVG either as .svg or .svgz.

A SVG file has no doctype but an informative svg tag instead:

<svg version="1.1"
        baseprofile="full"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        xmlns:ev="http://www.w3.org/2001/xml-events">

How to program SVG documents?

To build a SVG document you need for a canvas. Batik provides a such Java canvas named "SVGCanvas2D" that convert your drawing into SVG.
If you want visually build a SVG document, you need for a component that can display SVG content and let the user interact with that content (insert object, rotate, put text, etc...). JSVGCanvas is a Java component to do that.
You need also to manipulate the SVG document from a scripting language with a DOM API. DOM (Document Object Model) is an object oriented representation of the document. Events may be assigned then to SVG elements.
All these modules are provided by Batik for Java programmers.

Components of SVG

Data types

A SVG document is made of:

Elements

SVG vs. Canvas

As can be seen in the examples below:

We generate content directly into Canvas in the page with JavaScript code. But we can automatically generate SVG content from data taken from a database to convert them into graphics.
Or a drawing may be made with Inkscape to produce a file that is embedded in an HTML page.
SVG tags can contain HTML tags. A link tag <a> for example. This is not the case for Canvas.

We can build a game with both SVG Canvas.

SVG and XML

XML may be translated into SVG with an XSL definition. This allows documents produced by application, statistics for example, to be turned directly into a graphical view.
It is compatible with HTML 4.0 and XHTML 1.0
The following XML extensions may be used on SVG documents:

Converting SVG to GIF, PNG, JPG or other raster image

Using Batik

This is easy, just export the image in the raster format. The result is not perfect.

Make a screen shoot

  1. Set the screen to a resolution high enough to display the whole image.
  2. Use a capture tool such as IrfanView or XnView or a specialized tool as MWSnap, and start capturing in background task for the current window and client.
  3. Display the SVG file with a modern browser and press the capture key.
  4. Save the capture, as a PNG or JPEG file.

Use FOP

FOP is a java tool from Apache to convert SVG to PDF.

Hello World! in SVG

Example of a minimal program, running on all modern browsers.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg width="220px" height="120px"  xmlns="http://www.w3.org/2000/svg">
    <g>
        <text font-size="32"  x="25" y="60">
           Hello, World!
        </text>
    </g>
</svg>

SVG in a HTML page

You can insert the following code into an HTML page, it will appear perfectly ...

<svg width="220px" height="120px">
     <text font-size="32"  x="25" y="60" fill="green">
            Hello, World!
    </text>
</svg>
Hello, World!

Simple demo: Tetris

Load the SVG file to run the demonstration.

You can look at the source of the page or download directly the page to view the source. It is a SVG and JavaScript file.
The SVG code is used primarily to provide a graphical surface as does the Canvas tag and drawing functions, most of the program is JavaScript.

More informations and demos

Trajan palace

Demonstrations

References

Libraries

Tools

© 2006-2021 Xul.fr