Использование SVG вместо PNG

Визуальные элементы карты в Google Maps JavaScript API традиционно опираются на растровые изображения (PNG, JPG), используемые для маркеров, оверлеев и кастомных иконок. Однако SVG предоставляет более гибкий подход к визуализации, особенно в контексте масштабируемых интерфейсов, адаптивной графики и динамической стилизации.

SVG-иконки сохраняют четкость на любых DPI, позволяют изменять цвет и форму без пересборки ассетов и могут быть встроены напрямую в конфигурацию карты.

Подключение SVG через параметр icon маркера

Google Maps API поддерживает использование SVG через свойство icon объекта маркера. Наиболее простой способ — передача URL на SVG-файл.

const marker = new google.maps.Marker({
  position: { lat: 40.7128, lng: -74.0060 },
  map,
  icon: "https://example.com/icons/marker.svg"
});

SVG в этом случае загружается как внешний ресурс. Важно учитывать:

  • SVG должен быть доступен по CORS-политике
  • часть SVG-эффектов (filters, scripts) может игнорироваться
  • поведение зависит от рендера браузера

Inline SVG через Data URI

Более гибкий способ — использование Data URI. SVG кодируется в строку и передается напрямую:

const svgIcon = {
  url: "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(`
    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
      <circle cx="20" cy="20" r="10" fill="red"/>
    </svg>
  `),
  scaledSize: new google.maps.Size(40, 40)
};

const marker = new google.maps.Marker({
  position: { lat: 48.8566, lng: 2.3522 },
  map,
  icon: svgIcon
});

Особенности такого подхода:

  • отсутствие внешних запросов
  • возможность генерации SVG на лету
  • удобство динамического изменения цвета и формы

Ограничение связано с длиной URI и читаемостью кода при сложных SVG.

SVG как Symbol в Google Maps API

API поддерживает специализированный тип иконок — google.maps.Symbol. Он позволяет использовать предопределённые формы и кастомный SVG path.

Использование встроенных форм

const marker = new google.maps.Marker({
  position: { lat: 51.5074, lng: -0.1278 },
  map,
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    fillColor: "#4285F4",
    fillOpacity: 1,
    strokeWeight: 2,
    strokeColor: "#ffffff"
  }
});

В данном случае SVG не используется напрямую, но модель символов концептуально близка к векторной графике.

Кастомный SVG path

SVG-подобная геометрия может быть описана через path:

const customSymbol = {
  path: "M10 0 L20 20 L0 20 Z",
  fillColor: "#34A853",
  fillOpacity: 1,
  strokeWeight: 1,
  scale: 1.5
};

const marker = new google.maps.Marker({
  position: { lat: 35.6895, lng: 139.6917 },
  map,
  icon: customSymbol
});

Path не является полноценным SVG, но позволяет создавать компактные векторные маркеры без внешних файлов.

Масштабирование и адаптация под DPI

SVG не теряет качество при масштабировании, однако в Google Maps API требуется явная настройка размеров:

  • scaledSize — фиксирует визуальный размер
  • scale — влияет на Symbol-иконки
  • anchor — задает точку привязки
const icon = {
  url: "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(svgString),
  scaledSize: new google.maps.Size(48, 48),
  anchor: new google.maps.Point(24, 48)
};

При неправильной настройке anchor маркеры могут смещаться относительно координаты.

Динамическая стилизация SVG

SVG позволяет изменять цвет и параметры без замены файла. Это особенно полезно для отображения состояния объектов.

Генерация цвета через функцию

function createSvgIcon(color) {
  return {
    url: "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(`
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
        <rect width="32" height="32" fill="${color}" rx="6"/>
      </svg>
    `),
    scaledSize: new google.maps.Size(32, 32)
  };
}

const marker = new google.maps.Marker({
  position: { lat: 52.52, lng: 13.405 },
  map,
  icon: createSvgIcon("#ff0000")
});

Такой подход часто используется для:

  • статусов (онлайн/оффлайн)
  • категорий объектов
  • уровней приоритета

Оптимизация производительности

SVG может влиять на производительность иначе, чем PNG.

Факторы нагрузки:

  • сложность SVG-структуры (много path и фильтров)
  • частая генерация Data URI
  • отсутствие кэширования при динамической генерации

Практики оптимизации:

  • минимизация SVG (удаление metadata, comments)
  • использование символов вместо полноценных SVG при простых формах
  • переиспользование готовых строк SVG
  • избежание повторного encodeURIComponent в циклах

SVG в сочетании с кластеризацией маркеров

При использовании кластеризации (MarkerClusterer) SVG позволяет сохранять визуальную согласованность и масштабируемость кластерных иконок.

const clusterStyles = [{
  url: "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(`
    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
      <circle cx="20" cy="20" r="18" fill="#1976D2"/>
      <text x="20" y="25" font-size="12" text-anchor="middle" fill="#fff">{count}</text>
    </svg>
  `),
  height: 40,
  width: 40
}];

SVG здесь позволяет отображать динамическое значение количества объектов без генерации растровых изображений.

Ограничения SVG в контексте Google Maps

Несмотря на гибкость, SVG имеет ряд ограничений:

  • отсутствие поддержки некоторых фильтров и сложных эффектов
  • различия в рендеринге между браузерами
  • ограничения безопасности при внешних ссылках
  • невозможность использования скриптов внутри SVG

Также важно учитывать, что Google Maps может упрощать или растрировать SVG в зависимости от контекста отображения.

Практические паттерны использования

Векторные маркеры для категорий

SVG позволяет задавать единый шаблон маркера с изменяемым цветом:

  • транспорт
  • недвижимость
  • точки интереса
  • пользователи на карте

Тематические слои

SVG используется для визуального разделения слоев данных:

  • плотность объектов
  • тепловые визуализации (упрощенные)
  • статусные индикаторы

Реактивное обновление маркеров

При изменении состояния объекта SVG генерируется заново без замены логики маркера:

marker.setIcon(createSvgIcon(newColor));

Такой подход снижает необходимость хранения большого числа ассетов.

Сравнение SVG и PNG в контексте карты

SVG:

  • масштабируется без потери качества
  • поддерживает динамическую генерацию
  • уменьшает количество файлов
  • подходит для стилизуемых интерфейсов

PNG:

  • стабильное поведение во всех браузерах
  • быстрее рендерится при простых задачах
  • проще кэшируется CDN

Выбор определяется характером нагрузки и степенью динамичности интерфейса.

Оглавление