svg size

[elboga81]

Hi There
I am struggling with the svg Settings 
i cant manage to get the sizes right

IF(

  OR(

    ISNOTBLANK([1]), 

    ISNOTBLANK([2]), 

    ISNOTBLANK([3]),

    ISNOTBLANK([4]),

    ISNOTBLANK([5])

  ),

  CONCATENATE(

    "data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='160'>",

 ,

     IF(ISBLANK([1]), "", 

      IF([1] = "L", 

        "<rect x='0' width='160' height='160' fill='%23ff4500' rx='8'/><text x='80' y='80' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='Arial' font-size='80' font-weight='bold'>L</text>",

        IF([1] = "D", 

          "<rect x='0' width='160' height='160' fill='%23ffbf00' rx='8'/><text x='80' y='80' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='Arial' font-size='80' font-weight='bold'>D</text>",

          "<rect x='0' width='160' height='160' fill='%2300b341' rx='8'/><text x='80' y='80' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='Arial' font-size='80' font-weight='bold'>" & [1] & "</text>"

        )

      )

    ),

    IF(ISBLANK([2]), "", 

      IF([2] = "L", 

        "<rect x='160' width='160' height='160' fill='%23ff4500' rx='8'/><text x='240' y='80' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='Arial' font-size='80' font-weight='bold'>L</text>",

        IF([2] = "D", 

          "<rect x='160' width='160' height='160' fill='%23ffbf00' rx='8'/><text x='240' y='80' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='Arial' font-size='80' font-weight='bold'>D</text>",

          "<rect x='160' width='160' height='160' fill='%2300b341' rx='8'/><text x='240' y='80' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='Arial' font-size='80' font-weight='bold'>" & [2] & "</text>"

        )

      )

    ),

    IF(ISBLANK([3]), "", 

      IF([3] = "L", 

        "<rect x='320' width='160' height='160' fill='%23ff4500' rx='8'/><text x='400' y='80' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='Arial' font-size='80' font-weight='bold'>L</text>",

        IF([3] = "D", 

          "<rect x='320' width='160' height='160' fill='%23ffbf00' rx='8'/><text x='400' y='80' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='Arial' font-size='80' font-weight='bold'>D</text>",

          "<rect x='320' width='160' height='160' fill='%2300b341' rx='8'/><text x='400' y='80' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='Arial' font-size='80' font-weight='bold'>" & [3] & "</text>"

        )

      )

    ),

   IF(ISBLANK([4]), "", 

  IF([4] = "L", 

    "<rect x='480' width='160' height='160' fill='%23ff4500' rx='8'/><text x='560' y='80' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='Arial' font-size='80' font-weight='bold'>L</text>",

    IF([4] = "D", 

      "<rect x='480' width='160' height='160' fill='%23ffbf00' rx='8'/><text x='560' y='80' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='Arial' font-size='80' font-weight='bold'>D</text>",

      "<rect x='480' width='160' height='160' fill='%2300b341' rx='8'/><text x='560' y='80' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='Arial' font-size='80' font-weight='bold'>" & [4] & "</text>"

    )

  )

),

IF(ISBLANK([5]), "", 

  IF([5] = "L", 

    "<rect x='640' width='160' height='160' fill='%23ff4500' rx='8'/><text x='720' y='80' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='Arial' font-size='80' font-weight='bold'>L</text>",

    IF([5] = "D", 

      "<rect x='640' width='160' height='160' fill='%23ffbf00' rx='8'/><text x='720' y='80' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='Arial' font-size='80' font-weight='bold'>D</text>",

      "<rect x='640' width='160' height='160' fill='%2300b341' rx='8'/><text x='720' y='80' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='Arial' font-size='80' font-weight='bold'>" & [5] & "</text>"

    )

  )

)

,

    "</svg>"

  ),

  ""

)

I have 5 columns but for some reason everytime i add a new column to display, the icons become smaller...
I just dont seem to master the sizes

This svg works but i need the icons twice the size

Thank you

[Kirk_Masden]

I'm not sure if I can help but I'm interested in the issue.  First of all, can you tell us how you are displaying the images in your app?  Are the SVG images being displayed via an image column?  If so, the limitations of the image column might be your problem.  Image columns are designed for landscape-type images (wider than tall).  If you put a tall image in an image column, it looks small because it is made to fit into the dimensions of the image column.  A way around this is to display an image via a long text html column.  You need to be careful to limit the width to 350 pixels or so (pretty narrow) to make sure the images fit inside typical mobile devices, but it should work.  I haven't tried is with SVG but I would imagine that it's possible.

Here's a post of mine that might be relevant:
https://www.googlecloudcommunity.com/gc/Tips-Tricks/No-server-for-media-no-problem/m-p/695452

As I have written at the top of the post, what I wrote about hosting images on Google drive is now obsolete but the content about displaying portrait images (taller than wide) is still relevant, I think.