Inline SVG vs img Tag: How to Embed a Dotted Map

Inline SVG vs. an img tag is the first decision to make before a dotted map goes anywhere near a real webpage, and it's easy to get wrong by defaulting to whichever one you copy-pasted first. The two approaches render the same visual result but behave very differently once real requirements — CSS control, caching, page weight — enter the picture.

Neither option is universally correct. The right one depends on what you need to do with the map after it's on the page.

The Two Approaches

Inline SVG means the SVG markup — all those <circle> or <path> elements — lives directly in your HTML:

<svg viewBox="0 0 800 400" class="world-map">
  <circle cx="120" cy="80" r="2" fill="currentColor" />
  <!-- hundreds or thousands more -->
</svg>

img tag (or a CSS background-image) treats the SVG as an external file, referenced like any other image:

<img src="/maps/world-dots.svg" alt="World map made of dots" width="800" height="400" />

Both display the same map. What differs is everything downstream of "displaying."

When Inline SVG Is the Right Call

Inline SVG puts every dot into the DOM as a real, addressable element, which unlocks:

CSS styling per element — hover effects, per-country coloring, or currentColor fills that inherit from surrounding text color, all covered in customizing SVG map colors with CSS
JavaScript interactivity — attaching event listeners to individual dots or regions, needed for anything in making maps that respond to mouse movement
CSS animation of individual elements — staggered dot-appearance effects or per-region transitions that target specific dots as they enter the DOM

The cost is that a large inline SVG adds directly to your HTML document's size and DOM node count. A world map with several thousand dots means several thousand DOM elements the browser has to parse and lay out, which can measurably slow initial render on a content-heavy page.

Generate vector dotted maps

Create vector dotted maps with custom options and download them as SVG or PNG files

When an img Tag Is the Right Call

Referencing the SVG as an external file is the better default when the map is purely decorative or static:

Browser caching — an external SVG file gets cached like any other asset; reuse the same map across ten pages of your site and it downloads once, not ten times. Inline SVG re-sends the full markup with every single page load.
Smaller initial HTML payload — the SVG's markup lives in its own file, keeping your page's HTML lean, which matters for pages already heavy with content
Simplicity — if you're not styling individual dots or adding interactivity, there's no reason to pay the DOM-weight cost of inlining thousands of elements

The tradeoff: an externally-referenced SVG can't be restyled with your page's CSS (no currentColor, no :hover on individual dots) unless you go through extra steps like fetching and inlining it with JavaScript at runtime — which mostly erases the caching benefit you wanted in the first place.

A Practical Decision Table

Need	Use
Static, decorative background map	`img` tag or CSS `background-image`
Map reused identically across many pages	`img` tag (gets cached)
Per-dot or per-region hover effects	Inline SVG
Map color needs to inherit from page theme (`currentColor`)	Inline SVG
Map used as a `mask-image`	Referenced by URL — see using a dotted map SVG as a CSS mask
Map animates on scroll or load	Inline SVG (for element-level animation)
Page already has heavy DOM / performance budget is tight	`img` tag

A Middle Ground: `<object>` and `<picture>`

An <object data="map.svg" type="image/svg+xml"> tag references an external file (keeping the caching benefit) while still allowing some limited interaction with the SVG's internal DOM through JavaScript, though support and behavior are less consistent than either inline SVG or a plain img. For most dotted-map use cases, it's simpler to just pick inline or img based on the table above rather than reach for this middle option.

Performance Considerations Either Way

Regardless of which method you choose, dot count is the biggest lever on performance — a map with fewer, larger dots parses and renders faster than one with dense fine detail, whether it's sitting inline in your DOM or loading as a cached external file. See optimizing SVG maps for web performance for more on that tradeoff.

Whichever method you choose, keep accessibility in mind — an inline SVG needs role="img" and an accessible name, while an img tag needs proper alt text describing what the map shows.

Generate the Map

Export your map from the map generator as an SVG file, then decide based on the table above whether to paste the markup inline or reference the exported file with an img tag.

See all posts