Appending strings in DAX templates does not scale well, for the human

DAX using fancy CSS Variables instead of strings.md

SVG's support CSS variables.

CSS variables

Instead of hard coding values in the whole file:

<path fill="#123456" .... >

You can declare a variable named --color-main and resuse it.

--color-fg: orange;
<path fill="var(--color-main)" ... >

Thats one way to limit the amount of strings you need to append, in dax.

Using Format with non-ambigous tokens

People either use a hundred string plus double quotes in there measure, which turns into a mess. Or sometimes you'll see SUBSTITUTE( baseHtml, "green", "#fe99aa" ) The problem is that it often matches values you don't want.

How can you fix that? If you could pick a delimeter that's never used, that becomes easy.

I chose ␞

It's a record-separator-symbol https://www.compart.com/en/unicode/U+241E . It's safe to print, and human visible. ( It is not the invisible control character. it's the safe symbol to visualize that character )

Say you want to modify the variable for stroke-width dynamically

Based on the measure's filter context.

I edited my original svg from:

path { 
    stroke-width: 4;
}

to

path { 
    stroke-width: ␞StrokeWidth␞;
}

Now I can replace it without fear

var render = SUBSTITUTE( rawSvg, "␞StrokeWidth␞", StrokeWidth )

Stand alone example

Stand Alone Variable Cat.dax.md

[ Cat SVG ] =     
    /* 
        about: this version uses dynamic dax replacement on a special token
    
        You can use a dynamic dax replacement like this:      
        Substitute( [Svg], "␞ColorStroke␞", "salmon" )

        with this css rule:
        --color-stroke: ␞ColorStroke␞;       
    */
    var StrokeWidth = 2 // column was a value 0 to 2
    var rawSvg = "data:image/svg+xml;utf8,<svg fill=""#000000"" width=""800px"" height=""800px"" viewBox=""0 0 32 32"" version=""1.1"" xmlns=""http://www.w3.org/2000/svg"">
<title>cat</title>
<style>
    :root {
        --color-fg: orange;
        --color-fg: salmon; /* quickly test versions using hotkey: Alt+UpArrow / Alt+DownArrow */
        --color-fill: ␞ColorFill␞;
    }
    path {
    /* fill: var(--color-fill, ""blue""); */
    stroke: maroon;
    /* original: stroke-width: 1px; */
    stroke-width: ␞StrokeWidth␞;
    }

</style>

<!-- 
the raw cat path before variables is from:
    https://www.svgviewer.dev/s/365413/cat
    License: GPL. Made by nagoshiashumari: https://github.com/nagoshiashumari/Rpg-Awesome -->
<path fill=""var(--color-fg)"" d=""M28.926 1.17l-2.182 3.608c-1.876-0.608-4.669-0.489-6.426 0l-2.102-3.557c-3.452 6.448-2.475 10.523 0.159 12.549-0.403 0.252-0.818 0.529-1.247 0.833-10.979-8.759-20.863 1.106-14.379 9.92h0.050c1.163 1.687 2.503 2.731 3.95 3.277 2.050 0.773 4.159 0.551 6.236 0.257s4.109-0.663 6.046-0.525c1.937 0.138 3.874 0.635 5.647 2.569 1.209 1.318 2.926-0.101 1.486-1.507-2.185-2.134-4.525-2.959-6.825-3.122s-4.505 0.293-6.502 0.576c-1.997 0.283-3.761 0.409-5.276-0.163-0.711-0.268-1.403-0.69-2.070-1.36h22.51c1.064-3.756 1.177-7.73-0.033-10.237 3.635-1.897 5.097-6.376 0.958-13.116zM22.176 10.872c-2.316 1.117-3.367 0.212-3.817-1.656 2.273-1.41 3.626-0.278 3.817 1.656zM25.067 10.872c0.191-1.934 1.544-3.067 3.817-1.656-0.45 1.868-1.502 2.774-3.817 1.656z""></path>
</svg>"
    var render = SUBSTITUTE( rawSvg, "␞StrokeWidth␞", StrokeWidth )

return render

Using Css Color Variables.md

Live demo: https://jsfiddle.net/ninmonkey/1p7fnca6/36/

see more:

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
• https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

<style type="text/css">
  /* set "global" colors children can implicitly override them */
  :root {
    --font-size: 1.5rem;
    --font-size-big: 3rem;
    --bg-color: #92a9dd;
    --bg-color-alpha: hsl(from green h s l / 0.5);    
  }
  
  /* first apply the rule to the root, grid, and all div */
  :root, .grid, div {
    font-size: var(--font-size);
    background-color: var(--bg-color);
  }  
  /* update variables for the root, and specific children 
  Just update the variable and the properties change */
  h1 {
    background-color: var(--bg-color-alpha ); 
  }
  .grid, div {   
    --bg-color: pink;         
  }   
  .grid { 
      --bg-color: #515c6b;               
      display: flex;
      gap: 1ch;

      .first { 
          --bg-color: green;
          --font-size: var(--font-size-huge);
      }
  }
</style>

<h1>Flex</h1>

<div class="grid">
  <div class="first">First Item</div>
  <div>bar</div>  
  <div>cat image</div>
</div>

<h1>See more:</h1>
<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl">CSS hsl from</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS Custom Properties Guide</a></li>
</ul>