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.
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.
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.
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:
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.
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.