SVG superpowers

SVG (Scalable Vector Graphics) is a XML file format for images, a lot like HTML, that can be scaled without loosing quality.

SVG files are mostly used for:

  • Icons
  • Logos
  • Charts
  • Maps
  • Sketches
  • 2D technical drawings
  • Games
  • Cartoons and animations
  • Custom shaped page components
  • Printing with great precision
  • Printing commercial banners
  • Printing t-shirts
  • Precision cutting tools, like SIlhouette
  • Laser cutting and engraving

SVG superpowers:

  • Support for animation, styling and interaction
  • Can draw any shape, line and color possible, with incredible precision
  • Can be displayed on most devices and platforms (all that matter)
  • Easy to understand and use. Only understanding the basics is enough to draw cool things
  • Can be created and edited with any text editor
  • Doesn't loose quality when zoomed
  • Can be printed with high quality at any resolution
  • Support for CSS styling and javascript
  • Can be directly integrated, animated and styled in HTML, used as an image resource or as a separate file

This section is a tutorial about how to create and use SVG images as files or as HTML elements.

Knowing a basic level of CSS and HTML would help.

Basics