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”

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