SVG Rendering Issues?

NFlourish · ‎10-23-2019

Hi! I was just trying to throw some SVG into my Hub site. The basic idea is to drop a text element into the Hub editor, then edit that text element in code mode, and paste SVG into it.

Having done that, I get some odd results.

Pasting the SVG in, and switching out of code mode back to WYSIWYG I can see my SVG graphic clearly and correctly. Yay!

Then I leave edit mode for the text element and my SVG item disappears. I put it inside a DIV with a fixed height and 100% width, and a red border to make it more obvious where it should be... the red box draws correctly, but the SVG image is simply not there.

OK. So I save the site anyway, and flip over to view mode for the site. AND... my SVG graphic _is_ there, but is drawn entirely in black..???!

What are technical limitations of SVG in Hub?

NFlourish · ‎10-24-2019

Ok - I think I came up with a solution. I do not have an explanation per-se, but I did fix my particular issue. I ran my SVG through an on-line SVG optimization tool.

SVG-Optimiser

I have no affiliation with that tool nor have I thoroughly vetted it. After running my SVG through that tool, it came out of Hub showing all curves and colors of the logo in proper form. I have never had trouble with that SVG before, but maybe it included some odd extra formatting old styles? Unclear... but I'm moving on. Maybe this note will help someone else.

NFlourish · ‎10-29-2019

I discovered another couple SVG related limitations.

SVG with an embedded raster image will not render. I cannot say why one would embed a PNG or JPG into an SVG as the method of delivering that raster content, but it can be done. I discovered this because I had an SVG that would not render... and I finally realized that it was basically an SVG wrapper around a PNG image!
SVG embedded into CSS using a url(data) method will not work because when text blocks are saved the quotes around the url() content get changed to "&quot" instead. This would be a useful trick for custom SVG "bullets" in lists. Sadly it fails. This is super confusing because it does not happen until you save it... so while you are editing your text block's content in code mode, then you flip back to preview mode ... but haven't saved stuff yet... the SVG actually renders. I kept editing it... seeing the result look correct in the first preview, and then being frustrated that it wasn't coming through after saving the Hub site and opening it in view mode. When you look at the JSON stored in ArcGIS Online Assistant, you can clearly see how the content gets transformed when saved.