Upload svg to content for Hub categories

lmarun

Hello. This question has already been asked, but not answered: https://community.esri.com/t5/arcgis-online-ideas/allow-svg-files-to-be-hosted-in-ago-hub-categories/idi-p/1041589.

I want to use svgs for my Hub Premium data categories, but the only way to use an svg is to have a url for it. Uploading svgs via AOL Content upload is not permitted, and you can't directly upload from the dialog box in the Hub itself.

In other words, unless I'm wrong (I hope I am!), the only way I know of to use an svg is if it's already published online. (Unfortunately, the way this is advertised as a feature is not clear (https://hub.arcgis.com/pages/site-customization). 

Does anyone know of a way around this, i.e., how to upload an svg directly into AOL Content and/or the Hub withough publishing it elsewhere first? I can publish these svgs via another website, but I'd much rather keep all of my Hub conent together and avoid the risk of having parts of the Hub fall apart because they are 'lost' via editing of the outside site's content.

Thanks!

KlaraSchmitt

Hello,

Unfortunately, as you've likely determined, we do not have the ability to upload an icon for you to reference in your Category cards and if you want to use a image with an SVG file extension, I think the only way to do it is by doing what you're doing now.

Typically, the reason SVGs are not supported as uploads in Online or Hub is because they are stored as SVG objects that usually something like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="image" aria-label="activity monitor"><path d="M19 13h-2.15l-3.35 9.213-6-16.5L4.85 13H1v-1h3.15L7.5 2.787l6 16.5L16.15 12H19a2.496 2.496 0 0 0 0 1zm2.5-2a1.5 1.5 0 1 0 1.5 1.5 1.502 1.502 0 0 0-1.5-1.5z"/><path fill="none" d="M0 0h24v24H0z"/></svg>

and sometimes not-great stuff can be added to those objects, so it's a security precaution to prevent direct SVG uploads. However, when you host your SVG elsewhere and just give Hub the URL, then we're able to use the image object to display the SVG and that's not as risky:

<img src="http://www.host.com/myfiles/activity.svg" alt="activity monitor">

Sorry for the inconvenience.