6343 views

 

27% Ahornberg

::|CONTENTS

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.

Tools

---

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

Tutorials

---

- https://en.flossmanuals.net/digital-foundations/_full/ - this "flossmanual" includes a good Inkscape tutorial (besides Gimp and Scribus)
- https://fullcirclemagazine.org/downloads/ - the first issues of Full Circle Magazine (pdf) has Inkscape tutorials
- https://www.w3schools.com/graphics/svg_examples.asp 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)
- https://youtu.be/cCvhWT3CJsg how to animate path objects in svg

See also

---

You can find tutorials and reference here

if you want to manually write it in XML.