How to Customize SVG Map Colors with CSS

One of the biggest advantages of SVG maps is their flexibility — you can customize every aspect with CSS. Whether you want to match your brand colors, create interactive hover effects, or build dynamic color schemes, CSS gives you complete control over your map's appearance.

In this guide, we'll explore how to customize SVG map colors with CSS, from basic styling to advanced techniques.

Why CSS for SVG Maps?

CSS styling for SVG maps offers:

Easy Updates — Change colors without editing the SVG file
Dynamic Styling — Apply themes, dark mode, or user preferences
Interactivity — Add hover and active states
Responsive Design — Adapt colors for different screen sizes
Performance — No need to regenerate SVG files for color changes

Generate vector dotted maps

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

Basic CSS Styling

Inline SVG Styling

If your SVG is embedded directly in HTML:

<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
  <path class="country" d="..." />
  <circle class="dot" cx="100" cy="200" r="2" />
</svg>

<style>
  .country {
    fill: #333333;
    stroke: #ffffff;
    stroke-width: 1;
  }
  
  .dot {
    fill: #0077ff;
  }
</style>

External SVG File Styling

For SVG files loaded as <img> or <object>, you'll need to add CSS classes to the SVG itself, or use inline SVG:

/* This won't work with external SVG files */
.map-container svg .country {
  fill: #333333;
}

Solution: Embed SVG inline or use JavaScript to inject styles.

Changing Map Colors

Single Color Scheme

/* All countries/dots in one color */
svg .country {
  fill: #2563eb; /* Blue */
}

svg .dot {
  fill: #10b981; /* Green */
}

Multiple Colors by Class

Add classes to your SVG elements, then style them:

.region-europe {
  fill: #3b82f6;
}

.region-asia {
  fill: #ef4444;
}

.region-americas {
  fill: #10b981;
}

Using CSS Variables

For easy theme switching:

:root {
  --map-primary: #2563eb;
  --map-secondary: #10b981;
  --map-background: #ffffff;
}

svg .country {
  fill: var(--map-primary);
}

svg .dot {
  fill: var(--map-secondary);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --map-primary: #60a5fa;
    --map-secondary: #34d399;
    --map-background: #1f2937;
  }
}

Adding Hover Effects

Simple Hover

svg .country {
  fill: #333333;
  transition: fill 0.3s ease;
  cursor: pointer;
}

svg .country:hover {
  fill: #0077ff;
  stroke: #0055cc;
  stroke-width: 2;
}

Interactive Dot Maps

svg .dot {
  fill: #666666;
  transition: all 0.2s ease;
}

svg .dot:hover {
  fill: #ff6b6b;
  r: 3; /* Increase radius on hover */
  opacity: 1;
}

Advanced Techniques

Gradient Fills

svg .country {
  fill: url(#gradient);
}

/* Define gradient in SVG */
<defs>
  <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
    <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
  </linearGradient>
</defs>

Conditional Styling with Data Attributes

<path class="country" data-population="high" d="..." />
<path class="country" data-population="low" d="..." />

.country[data-population="high"] {
  fill: #ef4444; /* Red for high population */
}

.country[data-population="low"] {
  fill: #10b981; /* Green for low population */
}

Animation

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

svg .dot {
  animation: pulse 2s infinite;
}

Generate vector dotted maps

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

Best Practices

Performance

Use CSS transitions instead of JavaScript for smooth animations
Minimize the number of color changes on hover
Use will-change property for elements that will animate

Accessibility

Ensure sufficient color contrast for readability
Provide alternative text for color-coded information
Use patterns or textures in addition to color for differentiation

Browser Compatibility

Test in multiple browsers (SVG CSS support is generally good)
Use fallback colors for older browsers
Consider prefers-reduced-motion for animations

Common Color Schemes

Minimalist

:root {
  --map-color: #1f2937;
  --map-bg: #ffffff;
}

Brand Colors

:root {
  --map-color: #your-brand-primary;
  --map-accent: #your-brand-secondary;
}

Data Visualization

/* Use color scales for data mapping */
.low-value { fill: #dbeafe; }
.medium-value { fill: #60a5fa; }
.high-value { fill: #1e40af; }

Final Thoughts

Customizing SVG map colors with CSS gives you the flexibility to create maps that perfectly match your design system. Whether you're building a simple static map or an interactive data visualization, CSS provides the tools you need.

Start with a clean SVG map from World in Dots, then apply your CSS styling to create something unique. The combination of vector graphics and CSS styling is powerful — and it's all built into modern web standards.

Ready to style your maps? Generate your SVG map and start customizing with CSS today.

See all posts