AllOnline Stories · Vol. I · The Origin of Vectors
SVG
The vector rebellion. How mathematical code freed images from the tyranny of pixels and reinvented the canvas of the web.
Scroll into the vector story
Interactive lens: Move the cursor / Touch the grid
PIXEL
Act I · The Bitmap Era
The web was born trapped inside a rigid grid.
In the early years of the Internet, an image was a blind mosaic: a fixed table of cells with assigned colours. Enlarge it or place it on a modern display and the illusion breaks, revealing the hard reality of pixelation.
Every image had a physical limit.And every enlarged edge eventually became a broken staircase.
Act II · 1998 · The Format War
Six giants entered. None would rule alone.
Microsoft pushed VML. Adobe and IBM backed PGML. Sun, Netscape and HP had their own visions. Instead of handing control to a private monopoly, the W3C merged the strongest ideas into an open standard.
No corporation won. Open-web interoperability won.
September 2001 · The W3C Specification
Pixels became instructions.
The screen stopped being a warehouse of static dots and became a geometry processor. The browser could now draw strokes, Bézier curves, gradients and transforms in real time at the native resolution of any display.
Act III · Document Anatomy
An image you can read like source code.
SVG is not an opaque binary; it is a structured XML document. Change the numbers in the d attribute directly in the editor or drag the handles on the canvas to sculpt the geometry in real time.
● Live Editable XML
<svg viewBox="0 0 240 240">
<path
d=""
fill="none"
stroke="currentColor" />
</svg>
💡 Click and type new numbers or drag any node
P1: [35, 165]C1: [85, 30]C2: [155, 30]P2: [205, 165]
Act IV · The Resolution Duel
Zoom is the supreme court of sharpness.
While the bitmap stretches its cells until they break into blurry artifacts, the vector engine recalculates geometry for the display and keeps edges crisp at any scale.
Rasterized Copy (.PNG)Pixels grow and break into stair-steps.
100%
Native Vector SVGGeometry is recalculated, infinitely crisp.
Act V · The Mathematics of Weight
Visual weight does not have to cost megabytes.
A large bitmap must store a fixed grid of colour values. A simple SVG can describe the same kind of graphic with only coordinates and instructions, often transferring dramatically less data.
Raster (@3x PNG)
2.4 MB
4,000 × 4,000 px of fixed raster weight, with resolution tied to the source grid.
Vector (.SVG)
12 KB
Resolution-independent geometry in only a few kilobytes of compressible code.
Honest Diagnosis · Format Limits
Not every image is meant to become geometry.
A photograph captures the continuous chaos of natural light: noise, organic textures and endless gradients. Converting every variation into paths can create a heavy SVG that is expensive to process. Good design means choosing the right representation for each visual problem.
Act VI · Awakening in the DOM
An illustration that becomes a living interface.
When embedded inline, SVG stops being an isolated image and joins the document tree. CSS can style its parts, JavaScript can listen for interaction and the illustration can react to the user in real time.
<svg>
<g id="icon">
<path id="curve" />
</g>
</svg>
clickhoverstate
01 · Native CSS
Style comes alive on its own.
Strokes, fills, shadows and transforms can animate directly with CSS without exporting heavy video files.
02 · Dynamic Stroke
Lines that draw themselves live.
With stroke-dasharray and stroke-dashoffset, a complex path can be progressively revealed, creating the illusion of real-time drawing.
03 · Declarative SVG (SMIL)
Choreography inside the file.
Declarative animation can travel inside the graphic itself, giving the asset autonomous motion without an external animation library.
04 · Reactive JavaScript
Geometry that listens to the user.
Pointer movement, scroll or live data can manipulate control points in real time, turning raw input into responsive visual systems.
Move the pointer or touch
8 Bézier VerticesX: 0, Y: 0
Act VII · Accessibility and Semantics
Visible is not enough: it must be understandable.
An image without semantics can become a wall for people using assistive technology. With ARIA roles and elements such as <title> and <desc>, vector graphics can expose meaningful information to screen readers.
<svg role="img">
<title>Quarterly revenue</title>
<desc>Growth accelerates in Q4</desc>
<g>...</g>
</svg>
<title>Quarterly revenue</title>
<desc>Growth accelerates in Q4</desc>
<g>...</g>
</svg>
Screen Reader (Synthetic Audio)
“Quarterly revenue. Growth accelerates in Q4.”
Perspective · The Living Standard
A mature format that keeps evolving.
Decades after its birth, SVG remains a foundational language for icons, interfaces, motion and data visualization across the modern web.
Not infinite.
Durable.A standard survives when billions of documents, browsers and design tools can understand one another without an intermediary.
Durable.A standard survives when billions of documents, browsers and design tools can understand one another without an intermediary.
From history to action
It is time to create with vectors.
Optimize your assets, convert between formats and clean your vector code with AllOnline’s free browser tools.
AllOnline Stories · Designed to learn, built to create.