SVG — Complete Guide: W3C History 1996-2025, How to Open, How to Export an OpenStreetMap Map

SVG is an XML document describing vector graphics with <path>, <circle>, <text> tags. A map of Nevsky Prospect in SVG scales from a 32×32 icon to an A0 poster without blurring and typically weighs between 200 KB and 8 MB. The format opens in any modern browser, Inkscape, Adobe Illustrator, Figma, and CorelDRAW. It is the only vector format with official W3C web standard status and built-in accessibility support via <title>, <desc>, and ARIA attributes. For web, print, laser cutting, and interactive maps, SVG has been the primary working format for nearly a quarter century.

History: from facsimile protocols to web standard

In October 1996, W3C published a call for proposals for a vector graphics format for the web. Before that, browsers handled only raster — GIF and JPEG — while Microsoft's VML and Adobe's PGML competed as two proprietary proposals. The joint working group merged both approaches, and in February 1999 released the first public draft under the name Scalable Vector Graphics.

SVG 1.0 reached W3C Recommendation status on September 4, 2001 — a full international standard, not retired or frozen. SVG 1.1 followed on January 14, 2003, introducing a modular structure (SVG Tiny, Basic, Full) for mobile devices. The Second Edition of SVG 1.1, published August 16, 2011, remains the most widely supported version: every browser, Inkscape, Illustrator, and most CAD programs understand it.

SVG 2 reached W3C Candidate Recommendation status on September 15, 2016, with the current draft updated October 4, 2018. As of late 2025, SVG 2 remains at Candidate status while the working group continues compatibility work with HTML5 and CSS3. In practice this is not blocking: browsers implement most SVG 2 features independently of the spec's formal status.

The steward is the W3C SVG Working Group. The license is royalty-free with no patent restrictions: any company or developer can implement an SVG parser or generator without fees. This fundamentally differentiates SVG from closed formats like CDR or DWG.

What's inside an SVG file

SVG is a plain UTF-8 text XML document. It opens in any editor — Notepad, VS Code, Sublime Text. The minimal structure looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 1000 800"
     width="1000" height="800">
  <g id="water" fill="#a8d5e2">
    <path d="M 120 340 L 280 360 L 290 420 L 130 410 Z"/>
  </g>
  <g id="roads" stroke="#ffcc00" stroke-width="3" fill="none">
    <path d="M 50 400 C 200 380 800 420 950 400"/>
  </g>
</svg>

The root <svg> declares namespace http://www.w3.org/2000/svg and the viewBox attribute — internal coordinates the picture lives in. ViewBox solves the main scaling task: SVG can be rendered at any physical size, and the browser recomputes coordinates proportionally. <g> groups bundle objects into layers; this is how Inkscape implements layers on top of the standard via <g inkscape:label="Roads">.

The d command in <path> uses a mini-language with commands M (moveto), L (lineto), C (cubic Bezier), Z (closepath). Tens of thousands of OSM buildings or roads become one long <path> or a set of <path> elements inside <g> — size and rendering performance differ between the two approaches.

Who needs SVG: five roles

Web developer. SVG embeds directly in HTML or attaches via <img> and CSS backgrounds. Event listeners can hook onto individual buildings or districts, highlight on hover, sync with page filters. For interactive maps without Leaflet or Mapbox dependencies, this is the most compact path. D3.js by Mike Bostock is built entirely around SVG.

Designer. SVG is the lingua franca of design tools. Inkscape saves SVG natively, Illustrator exports via File → Export → SVG, Figma supports copying SVG code to clipboard, Affinity Designer treats SVG as an internal format. Designer grabs a map from osm2cdr.ru, opens it in Illustrator, recolors roads to brand palette, adds markers and labels, saves back to SVG for the web or exports to PDF for print. The workflow takes minutes, not hours.

Editor and accessibility specialist. SVG officially supports accessibility for low-vision users via <title>, <desc>, and ARIA roles. Screen readers NVDA, JAWS, VoiceOver read <title> on element focus. A metro stations map can contain <title>Vosstaniya Square station, exit to Ligovsky</title> inside each station's <g> — a screen reader user gets full navigational information without visual browsing. This is an SVG-unique capability, unavailable to PDF and especially PNG.

Print specialist. SVG's vector nature means one file prints a 90×50 mm business card and an A0 poster with full detail. Print shops more often ask for PDF or EPS, but SVG converts losslessly to both via Illustrator, Inkscape, or the rsvg-convert command-line tool. CMYK is officially unsupported (SVG 1.1 knows only sRGB) — this limitation is worked around by converting to PDF/X at the final stage.

