Display a remote SVG symbol

Replicates the MapLibre example Display a remote SVG symbol. Upstream fetches the SVG inside a missing-image resolver and adds it by hand. An images: entry does the same declaratively: the URL loads through an <img>, which rasterizes SVG at its intrinsic size, and the image is registered before any layer asks for it.

The MapLibre logo, loaded from an SVG on maplibre.org

The complete document

display-a-remote-svg-symbol.yaml

# yaml-language-server: $schema=https://docs.maplibre-yaml.org/schema/latest/map.schema.json
# Gallery twin of https://maplibre.org/maplibre-gl-js/docs/examples/display-a-remote-svg-symbol/
# Upstream fetches the SVG in a missing-image resolver and adds it by hand.
# An `images:` entry does the same declaratively: the URL loads through an
# <img>, which rasterizes SVG at its intrinsic size, before layers are added.
type: map
id: display-a-remote-svg-symbol
config:
  center: [0, 0]
  zoom: 1
  maplibreLogo: true
  mapStyle: "https://demotiles.maplibre.org/style.json"
images:
  maplibre-logo: "https://maplibre.org/maplibre-gl-js/docs/assets/logo.svg"
layers:
  - id: svg-symbol
    type: symbol
    source:
      type: geojson
      location:
        coordinates: [0, 0]
    layout:
      icon-image: maplibre-logo
      icon-overlap: always
      text-overlap: always

What to notice

• The SVG needs an intrinsic size (width/height on the root element) and must be served with CORS headers.
• On mlym emit the image is fetched at compile time and merged into the document’s sprite.