topic Blurry svg client-side rendered icons in ArcGIS JavaScript Maps SDK Questions

Blurry svg client-side rendered icons

sarahjones4 — Mon, 18 Apr 2022 08:33:41 GMT

Hi All,

First time using ArcGIS, having used GM for the past 10 years, and have run into an issue.

I have 50+ detailed svgs that when rendered on GM are crisp and clean, but when same are rendered on the canvas (ArcGIS JS client-sided) they are blurry. Even a plain circle is being distorted with a 1 pixel right/bottom crop.

I note that since version 4.11 (here), a "soft, anti-aliased edges" has been added, which I am surmising is causing the issue, and if that is the case... how do you turn it off?!

Re: Blurry svg client-side rendered icons

AnneFitz — Mon, 18 Apr 2022 15:26:17 GMT

Hi - what version of the ArcGIS API for JavaScript are you using? Could you share a repro case with me?

Re: Blurry svg client-side rendered icons

sarahjones4 — Tue, 19 Apr 2022 00:11:00 GMT

Hi @AnN , i'm using the latest JS. Whilst i cant provide a repo, I can show an image to explain.
The image on left is an SVG rendered normally, whilst the right is rendered as a graphic on the canvas.

Note the height is 2px smaller, and the paths/lines are fuzzy (aka blurry) and not crisp.. which i'm attributing to the 'anti-aliasing' being applied?

This svg is composed of 4 lines: 2 horizontal, 2 vertical, forming a "box/square", but is rendered like this.

Obviously the browser needs to sub-sample when path/lines/rect etc are using decimals. Canvas element rendering can be controlled through

image-rendering: pixelated; image-rendering: crisp-edges;

so how does one do same for ArcGIS JS 'picture-marker' graphic objects?

Re: Blurry svg client-side rendered icons

AndrewTaylor0942 — Tue, 20 Jun 2023 15:50:03 GMT

Was there a solution to this problem? I'm on the latest javascript SDKs and my svgs are render blurry. The height and width match what is set in the SVG itself, but it's blurry.

Re: Blurry svg client-side rendered icons

AnneFitz — Thu, 03 Aug 2023 23:37:31 GMT

Hi @AndrewTaylor0942 - can you share a codepen or something reproducing the issue? I tested out your SVG using a SimpleMarkerSymbol and do not notice any blurriness.

Here's an example: https://codepen.io/annefitz/pen/poQYvwJ?editors=1000

Re: Blurry svg client-side rendered icons

AndrewTaylor0942 — Thu, 17 Aug 2023 15:56:54 GMT

Unfortunately I can't save code pens at work, but I'm pulling in the SVG as a file, not a path for a simple marker. We have some complex svgs we'd like to use and can't just paste in one path. The blur is subtle, but noticable. In the attached picture the green is made using a simple marker, the red is with a file path to an actual svg image.

const markerSymbol = { type: 'simple-marker', path: 'M11.2022 0.909049L11.0265 0.733313H10.7779H5.22238H4.97386L4.79812 0.909049L0.909232 4.79794L0.733496 4.97367V5.2222V10.7778V11.0263L0.909232 11.202L4.79812 15.0909L4.97386 15.2666H5.22238H10.7779H11.0265L11.2022 15.0909L15.0911 11.202L15.2668 11.0263V10.7778V5.2222V4.97367L15.0911 4.79794L11.2022 0.909049Z', color: 'red', size: 14, outline: { type: 'simple-line', color: 'white', width: 1.2 } }; const svgStopSign = { type: 'picture-marker', url: '/path/to/file.svg, height: 14, width: 14 }

Re: Blurry svg client-side rendered icons

AnneFitz — Mon, 21 Aug 2023 17:21:16 GMT

Thanks for the additional info @AndrewTaylor0942 ! I can see there is some blurriness -- we will take a look!

In the meantime, you can try converting your complex SVGs to CIM symbols using the CIM Symbol Builder. Here's a blog that walks you through how to do this: https://www.esri.com/arcgis-blog/products/js-api-arcgis/developers/upload-symbols-from-svg-in-the-updated-cim-symbol-builder/

Let me know if that works for you or if you have any questions! 🙂

Re: Blurry svg client-side rendered icons

AnneFitz — Fri, 01 Sep 2023 00:32:32 GMT

We've installed a fix for the blurriness that will be released at version 4.28. You can test it out on our development version of the API, https://js.arcgis.com/next. Please let us know if you are still running into issues!