Contour production. Laser cutters, vinyl plotters, and CNC machines read SVG directly or via software like LightBurn and LaserGRBL. A street map in SVG becomes a wood-engraving blueprint: each <path> is a separate cut. Remove fills, keep strokes only, and verify contour closure beforehand.

Software for SVG: seven programs

Inkscape. Free, GPL-licensed, available on Windows, macOS, Linux. Version 1.3 released July 12, 2024; 1.3.2 is the current stable. Inkscape is the primary vector editor for those who don't pay for Adobe. It natively treats SVG as its working format, understands all <g inkscape:label> layers, exports to PDF, PNG, EPS, DXF. For post-processing OSM maps it's the optimal choice. inkscape.org

Adobe Illustrator. Paid, included in Creative Cloud subscription (~$23/mo), Windows and macOS. The professional standard in design and print. SVG import in Illustrator isn't perfect — large files open slowly, it imposes internal transformations, occasionally loses the id attribute. SVG export from Illustrator is cleaner: configurable precision, font embedding, minification. adobe.com/illustrator

Affinity Designer. Paid, one-time purchase ~$70, no subscription. Windows, macOS, iPad. UK-based Serif's Illustrator alternative. SVG reads and writes fully compatibly with the web standard, export is especially clean for web developers. affinity.serif.com/designer

Figma. Free for basic use, $15/mo for Pro. Runs in browser and as desktop apps for Windows and macOS. Not a vector editor in the classical sense but a UI/UX tool, with solid SVG import/export. Handy for assembling page mockups with embedded OSM SVG frames. figma.com

CorelDRAW. Paid, ~$500 one-time or subscription, mainly Windows (Mac version is limited). Polish-rooted standard among Eastern European print shops. SVG opens correctly, but internal CDR format is proprietary and may lose SVG-specific features (filters, SMIL animations) on save. See CorelDRAW + OSM workflow for details.

Boxy SVG. Paid, $9.99 one-time or $2/mo. Microsoft Store, Mac App Store, Chrome app, web. Lightweight SVG-only editor. Often recommended as a minimal Inkscape alternative for quick file fixes without a 700 MB install. boxy-svg.com

Any modern browser. Chrome, Firefox, Safari, Edge open SVG by double-click and display as a regular picture. Not an "editor" but convenient quick preview without heavy software. The browser is also the only environment for verifying SMIL animations and interactive scripts in SVG.

Pros and cons

Pros. W3C open standard — guaranteed file readability in 20 years, no reverse engineering. Infinite scaling without quality loss: one file for favicon and billboard. Compact size for typical maps: 200 KB for a city block, 2–4 MB for a district, 8 MB for medium-detail city center. Editable in a text editor: a Python script can rename layers or replace colors across all <path> elements. Built-in hyperlinks and anchors. SMIL and CSS animation without JavaScript. Accessibility via <title>/<desc> and ARIA. Browser support since 2009 (IE9). One-command conversion to PDF, EPS, PNG, DXF.

Cons. Not for photographs — raster formats (PNG, JPEG, WebP) compress photos orders of magnitude more efficiently. Complex gradients and hatching fills render unpredictably across Inkscape, Illustrator, and browsers. Files with tens of thousands of <path> elements (e.g., a full Moscow map with building detail) can reach 50–200 MB and stutter browser scroll. CMYK officially unsupported — convert to PDF for print. QGIS sometimes converts map labels to <path> (curves) instead of <text> on export, losing editability while guaranteeing visual fidelity. SVG has no official "layers" concept: Inkscape added it via inkscape:label namespace, but Illustrator may not recognize it.

SVG vs PDF, EPS, and PNG

When to choose what. SVG is for web and any case where the map will be embedded in HTML or edited in design tools. PDF for direct print shop or client delivery: one file, fixed page, no font issues. EPS is a legacy format, needed only when explicitly required (some old print shops). PNG when you just need "a picture" without scaling or editing, such as a catalog thumbnail.

Detailed vector vs raster comparison in a separate article. For SVG print prep, see the map export for printing guide.

How to make SVG from OpenStreetMap via osm2cdr.ru

The service renders SVG maps from a live PostGIS database holding a fresh snapshot of the entire OSM planet. No subscription needed for basic use. Full path from site open to downloaded file: 30–60 seconds.

Step 1. Open Format Wizard. Visit osm2cdr.ru, select SVG from the format list (top "Vector" group). Or use the direct link /?format=svg.

Step 2. Outline the area. Draw a rectangle or polygon on the map. For an article or social media post, 200–500 m square (block) works. For posters, 1–3 km (district). For a city atlas, 10×10 km and larger — use simplified style and detail level 3 of 6 to avoid 50+ MB files.

