CIMPictureMarker is unable to render data URI SVG

[SteveBurdette]

We've identified that when providing an SVG as data URI for CIM picture markers nothing is rendered.

To reproduce, using the CIM Symbol Builder:

1. Create CIMPictureMarker using the "Custom" tab
2. Replace the generated URL with an SVG data URI

Or use the following JSON:

{
  "type": "CIMPointSymbol",
  "symbolLayers": [
    {
      "type": "CIMPictureMarker",
      "enable": true,
      "anchorPoint": {
        "x": 0,
        "y": 0
      },
      "anchorPointUnits": "Relative",
      "dominantSizeAxis3D": "Y",
      "size": 50,
      "billboardMode3D": "FaceNearPlane",
      "invertBackfaceTexture": true,
      "scaleX": 1,
      "textureFilter": "Picture",
      "tintColor": [
        255,
        255,
        255,
        255
      ],
      "url": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNTEyIj48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNNjQwIDE4My4yM0M2NDAgMTM1LjE0IDU5OC4zOCA5NiA1NDcuMTkgOTZjLTM5LjcyIDAtNzUgMjMuNzMtODcuODQgNTkuMDZDNDU4LjIzIDE1OC4zIDQ1Mi43MiAxNzYgNDQ4IDE3NkgxOTJjLTQuNzIgMC0xMC4yMy0xNy43LTExLjM0LTIwLjk0QzE2Ny44MSAxMTkuNzMgMTMyLjUzIDk2IDkyLjgxIDk2IDQxLjYyIDk2IDAgMTM1LjE0IDAgMTgzLjIzYzAgMjkuNDUgOC4wOSA1My4zNCAzMi4zNCA3Mi43N0M3LjkzIDI3NS41NyAwIDI5OS41NCAwIDMyOC43NyAwIDM3Ni44NiA0MS42MiA0MTYgOTIuODEgNDE2YzM5LjcyIDAgNzUtMjMuNzMgODcuODQtNTkuMDUgMS4wOS0zLjIzIDYuODktMjAuOTUgMTEuMzQtMjAuOTVoMjU2YzQuNDUgMCAxMC4yNSAxNy43MyAxMS4zNCAyMC45NSAxMi44NCAzNS4zMSA0OC4xMiA1OS4wNSA4Ny44NCA1OS4wNSA1MS4xOSAwIDkyLjgxLTM5LjE0IDkyLjgxLTg3LjIzIDAtMjkuMjMtNy45My01My4xOS0zMi4zNC03Mi43NyAyNC4yNy0xOS40MyAzMi4zNi00My4zMSAzMi4zNi03Mi43N3ptLTcyLjA2IDEwNC4zYzE5LjM0IDguODggMjQuMDYgMjMuMTIgMjQuMDYgNDEuMjMgMCAyMS42NC0yMC4wOSAzOS4yMy00NC44MSAzOS4yMy0xOS41OSAwLTM2Ljc1LTExLjAyLTQyLjcyLTI3LjQxQzQ5NC40MiAzMTAuNjYgNDgzLjc4IDI4OCA0NDggMjg4SDE5MmMtMzUuNzggMC00Ni40MiAyMi42Ni01Ni40NyA1Mi41OS01Ljk3IDE2LjM5LTIzLjEyIDI3LjQxLTQyLjcyIDI3LjQxQzY4LjA5IDM2OCA0OCAzNTAuNDEgNDggMzI4Ljc3YzAtMTguMTIgNC43Mi0zMi4zNiAyNC4wNi00MS4yMyAxMi42Mi01LjgxIDIwLjUtMTcuODkgMjAuNS0zMS41M3MtNy44NC0yNS43LTIwLjUtMzEuNTNDNTIuMjggMjE1LjM5IDQ4IDIwMC43MiA0OCAxODMuMjMgNDggMTYxLjU5IDY4LjA5IDE0NCA5Mi44MSAxNDRjMTkuNTkgMCAzNi43NSAxMS4wMiA0Mi43MiAyNy40MkMxNTQuMTcgMjI1LjE5IDE3Ni42NCAyMjQgMTkyIDIyNGgyNTZjMTUuMzYgMCAzNy44MyAxLjE5IDU2LjQ3LTUyLjU4IDUuOTctMTYuNDEgMjMuMTItMjcuNDIgNDIuNzItMjcuNDIgMjQuNzIgMCA0NC44MSAxNy41OSA0NC44MSAzOS4yMyAwIDE3LjQ4LTQuMjggMzIuMTYtMjQuMDYgNDEuMjMtMTIuNjYgNS44My0yMC41IDE3Ljg5LTIwLjUgMzEuNTNzNy44NyAyNS43MyAyMC41IDMxLjU0eiI+PC9wYXRoPjwvc3ZnPg=="
    }
  ]
}

[SteveBurdette]

I noticed the code formatter is replacing some characters on the SVG URI so just in case anyone actually copies it you might wanna make sure to replace "&colon" with an actual colon character (:)

[AnneFitz]

Hi @SteveBurdette - thanks for pointing this out! We'll take a look.

[AnneFitz · Accepted solution]

Hi @SteveBurdette - thanks again for pointing this out! This bug will be fixed in version 4.22 (planned for December).

Here's an example of it working on the /next version of the API: https://codepen.io/annefitz/pen/BaZOjEo