Fatwigoo
This article is a stub. You can help the IndieWeb wiki by expanding it.
Fatwigoo, or FOUSVG, is an embedded SVG image that depends on (external) CSS for its sizing. These images are blown up to fill the entire screen if the CSS fails to load.
- 2016-03-01 : SVG Style Inheritance and the βFlash Of Unstyled SVGβ (archived), the name being a play on the term flash of unstyled content (FOUC).
- 2017-11-02 : Discover The Fatwigoo (archived), the name being inspired by the worst offenders, social media buttons: Facebook, Twitter, Google.
SVG elements embedded in HTML with the svg
element default to a width of the entire browser viewport, scaling its height to that size. If a website depends on CSS to resize the SVG and this does not load for any reason (e.g. bad network or blocking extension) the user will have their screen filled with just the one icon. Similarly, external CSS will mostly not be available when content is included on other pages, e.g. a reply-context, planet or comment (but this applies to other images too).
An example on the IndieWeb, Eddie Hinkleβs home page on 2018-03-01 without CSS fills a big part of the viewport with its menu icon:
See Also
- set a height as well as a width so that the layout engine knows the aspect ratio of the original image (see https://www.industrialempathy.com/posts/image-optimizations/ )
- Has nothing to do with: fatberg
- 2023-08-21 : Please size your inline SVGs (archived), still a problem in 2023...