History of SVG — Scalable Vector Graphics

SVG (Scalable Vector Graphics) is the universal format for resolution-independent graphics on the web. Every icon, illustration, and diagram exported from this editor is rendered as an SVG. But SVG’s road to ubiquity was a surprisingly bumpy twenty-year journey through browser politics, competing standards, and near-abandonment.

The Vector Graphics Problem

In the early web era (1993–1997), the web had images — but only raster images (GIF, JPEG, later PNG). Raster images are built from pixels, which means they blur when scaled up. For logos, icons, and technical diagrams, this was a fundamental limitation.

The desktop publishing world had vector formats — Adobe’s PostScript (1984) and its simplified cousin PDF (1993) — but these were not designed for the web. What the web needed was a vector format that:

• Is text-based (like HTML), so it can be created and edited with a text editor
• Works inside a web browser
• Supports animation, interactivity, and CSS styling
• Is an open standard, not proprietary

The Browser Wars and the Competing Standards (1998)

In 1998, no fewer than four competing proposals for web vector graphics were submitted to the W3C:

The W3C created the SVG Working Group to unify these proposals. Microsoft had already shipped VML in Internet Explorer 5 (1999), creating immediate fragmentation. Adobe had Flash competing from a different angle entirely.

SVG 1.0: The Standard is Born (2001)

The W3C released SVG 1.0 as a Recommendation on September 4, 2001. It defined:

• Basic shapes: <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>, <path>
• Text: <text>, <tspan>, <textPath>
• Styling: CSS properties and inline styles
• Animation: <animate>, <animateMotion>, <animateTransform> (from SMIL)
• Interactivity: JavaScript event handlers
• Filters: blur, drop shadow, colour transforms
• Gradients and patterns: <linearGradient>, <radialGradient>, <pattern>
• Clipping and masking: <clipPath>, <mask>

SVG’s <path> element is the heart of the format. It uses a compact command language to describe arbitrary curves:

<path d="M 10 10 L 90 10 L 90 90 Z" fill="blue" />

• M — Move to
• L — Line to
• C — Cubic Bézier curve
• A — Elliptical arc
• Z — Close path

This compact notation can describe anything from a simple rectangle to the outline of a typeface glyph.

The Flash Era and SVG’s Difficult Adolescence (2001–2011)

SVG 1.0 landed in a hostile environment. Adobe Flash dominated rich web graphics through the 2000s — it was easier to use, had better tooling, and ran consistently across browsers. Internet Explorer, by far the dominant browser, did not support SVG natively until IE9 in 2011.

Instead, IE used its proprietary VML format, and SVG in IE required Adobe’s SVG Viewer plugin. This split made SVG effectively unusable for mainstream web development for almost a decade.

Firefox 1.5 (2005) added basic SVG support. Safari 3 (2007) added SVG support. Chrome launched in 2008 with SVG support from day one.

Meanwhile, SVG 1.1 (2003) and 1.2 Tiny (designed for mobile devices, 2008) refined the standard but saw slow adoption.

Apple Kills Flash; SVG Wins (2010–2012)

The turning point came from an unexpected direction. In April 2010, Steve Jobs published his famous open letter “Thoughts on Flash”, announcing that Flash would never be supported on the iPhone. He cited SVG and HTML5 as the open alternatives.

This decision reverberated immediately:

• Adobe announced the end of Flash for mobile in 2011
• Adobe Flash End-of-Life was officially set for December 31, 2020
• Browser vendors accelerated SVG support
• The web design community pivoted rapidly to SVG for icons and animations

By 2012, SVG was fully supported in all major browsers including IE9+. After a decade of false starts, SVG had won.

SVG in the Modern Web

Today SVG is everywhere:

• Icons: Every major icon library (Font Awesome, Heroicons, Lucide) is SVG
• Logos: Company logos on websites are almost universally SVG
• Charts and diagrams: Every text-based diagram tool outputs SVG
• Illustrations: Web illustrations are SVG for infinite resolution
• Animations: CSS and JavaScript animate SVG elements natively

SVG in This Editor

When you embed a diagram (Mermaid, Graphviz, PlantUML, D2), the diagram is:

1. Rendered server-side by Kroki into an SVG
2. Embedded directly in the HTML as an <img> or inline <svg>
3. Included in the PDF as a vector element — infinitely sharp at any zoom level or print resolution

SVG’s scalability is why diagrams in PDF exports look crisp whether printed at A4 or A0 poster size.

SVG 2: The (Very Slow) Next Version

SVG 2 has been in development since 2012. It aligns SVG more closely with CSS, adds new features, and removes deprecated elements. Browser support has been inconsistent — some SVG 2 features are well-supported, others are not. As of 2026, SVG 1.1 remains the safe target for maximum compatibility.

Key Facts Timeline

SVG is now as fundamental to the web as HTML and CSS — a 25-year-old format that, after a rocky start, became genuinely indispensable.