SVG messed up on publish

[markusmayerroth]

The image widget doesn’t allow SVG files.

So I added SVG images to a page using the embed widget. While they display fine in the editor, they look horrible on the published site – see screen shots.

https://www.dropbox.com/s/451tams68lm9iyu/weebly-svg-editor.png?dl=0

https://www.dropbox.com/s/8zpoona2prm8ui2/weebly-svg-published.png?dl=0

A diff of the original an the published SVG code reveals that the publishing process alters the SVG code and adds closing tags – see yet another screen shot.

https://www.dropbox.com/s/coaop3fgu3jauhe/weebly-svg-diff.png?dl=0

So how should I go about adding SVG imagery to a site?

If there was support for hi-dpi pixel imagery I could resort to that. But sadly with Weebly that’s not an option either.

Hi-dpi devices have become mainstream many many years ago and there is not even a hard way to make a Weebly site look good on them – let alone an easy one, which should be the prime goal for a site builder.

[Adam7]

Is your SVG code in an embed code element? That's very odd seeing the closing line tags, since the Embed Code element does not alter anything you put in it (people sometimes break the display of their site this way by missing closing tags). 

[markusmayerroth · Accepted solution]

Yes I had to resort to the embed element since the picture element oddly doesn’t allow SVG.

However I did find the solution by fiddling with the export settings: Apparently this only happens with minified SVG code.

I re-exported all SVG assets without minification and now it works - yay!

If Weebly eventually put some muscle into implementing responsive images it might actually be considered for serious agency work …