SVG view in Perspective

Ignition
,
6

This should get you where you want to be
Note this will only work for svgs, not for other img types

[
  {
    "type": "ia.display.iframe",
    "version": 0,
    "props": {},
    "meta": {
      "name": "IFrame"
    },
    "position": {
      "x": -0.5,
      "height": "100%",
      "width": "100%"
    },
    "custom": {},
    "propConfig": {
      "props.src": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "\"C:/Users/victor/Downloads/CAM4_Omega6.svg\""
          },
          "transforms": [
            {
              "code": "\tfrom java.util import Base64 \n\timport os\n\tpath = value\n\tif os.path.exists(path):\t\n\t\tsvgString = system.file.readFileAsString(path)\n\t\tsvgStringWithViewBox = svgString[:4] + ' viewBox=\"0 0 1440 1080\"' + svgString[4:]\n\t\tbase64_string = Base64.getEncoder().encodeToString(svgStringWithViewBox)\n\t\treturn u\"data:text/html;base64,\"+ base64_string",
              "type": "script"
            }
          ]
        }
      }
    }
  }
]

i used the java one as the python one needs bytes(?) idk if that made a difference

	from java.util import Base64 
	import os
	path = value
	if os.path.exists(path):	
		svgString = system.file.readFileAsString(path)
		svgStringWithViewBox = svgString[:4] + ' viewBox="0 0 1440 1080"' + svgString[4:]
		base64_string = Base64.getEncoder().encodeToString(svgStringWithViewBox)
		return u"data:text/html;base64,"+ base64_string

image
image1487×616 48 KB

This method doesnt require you to move the svg somewhere else.
The link to the image inside the svg will never work though. but you can just put an image component underneath the iframe, should work with the scaling now.

Eh i guess its not easy to adjust then, it would be better if you could add in the viewbox right there instead of having to change the string in script, but ahwell it works too.

then something went wrong encoding the svg, converting it to bytes first probably messed up some string utf encoding idk, but my method works fine now, you want to read it in a string first anyways to add in the viewbox.

Also note: datauri's (base64encoded) have a max lenght... this might case issues with bigger files (why i asked why it has so many redunant lines). if that ever happens you'll have to find a way to clean up the svg before encoding it... idk any easy way to do that if you have no control of the generator, so lets hope it never happens for your usecase. might also happen for your image, so dont give it a to high resolution xd

1 Like