Add comments inside SVG in formula

Ratatosk · 02-15-2021 02:30 AM

Just figured out you can put comments inside data:image… SVGs. Just be sure to add the comments between “>” and “<”. Don’t use any characters used in coding.

Ifs(and(Count([Related Plenklippings][ID])>[_thisrow].[Periodisk],[Periodisk]>0),
CONCATENATE("data:image/svg+xml;utf8,<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 120 120"">

𝙏𝙃𝙄𝙎 𝙏𝙃𝙄𝙉𝙂𝙔 𝘿𝙊𝙀𝙎 𝙏𝙃𝙄𝙎
<circle cx=""60"" cy=""60"" r=""54"" fill=""rgb(203,151,148)"" stroke=""rgb(203,151,148)"" stroke-width=""12""/>

𝙏𝙃𝙄𝙎 𝙏𝙃𝙄𝙉𝙂𝙔 𝘿𝙊𝙀𝙎 𝙏𝙃𝘼𝙏
<text font-family=""Roboto,Arial,sans-serif"" font-size=""20px""  font-weight=""bold"" text-anchor=""middle"" fill=""white"" x=""50%"" y=""57.5%"">",
Count([Related Plenklippings][ID])&" GNG","<tspan font-size=""15px"" fill=""rgb(167,169,172)"" style=""baseline-shift: super""></tspan></text>

𝙏𝙃𝙄𝙎 𝙏𝙃𝙄𝙉𝙂𝙔 𝘿𝙊𝙀𝙎 𝘼𝙉𝙊𝙏𝙃𝙀𝙍 𝙏𝙃𝙄𝙉𝙂
<circle cx=""60"" cy=""60"" r=""53"" fill=""none"" stroke=""rgb(80,132,226)"" stroke-width=""12"" />
<circle cx=""60"" cy=""60"" r=""54"" fill=""none"" stroke=""lightgrey"" stroke-width=""12"" stroke-dasharray=""360"" stroke-dashoffset=""",-(([Sist]*24)+3),""" transform=""rotate(-90 60 60)""/>

</svg>"),

MultiTech

Ratatosk

What the…

Bahbus

You can also switch all those annoying to read double quotes with single quotes.

<circle cx='60' cy='60' r='54' fill='rgb(203,151,148)' stroke='rgb(203,151,148)' stroke-width='12'/>
should also work.
AND you can include CSS like:

<style type='text/css'>
      @font-face {font-family: 'Bebas Neue';font-weight: normal;font-style: normal;font-display: swap;src: url('data:application/font-woff2;charset=utf-8;base64,"&LOOKUP("Bebas Neue", "Font List", "Font Name", "Base64-WOFF2")&"') format('woff2'), url('data:application/font-woff;charset=utf-8;base64,"&LOOKUP("Bebas Neue", "Font List", "Font Name", "Base64-WOFF")&"') format('woff')}
      * {
      	--text-stamp-width: "&LEN(TEXT([Discounted Price]))&"ch;
      }
      .stamp {
      	font-family: 'Bebas Neue';
        font-size: 160px;
        font-weight: bold;
        height:3.1ex;
        fill: url("&ENCODEURL(#)&"dg);
        stroke: url("&ENCODEURL(#)&"dg);
        transform: rotate(-10deg) translate(-25px,45px);
      }
      .dynamic {
      	x: calc((100% - var(--text-stamp-width)) / 2 );
        width: var(--text-stamp-width);
      }
      .outline {
      	y: 37;
        height: inherit;
        rx: 40;
        ry: 40;
        fill: rgba(32,33,36,80%);
        stroke-width: 17;
        stroke-dasharray: 1 5 3 5 20 5 3 5 1 5;
        animation: dash 1s linear infinite alternate-reverse;
      }
      @keyframes dash {
      	from {
        	stroke-dashoffset: 20%;
        } 
        to {	
        	stroke-dashoffset: 30%;	
        }
      }
      
      text {
      	alignment-baseline: central;
        text-anchor: middle;
        paint-order: stroke;
        stroke: rgb(32,33,36);
        stroke-width: 15;
      }
      text.price {
      	font-family: 'Bebas Neue';
      	fill: white;
        font-size: 175px;
      }
    </style>

Ratatosk

Single quotes doesn’t work when using %23 as “#”.

Bahbus

Correct. Which is why I just use &ENCODEURL(#)&.

Ratatosk

Can you show an example of how CSS is included? I can’t seem to get it right.

Bahbus

Example of my full SVG with animation and CSS

"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 250' style='background-color:none'>
  <defs>
  	<linearGradient id='dg' gradientUnits='userSpaceOnUse' transform-origin='center' gradientTransform='rotate(50)'>
      <stop stop-color='rgb(253,231,76)' offset='10%'/>
      <stop stop-color='rgb(255,111,0)' offset='90%'/>	
    </linearGradient>
    <style type='text/css'>
      @font-face {font-family: 'Bebas Neue';font-weight: normal;font-style: normal;font-display: swap;src: url('data:application/font-woff2;charset=utf-8;base64,"&LOOKUP("Bebas Neue", "Font List", "Font Name", "Base64-WOFF2")&"') format('woff2'), url('data:application/font-woff;charset=utf-8;base64,"&LOOKUP("Bebas Neue", "Font List", "Font Name", "Base64-WOFF")&"') format('woff')}
      * {
      	--text-stamp-width: "&LEN(TEXT([Discounted Price]))&"ch;
      }
      .stamp {
      	font-family: 'Bebas Neue';
        font-size: 160px;
        font-weight: bold;
        height:3.1ex;
        fill: url("&ENCODEURL(#)&"dg);
        stroke: url("&ENCODEURL(#)&"dg);
        transform: rotate(-10deg) translate(-25px,45px);
      }
      .dynamic {
      	x: calc((100% - var(--text-stamp-width)) / 2 );
        width: var(--text-stamp-width);
      }
      .outline {
      	y: 37;
        height: inherit;
        rx: 40;
        ry: 40;
        fill: rgba(32,33,36,80%);
        stroke-width: 17;
        stroke-dasharray: 1 5 3 5 20 5 3 5 1 5;
        animation: dash 1s linear infinite alternate-reverse;
      }
      @keyframes dash {
      	from {
        	stroke-dashoffset: 20%;
        } 
        to {	
        	stroke-dashoffset: 30%;	
        }
      }
      
      text {
      	alignment-baseline: central;
        text-anchor: middle;
        paint-order: stroke;
        stroke: rgb(32,33,36);
        stroke-width: 15;
      }
      text.price {
      	font-family: 'Bebas Neue';
      	fill: white;
        font-size: 175px;
      }
      
    </style>
  </defs>
  
 
  <text class='price' x='50%' y='50%'>"
  	&TEXT([Price])&
  "</text>"&
  IFS(([Price]<>[Discounted Price]),"
  <g class='stamp'>
  	<rect class='outline dynamic' />
  	<text class='discount' x='50%' y='48.5%'>"
  		&TEXT([Discounted Price])&
  	"</text>
	</g>")&"
</svg>"