topic ArcGIS Javascript API 4 not displaying SimpleMarkerSymbols using SVG path as expected compared to version 3 API in ArcGIS JavaScript Maps SDK Questions

ArcGIS Javascript API 4 not displaying SimpleMarkerSymbols using SVG path as expected compared to version 3 API

j_rsg — Mon, 21 Jun 2021 20:08:35 GMT

We developed an application using the version 3 API and used SimpleMarkerSymbols with an SVG path to produce the expected symbol. However, using a similar input for version 4 API, the result does not show properly and I'm wondering if this is just a bug. I created a simple test case of a svg path for a circle with an X inside. The image on the left shows the version 4 API compared to the version 3 API on the right side.
Version 4 API seems to pixelize the symbol and does not show the second path for the X at all.

I also created two example CodePens that show the differences.

https://codepen.io/j_rsg/pen/GRWLpmJ

https://codepen.io/j_rsg/pen/XWMQmMY

Has anyone experienced similar issues when converting their version 3 svg symbols to version 4 or can comment if this is a known issue? Thanks.

Re: ArcGIS Javascript API 4 not displaying SimpleMarkerSymbols using SVG path as expected compared to version 3 API

Noah-Sager — Tue, 22 Jun 2021 00:11:09 GMT

Hi @j_rsg, I'm not entirely sure why this works in 3x but not in 4x, but I googled an svg with a circle and a cross and I found that this works with 4x: https://codepen.io/noash/pen/JjWqWBd?editors=1000

Re: ArcGIS Javascript API 4 not displaying SimpleMarkerSymbols using SVG path as expected compared to version 3 API

j_rsg — Tue, 22 Jun 2021 20:51:58 GMT

Thanks @Noah-Sager .

As you've shown, a similar svg symbol can be displayed with a different path for my examples. I also am not very familiar with svg and perhaps this just comes down to different supported svg standards between 3x and 4x?

The symbol examples I gave are parts of more extensive dynamically generated symbols used in our application, so I'm really hoping to avoid a relearn/rewrite of those symbol paths to migrate to 4x.

Re: ArcGIS Javascript API 4 not displaying SimpleMarkerSymbols using SVG path as expected compared to version 3 API

j_rsg — Wed, 23 Jun 2021 13:41:15 GMT

Hi @Noah-Sager .

So after further testing I've narrowed the issue down further. 4x is distorting svg path curves and straight lines, but it is only evident once you increase the symbol size. I presume it is happening at any size, it is just not visible with small symbols. It is most easily seen with no color fill and a large curve symbol. 3x has no such issues and always displays the curve or lines smoothly.

Here are a couple updated examples including a larger symbol of your example:

https://codepen.io/j_rsg/pen/bGqPrRW?editors=1000

https://codepen.io/j_rsg/pen/abJgydQ?editors=1001

Re: ArcGIS Javascript API 4 not displaying SimpleMarkerSymbols using SVG path as expected compared to version 3 API

Noah-Sager — Wed, 23 Jun 2021 17:30:57 GMT

Thanks @j_rsg, this is very helpful. There are rendering differences between 3x and 4x, but they should not be this different. We are investigating the issue, and I will respond to this thread when we have an update to share.

Re: ArcGIS Javascript API 4 not displaying SimpleMarkerSymbols using SVG path as expected compared to version 3 API

j_rsg — Tue, 13 Jul 2021 14:31:06 GMT

Thanks @Noah-Sager.

I've also discovered what looks like a related rendering issue where in many instances 4.x does not display svg line paths at all compared to 3.x. For example, if you change the path to:

path: "M62 16 l 0 38 M54 42"

You can see the 3.x outcome in the screenshot, but in 4.x it does not appear. I tried a number of different examples and always the same result. I updated the codepens below to include the line path commented out below the circle/cross paths.

https://codepen.io/j_rsg/pen/GRWLpmJ

https://codepen.io/j_rsg/pen/XWMQmMY

Re: ArcGIS Javascript API 4 not displaying SimpleMarkerSymbols using SVG path as expected compared to version 3 API

Noah-Sager — Tue, 13 Jul 2021 14:41:34 GMT

Thanks for the additional information. We are still investigating.