[Bug] IconLayer renders high-quality SVGs as blurry even at native resolution

[adarsh1701198]

Description

Hi team,
I’m noticing an issue where SVG icons rendered inside IconLayer appear blurry, even though the original SVG assets are high-resolution and look perfectly sharp when used elsewhere (ex: Google Maps Advanced Marker).

I’m using deck.gl in a WebGL context, and I’ve verified that:

• The original SVGs are crisp and scalable.
• The blur persists even at high pixelRatio displays (e.g., Retina).
• The same icons look sharp when rendered using other map libraries/components.
• No resizing or scaling is being done on the SVGs before passing them into IconLayer.

Because of this, markers on the map appear noticeably soft compared to surrounding UI elements.

Flavors

• Script tag
• React
• Python/Jupyter notebook
• MapboxOverlay
• GoogleMapsOverlay
• CARTO
• ArcGIS

Expected Behavior

SVG icons should render crisp/sharp at all zoom levels and resolutions when used in IconLayer, similar to how they appear in other map frameworks.

Steps to Reproduce

new IconLayer({ id: "mbp-layer", data: mbp, getPosition: (d: any) => [d.longitude, d.latitude], getIcon: (d: any) => ({ url: d.icon, width: 100, height: 100, anchorY: 100 }), sizeUnits: "pixels", getSize: 27.17, pickable: true, pickingRadius: 10, // Increase picking radius to make markers easier to click onHover: (info: any) => { const { object, pixel } = info; if(object) onHoverPoi && !focusedItem.type && !isGeoFocused && onHoverPoi("mbp", object ?? null, pixel); else onHoverPoi && !isGeoFocused && onHoverPoi("mbp", null); }, onClick: (info: any) => { const { object, pixel } = info; console.log('MBP Layer onClick:', object, 'focusedItem:', focusedItem, 'isGeoFocused:', isGeoFocused); // Allow clicks even when there's a focused item, to enable switching between markers handleClick && object && handleClick("mbp", object ?? null, pixel); }, });

Environment

• Framework version:
  "@deck.gl/core": "^8.9.27",
  "@deck.gl/google-maps": "^8.9.27",
  "@deck.gl/layers": "^8.9.27",
  "@deck.gl/react": "^8.9.27",

Logs

No response

[ipearx]

Amateur guess ahead: is this is because Deck.gl vector based SVGs need to be rasterised into a pixel image before being used, and it doesn't do it at a high enough resolution? You could try making the SVG twice the size and then scale them down in the deck layer?

[chrisgervang]

Google Maps Advanced Markers are rendered as DOM elements rather than rasterized to canvas, which is why they appear crisp at any zoom level. deck.gl doesn't have a direct equivalent, but you can position HTML elements on top of the deck canvas using the viewport projection API:

// In your onViewStateChange handler or render loop:
const viewport = deck.getViewports()[0];
const [x, y] = viewport.project([longitude, latitude]);

// Position your DOM element
markerElement.style.transform = `translate(${x}px, ${y}px)`;

You'd manage the DOM elements yourself (creating, updating, removing) and reproject their positions whenever the view changes via deck's onViewStateChange callback.

Regarding IconLayer resolution: the rasterization quality is tied to the source image resolution and the sizeScale/getSize parameters. The iconAtlas is sampled at its native resolution, so if your icons appear blurry when scaled up, the reliable fix is to supply higher-resolution PNGs and scale them down via getSize. For example, provide 128×128 icons and render them at 32×32 logical pixels.

This "oversample and downscale" approach is the standard technique for crisp icons across canvas-based map renderers (Mapbox, MapLibre, etc.) since the GPU texture sampling naturally antialiases when scaling down.