SVG in HTML does not render in sandbox


#1

I have an application that uses inline SVG elements for icons. When running in a sandbox the SVGs do not render, the markup is there but nothing is showing. I am running a NodeJS application type. Everything looks fine when I run the server locally.

Example SVG code:
<svg width="100px" height="100px" xmlns="https://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" preserveaspectratio="xMidYMid meet" class="icon help" style="fill: currentcolor; vertical-align: middle;"><title>Help</title><path d="M16.218 3.782c-1.794-1.794-4.18-2.782-6.718-2.782s-4.923 0.988-6.718 2.782-2.782 4.18-2.782 6.717 0.988 4.923 2.782 6.718 4.18 2.782 6.718 2.782 4.923-0.988 6.718-2.782 2.782-4.18 2.782-6.718-0.988-4.923-2.782-6.717zM9.5 19c-4.687 0-8.5-3.813-8.5-8.5s3.813-8.5 8.5-8.5c4.687 0 8.5 3.813 8.5 8.5s-3.813 8.5-8.5 8.5z"></path><path d="M9.5 15c-0.276 0-0.5-0.224-0.5-0.5v-2c0-0.276 0.224-0.5 0.5-0.5 1.93 0 3.5-1.57 3.5-3.5s-1.57-3.5-3.5-3.5-3.5 1.57-3.5 3.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5c0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 2.312-1.753 4.223-4 4.472v1.528c0 0.276-0.224 0.5-0.5 0.5z"></path><path d="M9.5 18c-0 0 0 0 0 0-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5 0 0 0 0 0 0 0.276 0 0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z"></path></svg>


#2

Hey Cameron,
Could you please send the URL to that Sandbox? We’ll have a look at it.


#3

Sure here is one of our branches running in a sandbox. https://im6h7z86.buddy.show


#4

You should see a logo on the left of the header and in the footer. Both are SVG. You can also see that all iconography is not rendering by visiting https://im6h7z86.buddy.show/brand-guide#iconography.


#5

xmlns attribute in your svg code is https://www.w3.org/2000/svg
should be: http://www.w3.org/2000/svg (without s in https)

It looks like bug in your compiler, because in the compiled version this attribute is wrong:

...
d=[1,'<svg xmlns="https://www.w3.org/2000/svg">'
...

see there: https://www.w3.org/TR/SVG/struct.html#NewDocumentOverview


#6

Very interesting. This does not happen on our production site with HTTPS and the problem is not happening when I load the sandbox over HTTP. My build process is not changing the xmlns attribute, it looks like the server is changing or causing the browser to change the attribute based on protocol. This is not happening on our production site (https://my.findawayvoices.com). It could be related to the nodejs server I am using to run the site (pushstate-server), but it does not natively support HTTPS so I cannot test locally.


#7

Hey Cam,
We have just released a fix to that. Can you confirm it’s working okay?


#8

YEAH! I see them working now on HTTPS. Thanks so much!