Scalable Vector Graphics (SVG) Knowledge

Contents

• Overview
• Core Idea
• Key Concepts
  • Coordinate System and Positioning
• SVG Terminology

Overview

Scalable Vector Graphics (SVG) is an XML-based markup language and format for creating 2D vector graphics.

Of note, an SVG graphic may be:

• animatable
• interactable (e.g. respond to click events)
• styled with CSS
• embedded directly in an HTML document or stored as a separate .svg file

Mutli-line text is not natively supported: each line and line break must be managed individually.

Core Idea

Describe how the image should look using markup to represent shapes, text, and operations, and have clients render as a vector graphic.

Key Concepts

Coordinate System and Positioning

The origin, (0, 0), is located in the upper left hand corner, with the x-axis increasing to the east and the y-axis increasing to the south. Pixels in this coordinate system are translated into user units for rendering.

SVG Terminology

absolute units

units in “pt” or “cm”

Related: user units

raster

dot matrix data structure that represents a generally rectangular grid of pixels

user units

plain numbers, no unit type. one user unit equals one screen unit