Adding custom SVG icons with changeable backgrounds.

MatějKotyza

We have a problem with adding our own icons in SVG format so that ArcGIS Online sees the icon as stylable. We need both the circle and the icon symbol to be stylable from the icon. Unfortunately, we are unable to make the SVG so that Map Viewer recognizes the icon as multiple layers and therefore styles both the circle and the symbol. It always recognizes the icon as single-layer and the symbol changes based on the change of the circle, unless the symbol is black.

Here is an example of how we currently have the SVG set up so that the circle changes, but the symbol remains unchanged. This is a PNG of the symbol, which is encapsulated in the SVG.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<circle cx="128" cy="128" r="128" style="fill:#3182bd;" fill="currentColor" />

<image x="0" y="0" width="256" height="256"
xlink:href="data&colon;image/png;base64,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" />
</svg>

Is there any way to make ArcGIS recognize the symbol as stylable?

When we convert it to a vector, ArcGIS Online still cannot recognize it as another layer.

RussRoberts

Currently when you upload an SVG we use the symbolserver which converts that SVG to a CIM/Vector symbol which is the same as taking the image and using the SVG in a shapemarker symbol in Pro. The one thing we don't expose yet are the different elements inside a symbol layer which Pro does where you can customize certain elements but you cannot set color locking on these elements so if you use a color ramp on the symbol all elements would pickup the same color. If you want individual symbol layer customizing I would recommend building the symbol out in Pro with a symbol layer for the core and then a secondary one for the background. This blog can help walk you through this https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/use-published-2d-symbols-in-arcgis-o...

MatějKotyza

Thank you for the answer, we will definitely try the procedure via ArcGIS Pro.

LadislavJeník

If I understand correctly, ESRI does not support correct import of a style if the SVG contains multiple elements. It does not store them in a way that the individual style layers (images) are independent of each other. Why is this so?
I would also like to know how ESRI creates styles for ArcGIS Online, where individual styles can contain different independent style elements (images). And it is possible to set them correctly independently for this reason.

RussRoberts

They get converted to a CIM vector symbol by the symbol server on the portal/online and this is the output does not have those same elements like in Pro locally as of yet. We also don't have immediate plans for diving into the individual elements of a single symbol layer but are focusing on the primary individual symbol layers and the effects that can be applied to a symbol layer and exposing those properties like animations, hatch and marker fill properties and more.

When creating this multi layer vector symbols in Pro we will add them as individual symbol layers and set the color locking (helpful when applying color ramps to a symbol), additional symbol styling like default color, size, rotation + effects we want present. Then sharing that symbol as a web style if we want to use it as a symbol gallery inside the symbol styler or it can be shared in a map or layer and just be stored for that item being authored.

Blog posts that can help out

https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/use-published-2d-symbols-in-arcgis-o...

https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/a-new-way-to-add-web-styles-in-map-v...

https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/do-more-with-symbols-in-map-viewer-b...

https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/use-animated-symbols-in-map-viewer

https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/upload-images-to-style-point-symbols...

LadislavJeník

@RussRoberts
Thank you for the comprehensive information and links.
I really appreciate your effort to help and I appreciate your time and effort.
However, I still don't really understand that ESRI technology does not fully and correctly support the structure and capabilities of the SVG format within styles. At least from the perspective of a lay user, or a graphic designer.
It would be great if everything were simpler and more understandable for ArcGIS Online users. Not everyone has the ability to use ArcGIS Pro software.

RussRoberts

When the symbol is uploaded it is converted to a CIM based symbol and is not a stored SVG. This is how we store vector symbols in Online and Pro. What types of actions are you trying to do on an SVG you are uploading?

LadislavJeník

@RussRoberts
I understand that the SVG format is just a "portable" style format for you, which is stored in another form (data model - CIM).
We need ArcGIS Online to support importing multi-element style from SVG to CIM. So that the style background and foreground can be styled independently. Which are made up of an independent element in the SVG style format. This is how it is created in the SVG file.