I recently was playing with SVG, to get a dropshadow I couldn't make when drawing on canvas. I could not get css dropshadows in SVG working in Safari and had to use SVG native drop shadow filters, and then that looks different in Safari than in the other browsers.
The specific thing is at https://www.einarmagnus.net/pages/logo I do my best to detect safari with javascript and activate the SVG version and disable the css version.
Background on the "recursive yin yang" is here: https://einarmagnus.net/blog/2020/01/22/finding-the-logo
Maybe I'll play with texture, I like that aesthetic a lot. But it is frustrating that it looks so differently in Safari. Do you think that they will converge on how they interpret SVG?
Not any time soon. The unfortunate truth is that nobody implements the entirety of the SVG spec. It's not even close when it comes to SVG 2. This is a good read on that topic:
https://razrfalcon.github.io/notes-on-svg-parsing/
What is the solution today; stick to simple SVG features, or use PNG?
The only thing I had problems with (only caring about current versions of Chrome, Fx and Safari) was drop-shadows. Though I guess I am not using particularly advanced SVG features. What made it feel advanced and cool for me is how much I could do with css variables and transitions blended into it. Though, the mixing of CSS and SVG is also weird.
MDN (https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fi...):
Wow, started reading this now.
There's a lot of surprises in there for sure. The people crafting the spec seem to have had some peculiar goals that I don't quite understand. Especially all the implicit stuff in path data is surprising to me.
Also, a relative value of stroke-with is "relative to the diagonal length of the current viewbox". This was surprising, but makes a lot of sense when I think about it. And the default unit is %, which also makes sense after some thinking.
Seems like frustrating work, I'm glad the author can channel it into writing :)
Thanks for sharing.
For a user, this has been my biggest frustration. ‘300x150 is the default specified in the SVG spec if it isn't specified in the document svg element.’
In practice, this means that some SVGs appear fine in apps that calculates the size in some other manner, but in others that follow the ‘spec’ only 300x150 appears. Safari & Jupyter notebooks for example. Seriously annoying, but at least I was able to figure out why.
https://svgwg.org/specs/integration/#svg-css-sizing
I noticed this when trying to do pixel perfect previews for a client project. There are differences in simple text alignment settings. If you need product previews it might be worth considering server side render to image :-( instead.
This link is incredible, thank you!
Your link is so cool it's worth a submission of its own. Thanks for sharing!
Thank you!
I didn't get around to making UI for it, but I also added the ability to link to animations: https://einarmagnus.net/pages/logo?animate=wait:3000;angle:0...
I lose myself in doing these little things instead of marketing or copy, haha.
Also, the svg is made with a recursive astro component. It would probably make for a nice writeup, but I'd rather write more about shame and presence.
Your blog post on shame really resonates with me. Good stuff, you should post it here. I subscribed to your feed, it's a shame (pun intended) I can't read Swedish.
Thank you! I want to get around to writing more. I now teach circling for Circling Europe in Scandinavia. I have learned a lot since I wrote that piece.
And I also want to get around to having my website in English and Swedish. Astro released v4 just now and has some some kind of i18n story that I'm gonna look into.
That recursive yin yang article is great, and the logo you got out of the experiment is incredibly cool. I'm impressed!
Thank you!
In case anybody ends up on the 'logo' page and clicks away after looking at the default waves, try a few of the 'presets' on the bottom-rightmost dropdown. It's really cool how different tweaks to the parameters yield interesting designs (like scorpion vs balance vs spruce).
Great stuff.
SVG on Safari is pretty rough. There’s a lot you can’t do with it.
Your logo demo is very satisfying to look and play at. Very cool. Just want to let you know