add workaround for SVG images without diemnsion properties on their r…

…oot element

CHANGELOG.md

@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Fixed
+
+-   `<Depiction />`
+    -   images representing SVG without `width` property on their root element are displayed with a minimal forced dimension to prevent that they are hidden in some browsers
+
 ## [23.4.1] - 2024-02-08
 
 ### Fixed

src/components/Depiction/depiction.scss

@@ -3,16 +3,14 @@ $eccgui-size-depiction-height-small: mini-units(6) !default;
 $eccgui-size-depiction-height-medium: mini-units(12) !default;
 $eccgui-size-depiction-height-large: mini-units(24) !default;
 $eccgui-size-depiction-height-xlarge: mini-units(48) !default;
-
 $eccgui-color-depiction-background: $eccgui-color-workspace-text !default;
 $eccgui-color-depiction-text: $eccgui-color-workspace-background !default;
 $eccgui-size-depiction-border-radius: $pt-border-radius !default;
 
-
 .#{$eccgui}-depiction {
-    max-width: 100%;
-    display: inline-flex;
     position: relative;
+    display: inline-flex;
+    max-width: 100%;
 
     .#{$eccgui}-overviewitem__item > & {
         flex-grow: 0;
@@ -26,12 +24,13 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
 }
 
 .#{$eccgui}-depiction__image {
-    overflow: hidden;
     max-width: 100%;
     max-height: 100%;
+    overflow: hidden;
     border-radius: $eccgui-size-depiction-border-radius;
 
-    img, svg {
+    img,
+    svg {
         width: 100%;
         height: 100%;
     }
@@ -57,30 +56,45 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
 .#{$eccgui}-depiction__image--ratio-source {
     aspect-ratio: auto;
 
-    img, svg {
+    img,
+    svg {
         max-width: 100%;
         max-height: 100%;
     }
+
+    /**
+    * SVG images without width property on their SVG root are not (specific: using a width of 0px) displayed by some browsers (e.g. Firefox or Brave).
+    * This might be technically correct but to the user it looks like a bug and is not expected by them.
+    * We workaround this "problem" by adding minimal dimensions to images with an SVG source.
+    */
+    img[src^="data:image/svg"],
+    img[src*=".svg"] {
+        min-width: $eccgui-size-depiction-height-tiny;
+        min-height: $eccgui-size-depiction-height-tiny;
+    }
 }
 
 .#{$eccgui}-depiction__image--ratio-1to1 {
     aspect-ratio: 1/1;
 }
 
 .#{$eccgui}-depiction__image--contain-sizing {
-    img, svg {
+    img,
+    svg {
         object-fit: contain;
     }
 }
 
 .#{$eccgui}-depiction__image--cover-sizing {
-    img, svg {
+    img,
+    svg {
         object-fit: cover;
     }
 }
 
 .#{$eccgui}-depiction__image--stretch-sizing {
-    img, svg {
+    img,
+    svg {
         object-fit: fill;
     }
 }
@@ -153,8 +167,8 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
     --#{$eccgui}-depiction-color: #{$eccgui-color-depiction-background};
 }
 .#{$eccgui}-depiction__image--color-config {
-    background: var(--#{$eccgui}-depiction-background);
     color: var(--#{$eccgui}-depiction-color);
+    background: var(--#{$eccgui}-depiction-background);
 
     /*
     Lead to more problems, even with our Carbon icons, that it "heals" unknown SVGs
@@ -166,11 +180,11 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
 }
 
 .#{$eccgui}-depiction__image--hasborder {
-    border: 1px solid currentColor;
+    border: 1px solid currentcolor;
 }
 
 .#{$eccgui}-depiction__caption--none,
- .#{$eccgui}-depiction__caption--tooltip {
+.#{$eccgui}-depiction__caption--tooltip {
     position: fixed;
     left: -5000rem;
 }

src/components/Depiction/stories/Depiction.stories.tsx

@@ -14,6 +14,7 @@ import png16to9 from "./test-16to9.png";
 import svg16to9 from "./test-16to9.svg";
 import svg16to9base64 from "./test-16to9.tobase64.svg";
 import svgDimensionless from "./test-dimensionless.svg";
+import svgDimensionlessBase64 from "./test-dimensionless.tobase64.svg";
 
 const allIcons = new Map([
     ...Object.keys(canonicalIcons).map((keyId) => {
@@ -31,6 +32,7 @@ const exampleImages = {
     "SVG 16:9 as React element": <Svg16to9 />,
     "SVG 9:16 as React element": <Svg9to16 />,
     "SVG without known width/height dimensions": <img src={svgDimensionless} />,
+    "SVG without known width/height as Base64": <img src={svgDimensionlessBase64} />,
     "Test icon": <TestIcon tryout={LogoReact} />,
     ...Object.fromEntries(allIcons),
 };