CatDog

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

Follow this article: https://www.sitepoint.com/why-hosting-your-svgs-is-hard-and-how-to-beat-it/ TL'DR: hosting SVGs is difficult because its usually a security issue for the hostler, alternatively you can upload your SVG as a gist on github, then link it into your webpage as an using an HTML code block: <div id="example"> <img src="https://gist.githack.com/CleanWetGrass/afab65de2aaf30d326c64f9a3cde22d5/raw/7c87266f3cb437b8f60b6d1c47fc9e9372d00ce1/DrLCA-v01.svg"> </div> Then you can target that "example" in the design tab, and reformat it with CSS ``` OR you can link it into the background by adding custom CSS in the Design page like this: #blockID body { background-image: url("https://gist.githack.com/CleanWetGrass/afab65de2aaf30d326c64f9a3cde22d5/raw/7c87266f3cb437b8f60b6d1c47fc9e9372d00ce1/DrLCA-v01.svg"); } OR you can do the whole page/setting/advance/inject code and inject the HTML as a background that way, but that is usually easier with the landing page than index page. So better to avoid the issues iMO EDIT: also I meant to say, you can do the button methods mentioned above but they are cumbersome in my opinion, when you can just throw it in a gist

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.