1.5.4. Vector Graphics Formats

The following vector graphics are mostly used to visualise 2D vector formats in the browser:

SVG (Scalable Vector Graphics)

SVG is an XML based markup language for describing two-dimensional vector graphics, both static and animated. It is an open standard created and recommended by the W3C.

SVG allows three types of graphic objects:

• vector graphic shapes (e.g. lines, circles, rectangles, etc.)
• raster graphics images
• text

Graphical objects can be grouped, styled and transformed. The feature set includes i.a. nested transformations, alpha masks and filter effects. SVG drawings can be dynamic and interactive. An SVG file can be written in an arbitrary text editor (e.g. UltraEdit) or created and edited with a vector graphics program such as Adobe Illustrator or the free alternative Inkscape.

Typical browsers such as Firefox, Safari and Opera can render SVG content. However, in Internet Explorer you need the plugin Adobe SVG Viewer to see the example.

Population Density of Switzerland in a SVG map (Schnabel 2008)

Flash

Flash is a widespread, binary and proprietary vector format, originally designed by the software company Macromedia, now property of the company Adobe.
Flash is not only able to show vector graphics. Video and audio clips may be easily integrated, or generated. Graphics can be exported from the software Macromedia Freehand, Adobe Illustrator or CorelDRAW, and/or edited with the software Macromedia Flash. There is a wide range of functions for animating and integration of special graphical effects. (NEUMANN et al.)

For the visualisation of the following example in your browser, you need the plugin Adobe Flash Player.

Iceland as Flash (Iceland Tourist Board - North America)

The next example shows you that flash is often used to realize animations.

Another Flash Animation

XAML (Extensible Application Markup Language)

XAML is Microsoft's XML-based language. It is basically a copy of SVG, mixed with tags for form elements. It differs only in some tag names (e.g. SVG uses the tag <rect> and XAML uses the tag <rectangle>).
Like in XForms and XUL, buttons and forms in XAML are easy to implement using the appropriate tags (e.g. <button>clickme</button>).
In typical usage, XAML files will be produced by a visual design tool, such as Visual Studio, to design user interfaces.

To see an example and get more information, please go to Microsoft's XAML homepage. For the visualisation of the XAML files in your browser, you need the Microsoft Silverlight Plugin.

The next two formats are 2D vector formats which are used for printing.

PDF (Portable Document Format)

PDF is a file format developed by Adobe Systems for representing documents in a manner that is independent of the original application software, hardware, and operating system used to create those documents. It therefore does not matter on which platform and with which program you are writing e.g. a text document. When exporting it as a PDF file every other platform (Windows, Mac or Unix) is able to read it anyway. A PDF can describe documents containing any combination of text, graphics, and images. These documents can be one page or thousands of pages, very simple or extremely complex with a rich use of fonts, graphics, colour, and images. PDF files are most appropriate for encoding the exact look of a document in a device-independent way. (WIKIPEDIA)
To read a PDF file you have to install a PDF reader such as Adobe Reader which is free to download.

For the visualisation of the following example, you need the Adobe Acrobat Reader.

Iceland as PDF (Scantours)

PS (PostScript)

PostScript is a page description language. When saving graphics and printing pages as PostScript format you are able to open them on various output devices and in variable sizes without loss. Graphical elements and fonts are described as vectors. The PostScript format is optimized for printouts and is not so suited for the output on the screen. (WIKIPEDIA)
Furthermore, PS is not made for the manipulation of the content.

To view PostScript files you have to install a PostScript viewer on your computer, such as e.g. Ghost View 4.7

It is important to know that for printing a different colour space, CMYK (Cyan, Magenta, Yellow, Black ), is used as for screen displays. For more information about this colour space have a look at the GITTA lesson Colour Design.

In this lesson we discussed only 2D vector graphics. If you are interested in vector graphics which are used in the 3D space, have a look at the module "3D applications".