What is SVG?

Scalable Vector Graphics, or SVG, is a markup language for representing images (much like HTML is a markup language for representing text). Unlike raster image formats (GIF, PNG, JPEG), which store image data as a collection of pixels which are assigned colors, SVG stores image data by describing the geometric objects which compose the image.

Advantages of SVG over bitmaps:

• Ease of modification: Design elements are stored separately in SVG, so changes are non-destructive. Correcting a typo on a game map stored as a bitmap can be difficult and time-consuming because all that a bitmap stores is the color of each pixel. There is no way to reconstruct what is "behind" your text unless you've saved previous versions of the bitmap. Objects in an SVG image may be modified independently of each other, and do not destroy what they overlay. Size changes are also trivial in SVG. Bitmaps do not scale well, so the realization that your tokens are too large might mean that you have to redo all of them. SVG can be rescaled without loss of image quality.
• Common design elements: SVG images support inclusion of design elements from external files. Symbols may be created once, put in a symbol library, and included where needed by using use elements. An additional benefit is that updating images in your symbol library will cause all images which use those symbols to use the updated version automatically.
• Mass token creation: Because SVG images are stored as XML, it is possible to create tokens programmatically using a scripting language (sh, Perl, Python). Nearly all of the 2000+ tokens in The Longest Day module were created by a Perl script which took data from a spreadsheet describing all of the tokens to be created. This would have been difficult using bitmaps.
• Smaller modules: A bitmap image will tend to be far larger than the equivalent SVG image. When compressed in a module, the difference is often 16:1 or more.
• Better quality zoom and rotation: SVG images—because they are vector, not raster graphics—will appear as sharp as possible at any level of magnification and at any angle.

How to use SVG in VASSAL:

As of version 2.9.9, SVG images may be selected for use in modules like any other image type. In order to include SVG fragments across files, use use elements. For example, the following fragment

<use x="0" y="0" xlink:href="symbols.svg#s" />