Introduction

Scalable Vector Graphics (SVG) are XML-based markup language to create two-dimensional vector graphics (MDN).

You can create SVG images using tools like Inkscape or Gravit, or using your trusty text editor (which will be explored in depth here).

Example

As an XML dialect, SVG must always bind the namespaces correctly. Generally, you would put xmlns="http://www.w3.org/2000/svg" on the root <svg> element.

Also, notice that later elements are rendered on top of previous elements.

<!-- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started -->
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <rect width="100%" height="100%" fill="red" />
  <circle cx="150" cy="100" r="80" fill="green" />
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">
    SVG
  </text>
</svg>

References

• SVG: Scalable Vector Graphics (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG
• Getting Started (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started