Map basics

Sharp maps with SVG (vector) artwork

Anyone building maps All guides

An SVG is a vector image — it's built from shapes, lines and text instead of a fixed grid of pixels. That's why an SVG map stays perfectly sharp however far a visitor zooms in, and it's the best format for any map you have as a drawn, editable file.

Why vector wins for maps

A JPG or PNG has a fixed number of pixels, so zooming in eventually shows soft or blocky detail. An SVG has no fixed resolution — the shapes are redrawn crisply at whatever size the visitor is viewing. Labels stay readable, thin corridors stay thin, and edges stay clean at full zoom.

When you upload an SVG, Mapvera stores it exactly as you saved it — it is never converted to pixels. So the quality your visitors see is entirely down to the file you upload.

Where SVG artwork comes from

Design tools export SVG directly — Adobe Illustrator, Inkscape (free), Figma, Affinity Designer and Sketch all can. Most CAD and floor-plan tools can export or save-as SVG too. If you commissioned a map or a logo-style site plan, ask your designer for the SVG; they almost certainly have it.

Keep your SVG lean

  1. Flatten and simplify

    Merge shapes you don't need as separate pieces and delete hidden or off-canvas objects. Fewer shapes means a smaller, faster file.

  2. Convert fussy text to outlines — carefully

    If your labels use an unusual font, convert them to outlines so they render identically everywhere. Plain, common fonts are usually fine left as text and keep the file smaller.

  3. Embed nothing heavy

    Avoid embedding large photos inside the SVG — that defeats the point and bloats the file. Keep the SVG to lines, fills and text; add photos as separate landmark images instead.

  4. Run an SVG optimiser

    Tools such as SVGO (or the "Save as optimised SVG" option in your design app) strip hidden metadata and shrink the file, often dramatically, with no visible change.

Set a sensible canvas

Give your SVG a defined canvas (a viewBox) that frames the whole map with a little breathing room. Mapvera measures each level from its own artwork, so a clean, well-framed canvas keeps landmark positions and directions accurate. Trim large empty margins — big blank borders just push your map into a smaller area of the screen.

When SVG isn't the answer

SVG is for drawn artwork. If your map is really a photograph — an aerial shot, a rendered 3D view, or a shaded scan — a vector file would be enormous and pointless. Use JPG for those instead. See the guide on choosing a format if you're unsure which you've got.