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.
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?
> 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:
> 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.
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 :)
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.
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).
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.
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.
> I’m not hip enough to know if this style has been assigned a pithy label, but I do enjoy it. At the same time, I find it frustrating — because as far as I can tell (the lack of examples I have seen in the wild supports this theory) there isn’t an easy way to replicate these illustrations with SVGs
The term the author is looking for is "dithering". CSS-Tricks explains this on their page "Grainy Gradients" using the same technique:
It really is just noise, more precisely a kind of Perlin noise combined with a "color burn" blending mode. It is not dithering, though it looks like it because it is applied on a gradient.
The idea with dithering is that you start with a smooth image (high color depth) and quantize it, that is, reduce the number of colors. If you do it the simplest way, by integer division, you will get banding. To reduce banding, the idea is that for each pixel, you choose between the rounded up or rounded down value semi-randomly, with a probability depending on how close you are to each value. It will give gradients a noisy look, but if you happen to be on exactly the color you want, it will not look noisy at all. Even though dithering can be a stylistic choice, it is more often a technical one, so that you can have a good looking image with a limited palette.
Here, the effect will result in a uniformly noisy texture, and it will not reduce banding if present. I think that for aesthetic purposes, it is better than true dithering.
In addition to the aesthetic value of adding texture to the object, just like dithering, it can also improve the perceived quality of the image. For example, it can mask defects and increase the perceived sharpness.
> To reduce banding, the idea is that for each pixel, you choose between the rounded up or rounded down value semi-randomly, with a probability depending on how close you are to each value.
This oversimplifies it a bit. Most dithering algorithms are deterministic. They are based on choosing a value for a pixel, remembering the difference between the ideal and the chosen value and then spreading out that difference to surrounding pixels.
Random dithering is more commonly used in audio signals, AFAIK, not much in image processing.
Dithering would be an actual technical technique with a similar end effect, but it's not about adding grain per se, nor is this made through dithering.
And I think the guy looks for a design term for the visual style (similar to how we say "flat", "skeuomorphic", "italian style"), not the technical name of how it can be achieved, anyway.
For that, I'd say, both the geometrical shapes in his design and the added grain, bring to mind the so-called "memphis style".
I agree and the grain/transparency effect specifically looks like the gradients made using a (physical) airbrush that show up a lot in the Memphis style.
Oh wow, this is a little embarrassing. I will have to update the post to link to that. I promise I had not seen it when I created this, I did this on my own and came to the same conclusions!
This reminds me of how film photographers and film-makers strived to eliminate grain while digital photographers felt the need to add it back in. The grass is greener on the other side!
I confess to finding the examples on this page quite appealing, amidst all the digital sterility.
It'd be good not to overgeneralize. For as long as we've been doing digital video, and then later, digital photography, there have been as many folks trying to minimize noise as trying to eliminate noise as trying to simulate noise as intentionally exploiting noise. Noise as a thing was never the problem, it was always about whether there was too much of it.
Exactly. Noise adds texture - which is an important ingredient in visual art and design. But too much noise obstructs the image. It's all about balance – just like cooking.
Foveon just has 3 vertically stacked layers of photodiodes (one for each RGB colour) instead of a single one with Bayer filters like other digital camera sensors.
It’s not related to film grain (which is a byproduct of silver particles in celluloid).
I think the problem resolved itself when a new generation grew up with digital photography and did not long for grain. Now it is a retro aesthetic, like gen-Z's use of pixel art.
- You can include/link SVGs to embed, but if they in turn include other SVGs then it will not work (ex: the poster -> diagrams -> several plots/maps). So dynamic SVGs that are updated when subimages change are impossible
- Webbrowsers randomly and will refuse to display embedded/linked image b/c of "security"
- It was basically impossible to turn a complex SVG into a PDF without inconsistencies and/or running out of RAM
- Every SVG-to-PDF converter gives different results
- Many implementations (ex: Inkscape) will randomly treat included SVGs are a raster graphic. I never pinpointed when this would occur (and even then, when rendering to PNG Inkscape doesn't propagate the DPI setting to subimages)
That's cool. Looks like Inkscape supports adding this kind of noise through its various effects in its Filters menu. Exported as a Plain SVG and looking at the code confirms the use of feTurbulence.
For comparison, I also did a test to see how Affinity Designer 2 does it, since it has noisy fills. The SVG it exports has the noise embedded in it as a base64 jpeg image!
I'm currently away from my PC so I can't check myself, does it embed a single noise texture and use it multiple times, or does it generate a texture for each use of noise?
As someone who can't justify an Adobe license and can't wrap their head around InkScape, Designer has been a perfect alternative bar quirks like this.
The "ApeFest" website[1] (yeah, the one that burnt attendees' retinas with UV) has some dynamic noise going on, and I had a look at the CSS. They're actually using a tiled PNG overlay[2], which gets wobbled around "randomly" using CSS animations (edit: actually, looks like they move it with JS). Pretty low-tech, but it works.
It does if you redraw every frame, but if you disabled the animation and made it static I have a feeling it could beat the SVG method (although it probably wouldn't look as good).
It also has the advantage of looking mostly the same in every browser - the comments here report inconsistencies with the SVG method.
I’ve wanted to use a variety of SVG filters like this at times, but the problem is that their appearance varies significantly from engine to engine and by scaling factor, and so it only ends up working for subtle things where imprecisions don’t matter much, and I end up regretfully but consistently going back to raster stuff. Also the pixel-by-pixel nature of them means that things like feDisplacementMap destroy antialiasing, which spoils half of the situations you might like to use it.
Perlin Noise (and it's successor Fractal Noise) are incredible bang-for-your-buck when adding realism and/or an "organic" feel to things. You can see it used to great effect, for example, in Aladdin (1992) for the scene where they escape from the Cave of Wonders.
Readit News
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/
> 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.
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.
Great stuff.
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.
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.
The term the author is looking for is "dithering". CSS-Tricks explains this on their page "Grainy Gradients" using the same technique:
https://css-tricks.com/grainy-gradients/
There's also a decent alternative to doing this with CSS, though it's applied to the entire image:
https://github.com/tomren1/dither-with-css
The idea with dithering is that you start with a smooth image (high color depth) and quantize it, that is, reduce the number of colors. If you do it the simplest way, by integer division, you will get banding. To reduce banding, the idea is that for each pixel, you choose between the rounded up or rounded down value semi-randomly, with a probability depending on how close you are to each value. It will give gradients a noisy look, but if you happen to be on exactly the color you want, it will not look noisy at all. Even though dithering can be a stylistic choice, it is more often a technical one, so that you can have a good looking image with a limited palette.
Here, the effect will result in a uniformly noisy texture, and it will not reduce banding if present. I think that for aesthetic purposes, it is better than true dithering.
In addition to the aesthetic value of adding texture to the object, just like dithering, it can also improve the perceived quality of the image. For example, it can mask defects and increase the perceived sharpness.
This oversimplifies it a bit. Most dithering algorithms are deterministic. They are based on choosing a value for a pixel, remembering the difference between the ideal and the chosen value and then spreading out that difference to surrounding pixels.
Random dithering is more commonly used in audio signals, AFAIK, not much in image processing.
Graincore
And I think the guy looks for a design term for the visual style (similar to how we say "flat", "skeuomorphic", "italian style"), not the technical name of how it can be achieved, anyway.
For that, I'd say, both the geometrical shapes in his design and the added grain, bring to mind the so-called "memphis style".
1. https://www.etsy.com/listing/1402316103/memphis-style-postmo...
(Scroll down about halfway for the next one)
2. https://www.chairish.com/product/6986561/vintage-1980s-memph...
3. https://glowgeometric.com/products/1980s-hollis-fingold-memp...
Reminds me of vintage travel poster art. Example:
https://www.graphicart-news.com/wp-content/uploads/2012/09/2...
[0] https://en.wikipedia.org/wiki/Stippling
I confess to finding the examples on this page quite appealing, amidst all the digital sterility.
It’s not related to film grain (which is a byproduct of silver particles in celluloid).
I recently made the mistake of making a complex conference poster using SVG. It now renders different in every browser and program
https://kxygk.github.io/imergination/
In making the graphic I noticed:
- You can include/link SVGs to embed, but if they in turn include other SVGs then it will not work (ex: the poster -> diagrams -> several plots/maps). So dynamic SVGs that are updated when subimages change are impossible
- Webbrowsers randomly and will refuse to display embedded/linked image b/c of "security"
- Ex: in the above link, if you try to open the SVG in a separate tab it won't display correctly: https://raw.githubusercontent.com/wiki/kxygk/imergination/ag...
- It was basically impossible to turn a complex SVG into a PDF without inconsistencies and/or running out of RAM
- Every SVG-to-PDF converter gives different results
- Many implementations (ex: Inkscape) will randomly treat included SVGs are a raster graphic. I never pinpointed when this would occur (and even then, when rendering to PNG Inkscape doesn't propagate the DPI setting to subimages)
For comparison, I also did a test to see how Affinity Designer 2 does it, since it has noisy fills. The SVG it exports has the noise embedded in it as a base64 jpeg image!
As someone who can't justify an Adobe license and can't wrap their head around InkScape, Designer has been a perfect alternative bar quirks like this.
[1] https://apefest.com/
[2] https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpv...
It also has the advantage of looking mostly the same in every browser - the comments here report inconsistencies with the SVG method.