Squarespace has issues with animated SVG logo

Hello,

Squarespace (both 7.0 and 7.1) has issues with animated SVG logo.

Issue: logo stops animating when reloading a page, or when clicking on the logo or any link within the page.

Affected browsers:

Safari (macOS): affected
Chrome (macOS): NOT affected
Firefox (macOS): NOT affected
Edge (macOS): NOT affected

Safari (iOS): affected
Chrome (iOS): affected
Firefox (iOS): affected
Edge (iOS): affected

*iOS and macOS are the latest versions.
**Tested on 12 different Macs across 3 different Apple Stores, on 3 different Macs at work, and 2 different Macs at home. All exhibited the issue.

P.S.

Animated SVG's inserted through a code block are not affected.

I just want to say that is impressive! I'm using Safari and when I first clicked on your test page both logos worked. Then when I clicked on each of the Test links only the bottom logo worked. The top left logo was static. I know nothing about website building or coding so I'm sorry I can't be of help. Still, I am searching for CSS or javascript code where I can load up my static logo as a SVG. Would you happen to have code that works for static logos? Thank you.

Anyone with SVG expertise?

I'm surprised nobody could help me.

Anyway, I was able to come up with a very weird fix myself.

Hopefully, Squarespace will fix it officially for everyone else in the near future.

I honestly find the lack of support on Squarespace for SMIL SVGs very disconcerting. It very cool, versatile, powerful, and widely supported by browsers, yet oddly not natively supported by Squaresapce. 

I'm dealing with a similar issues and form what I read it seems that SquareSpace requires you to encase SMIL language in either Javascript or CSS, see here for specifics how: 
https://www.w3.org/TR/SMIL20/smil-timing.html#Timing-IntegratingSMILTiming

When integrating SMIL into a host language, the structure of the code is slightly different. From what Ive gathered recently: currently XCSS XJava are supported, and XHTML is in the process of being supported though still experimental (plethora of more information at:  https://www.w3.org/TR/SMIL3/ )
(the prefix is X because SMIL is based in XML)

Unfortunately most questions and guides I see on integrating SMIL animated SVGs into Squarespace revolve around using https://www.svgator.com/ 
which is nifty but I think it truly a shame, I wish there was more of a community around this all

I'm dealing with similar support issues and once I figure it out I think I think I might make a video guide for animating an SVG from scratch using SMIL, and how to integrate it on Squarespace. 

22 minutes ago, CatDog said:

I honestly find the lack of support on Squarespace for SMIL SVGs very disconcerting. It very cool, versatile, powerful, and widely supported by browsers, yet oddly not natively supported by Squaresapce.

The key issue is not whether a technology is widely supported by browsers but if SS's target market, average folks who want to make a website easily, will want to use SMIL and SVG. I suspect most of SS's customer base don't know what those acronyms mean.

The only way to change SS's mind is to contact Customer support and register your desire for whatever features you want.

Quote

once I figure it out I think I think I might make a video guide for animating an SVG from scratch using SMIL, and how to integrate it on Squarespace.

That would be helpful for anyone that comes along after you. 👍

Youre right, its a different target market. 

Also I stand corrected, I was looking at the issues in the wrong way. I read this article and have been meaning to circle back to this comment .

Article: https://www.sitepoint.com/why-hosting-your-svgs-is-hard-and-how-to-beat-it/

TL'DR: SVGs are security issue for hosts, so they are not widely hosted the same way PNG's, JPGs, and GIF's are. 

Instead you can host the SVG in a block contained in HTML, like so on SquareSpace. The blocks are limited on squarespace though because code blocks do not support XML, the language that SMIL's is based in.
Also to clarify, SMIL = the language used to code SVGs, full index here: https://www.w3.org/TR/SMIL3/

So if you use a Squarespace code block you have to your SVG it into HTML using <SVG></SVG>.

Hosting it on GitHub as a GIST is better though, in my opinion. Its cleaner to link the SVG image in rather than have the code plopped into a box anyways. That way you can contain the entire SVG in a file ending in .SVG, using SMIL (pronounced "smile" 🙂 )

If you want to know how, follow the article to upload your SVG to GitHub as a Gist, then you can just use either CSS or HTML to link in the SVG as in image

Also @creedon you're right, this isn't really a necessary feature for their target use / demographic

7 hours ago, creedon said:

The key issue is not whether a technology is widely supported by browsers but if SS's target market, average folks who want to make a website easily, will want to use SMIL and SVG. I suspect most of SS's customer base don't know what those acronyms mean.