3 ms·

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 t

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 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 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?

epiccoleman 3y ago
That recursive yin yang article is great, and the logo you got out of the experiment is incredibly cool. I'm impressed!
- Tistron 3y ago
  Thank you!
airstrike 3y ago
Your link is so cool it's worth a submission of its own. Thanks for sharing!
- Tistron 3y ago
  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;wait:2000;color:gray;wait:3000;angle:-20;wait:2000;color:fire;wait:3000;angle:0;wait:2000;color:gray;wait:3000;angle:45;wait:2000;color:sea https://einarmagnus.net/pages/logo?animate=wait:3000;angle:0... I lose myself in doing these little things instead of marketing or copy, haha.
  - Tistron 3y ago
    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.
nicoburns 3y ago
> 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/ https://razrfalcon.github.io/notes-on-svg-parsing/ > Whenever I receive bug reports for my SVG library, people often use the phrase "my SVG isn't rendering correctly". Which cracks me up every time. There is no such thing as a correctly rendered SVG. As soon as you start using "advanced" features such as text, filters, or, God forbid, animations - it would simply not work. Never. And even if you will manage to make it work, as soon as you try a different render - it will fall apart again. > The idea behind this "book" is to answer the popular question of "how hard can it be?". A reader expected to have some prior knowledge about SVG, but it should be a fun read either way.
- qaisjp 3y ago
  This link is incredible, thank you!
- quickthrower2 3y ago
  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.
- esafak 3y ago
  What is the solution today; stick to simple SVG features, or use PNG?
  - Tistron 3y ago
    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/Fills_and_Strokes https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fi...): > In addition to setting attributes on objects, you can also use CSS to style fills and strokes. Not all attributes can be set via CSS. Attributes that deal with painting and filling are usually available, so fill, stroke, stroke-dasharray, etc. can all be set this way, in addition to the gradient and pattern versions of those shown below. Attributes like width, height, or <path> commands cannot be set through CSS. It's easiest just to test and find out what is available and what isn't. > Note: The SVG specification decides strictly between attributes that are properties and other attributes. The former can be modified with CSS, the latter not.
rambambram 3y ago
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.
- Tistron 3y ago
  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.
hiisukun 3y ago
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.
- heleninboodler 3y ago
  Thanks for pointing this out. I thought the wave logo was very clever and clicked away, but the demonstration of a handful of building different (and really well done) subjects with the same simple technique blew my mind.
danielvaughn 3y ago
SVG on Safari is pretty rough. There’s a lot you can’t do with it.
a_c 3y ago
Your logo demo is very satisfying to look and play at. Very cool. Just want to let you know

epiccoleman 3y ago

That recursive yin yang article is great, and the logo you got out of the experiment is incredibly cool. I'm impressed!

Tistron 3y ago
Thank you!

airstrike 3y ago

Your link is so cool it's worth a submission of its own. Thanks for sharing!

Tistron 3y ago
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;wait:2000;color:gray;wait:3000;angle:-20;wait:2000;color:fire;wait:3000;angle:0;wait:2000;color:gray;wait:3000;angle:45;wait:2000;color:sea https://einarmagnus.net/pages/logo?animate=wait:3000;angle:0... I lose myself in doing these little things instead of marketing or copy, haha.
- Tistron 3y ago
  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.

nicoburns 3y ago

> 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/ https://razrfalcon.github.io/notes-on-svg-parsing/ > Whenever I receive bug reports for my SVG library, people often use the phrase "my SVG isn't rendering correctly". Which cracks me up every time. There is no such thing as a correctly rendered SVG. As soon as you start using "advanced" features such as text, filters, or, God forbid, animations - it would simply not work. Never. And even if you will manage to make it work, as soon as you try a different render - it will fall apart again. > The idea behind this "book" is to answer the popular question of "how hard can it be?". A reader expected to have some prior knowledge about SVG, but it should be a fun read either way.

qaisjp 3y ago
This link is incredible, thank you!
quickthrower2 3y ago
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.
esafak 3y ago
What is the solution today; stick to simple SVG features, or use PNG?
- Tistron 3y ago
  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/Fills_and_Strokes https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fi...): > In addition to setting attributes on objects, you can also use CSS to style fills and strokes. Not all attributes can be set via CSS. Attributes that deal with painting and filling are usually available, so fill, stroke, stroke-dasharray, etc. can all be set this way, in addition to the gradient and pattern versions of those shown below. Attributes like width, height, or <path> commands cannot be set through CSS. It's easiest just to test and find out what is available and what isn't. > Note: The SVG specification decides strictly between attributes that are properties and other attributes. The former can be modified with CSS, the latter not.

rambambram 3y ago

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.

Tistron 3y ago
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.

hiisukun 3y ago

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.

heleninboodler 3y ago
Thanks for pointing this out. I thought the wave logo was very clever and clicked away, but the demonstration of a handful of building different (and really well done) subjects with the same simple technique blew my mind.

danielvaughn 3y ago

SVG on Safari is pretty rough. There’s a lot you can’t do with it.

a_c 3y ago

Your logo demo is very satisfying to look and play at. Very cool. Just want to let you know