Step 3. Pick a style. In the Cartographic style dropdown, standard (classic OSM colours: blue water, grey buildings, clear roads) for web. contrast (darker outlines, saturated tones) for high-contrast print. minimal (muted pastel tones, easy brand recolouring) for design mockups.

Step 4. Configure layers. All 16 base layers (buildings, roads, water, green, railways, barriers, POI, labels, etc.) on by default. Disable unneeded ones for specific tasks.

Step 5. Detail level. Slider 1 to 6. Web — 3. Large print — 5 or 6. Icons and previews — 1–2.

Step 6. Run export. Click "Export". Celery queue picks it up, render takes 5 seconds (block, low detail) to 2 minutes (large city, max detail). Progress is shown live via WebSocket.

Step 7. Download and refine. File downloads directly. Open in Inkscape for labels, markers, recoloring. Save as SVG for web or export to PDF for print.

Get SVG Map of Nevsky in 30 Seconds

Pitfalls and tips

Fonts. SVG allows font embedding via @font-face (including base64-encoded TTF), but support varies across tools. Safe path for web: use only system fonts (Arial, Times New Roman, sans-serif) or load fonts via external CSS. For single-file distribution, convert text to <path> via File → Object → Object to Path in Inkscape. Tradeoff: text becomes uneditable and inaccessible to screen readers.

File size. Very large maps (full Moscow center, max detail) can grow to 50–200 MB. On the osm2cdr side this is handled by a streaming SVG merger — render doesn't hold the full document in memory. On the user side, convert to SVGZ (gzip-compressed SVG, 60–80% size reduction, supported by all browsers and Inkscape) or pre-simplify geometry via ST_SimplifyPreserveTopology (which is what our detail level slider does).

Color profiles. SVG 1.1 knows only sRGB. Print shops need CMYK — convert the final SVG to PDF via Illustrator or Inkscape and assign the profile there.

Rendering differences. The same SVG may look slightly different in Chrome, Firefox, Safari, Inkscape, and Illustrator. Differences mainly involve subpixel stroke rendering, anti-aliasing of small details, occasionally font fallback. Verify in three environments before production publish.

Accessibility. For website-published maps, add <title> and <desc> at SVG root. Screen readers will read them as description. Within layers, add <title> to each building or POI for interactive use. For static picture maps, one root-level <title> is enough.

FAQ

How is SVG different from PNG? SVG is vector: scales losslessly, editable, smaller for geometric graphics. PNG is raster: good for photos and screenshots, pixelates when enlarged. Maps almost always benefit from SVG.

How to open an SVG file? Double-click opens SVG in the default browser. For editing, use Inkscape (free) or Adobe Illustrator. SVG also opens in Notepad as plain XML.

Can I edit SVG in Illustrator? Yes, Illustrator opens SVG via File → Open. Large files (>10 MB) may load slowly. After editing, save via File → Export → SVG, not Save As — export produces cleaner XML.

Does SVG support accessibility? Yes, fully. Via <title>, <desc>, and ARIA attributes SVG can be read by NVDA, JAWS, VoiceOver. This is a unique SVG advantage over PDF and PNG.

What is animated SVG? SVG supports animation via SMIL tags (<animate>, <animateTransform>) and CSS animations. Movement, opacity, color, size — all animatable. A pulsing-marker map is an animated SVG.

How to embed SVG in HTML? Three ways: 1) paste SVG content inline as <svg>...</svg> (JavaScript accessible); 2) include via <img src="map.svg"> (isolated, no scripts); 3) as CSS background background-image: url('map.svg'). For interactive maps, use inline.

Need a subscription for SVG on osm2cdr? No, SVG export is free. Current area caps depend on the detail level (1-6); see /formats/svg/ for the active limits.

Related materials

• SVG maps for design: Inkscape and Illustrator workflow
• Vector vs raster: choosing the right map format
• Map export for printing: PDF, EPS, SVG
• AI and EPS — maps for Adobe Illustrator
• CorelDRAW and OSM: from import to print
• SVG format landing on osm2cdr
• PDF format landing for comparison

Sources

• W3C SVG 1.1 (Second Edition) Specification, August 16, 2011 — w3.org/TR/SVG11
• W3C SVG 2 Candidate Recommendation, October 4, 2018 — w3.org/TR/SVG2
• W3C SVG Working Group history — w3.org/standards/history/SVG
• MDN Web Docs, SVG reference — developer.mozilla.org/docs/Web/SVG
• Wikipedia, Scalable Vector Graphics — en.wikipedia.org/wiki/SVG
• Library of Congress, Sustainability of Digital Formats: SVG — loc.gov/preservation/digital/formats/fdd/fdd000020.shtml
• Inkscape SVG export documentation — inkscape.org/learn