Article History
34% nitrofurano
svg (format)

Scalable Vector Graphics


Point Type:
File Types:
Max Filesize:
Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.
  1. Tools
  2. Expert Tips
  3. Tutorials
  4. See also
Scalable Vector Graphics is an XML-based format developed by the World Wide Web Consortium (W3C) as a vector graphics format to be used on the web (however, since its creation it is being used in other areas of computing). Vector graphics are made up of definite curves, lines, and points. These allow for images to be scaled without necessarily losing detail compared to traditional raster graphics, which lose detail as they are scaled. This can also cause a variety of artifacts, such as pixelation.


Depending on the bit pack, you have either to handwrite your svg or you're free to use tools such as Inkscape as well.
You're free to use whatever you want for major battle entries, though you might get the best results if you do the code yourself ;D

Expert Tips

Here are some important things to keep in mind:
- SVGs can be animated! If you aim for a very cool first impression, an animation might be the best thing to achieve this!
- SVGs can be interactive! There might be cool situations, where interaction with the svg are useful. Be creative!!! ^o^
- SVG documents are transparent by default, not opaque white - this makes no difference on documents printed on white paper, but if you need to have an opaque white on background, you might need an opaque white rectangle covering the whole canvas
- when using text, chosen typefaces (fonts) can be embedded, but some editors don't support this yet (like Inkscape, it just supports system installed typefaces), which means you might need to edit the .svg in a text or xml editor for using that


- - this "flossmanual" includes a good Inkscape tutorial (besides Gimp and Scribus)
- - the first issues of Full Circle Magazine (pdf) has Inkscape tutorials
- is plenty of simple svg examples for analyzing how the format is structured (just consider what is between <svg> and </svg>, since most or all examples there are about svg files embedded into html files)

See also

You can find tutorials and reference here
if you want to manually write it in XML.

Battle Formats