Select to view content in your preferred language

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

1505
6
06-21-2021 01:08 PM
j_rsg
by
Occasional Contributor

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.

svg_diff.PNG

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.

0 Kudos
6 Replies
Noah-Sager
Esri Regular Contributor

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

 

0 Kudos
j_rsg
by
Occasional Contributor

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.

0 Kudos
j_rsg
by
Occasional Contributor

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

 

 

0 Kudos
Noah-Sager
Esri Regular Contributor

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.

0 Kudos
j_rsg
by
Occasional Contributor

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

0 Kudos
Noah-Sager
Esri Regular Contributor

Thanks for the additional information. We are still investigating.

0 Kudos