".SVG" files do not show images when running.

[sebastianjnuwu]

Check for existing issues

• Completed

Describe the bug / provide steps to reproduce it

1. Open an .svg file.
2. Click the run button.
3. Try viewing in the browser of the code.

Environment

Device Information:
WebView Info:
Package Name: com.google.android.webview
Version: 138.0.7204.179

App Info:
Name: Acode
Package Name: com.foxdebug.acode
Version: 1.11.5
Version Code: 963

Device Info:
Android Version: 15
Manufacturer: samsung
Model: SM-A055M
Platform: Android
Cordova Version: 13.0.0

Screen Info:
Width: 385
Height: 854
Color Depth: 24

Additional Info:
Language: pt-BR
User Agent: Mozilla/5.0 (Linux; Android 15; SM-A055M Build/AP3A.240905.015.A2; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/138.0.7204.179 Mobile Safari/537.36

If applicable, add mockups / screenshots regarding your vision

If applicable, attach your Acode.log file to this issue.

No response

[RohitKushvaha01]

@sebastianjnuwu
Svg preview is working normally, maybe something is wrong with your svg

[sebastianjnuwu]

@RohitKushvaha01 Send me your svg and I'll send you a video of what's happening.

[RohitKushvaha01]

@RohitKushvaha01 Send me your svg and I'll send you a video of what's happening.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="360" height="220" viewBox="0 0 360 220" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
  <title id="title">Example Scenic SVG</title>
  <desc id="desc">A gradient sky, stylized mountains, and an animated sun with a drop shadow.</desc>

  <defs>
    <!-- Background gradient -->
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#7fc8ff"/>
      <stop offset="100%" stop-color="#eaf6ff"/>
    </linearGradient>

    <!-- Sun glow -->
    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="6" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <!-- Label badge gradient -->
    <linearGradient id="badge" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#6a5cff"/>
      <stop offset="100%" stop-color="#21d4fd"/>
    </linearGradient>
  </defs>

  <!-- Sky -->
  <rect width="100%" height="100%" fill="url(#sky)"/>

  <!-- Mountains -->
  <path d="M0 180 L80 110 L130 150 L190 95 L260 150 L310 120 L360 170 L360 220 L0 220 Z"
        fill="#7aa17a" opacity="0.9"/>
  <path d="M0 190 L70 140 L120 170 L180 120 L250 170 L320 150 L360 200 L360 220 L0 220 Z"
        fill="#507a50" opacity="0.95"/>

  <!-- Sun -->
  <g filter="url(#glow)">
    <circle id="sun" cx="290" cy="60" r="22" fill="#ffd166">
      <!-- Gentle breathing animation -->
      <animate attributeName="r"
               values="22;26;22"
               dur="4s"
               repeatCount="indefinite"/>
    </circle>
  </g>

  <!-- Ground -->
  <rect y="200" width="100%" height="20" fill="#3b5b3b"/>

  <!-- Badge label -->
  <g transform="translate(14,14)">
    <rect rx="12" ry="12" width="130" height="36" fill="url(#badge)"/>
    <text x="65" y="24" text-anchor="middle" font-family="system-ui, Segoe UI, Roboto, sans-serif"
          font-size="14" fill="white" font-weight="600" letter-spacing=".3">
      SVG Demo
    </text>
  </g>
</svg>

[sebastianjnuwu]

The problem is this:

<?xml version="1.0" encoding="UTF-8"?>

But this is not mandatory.

[sebastianjnuwu]

if (runFile && extension === "svg") {
		try {
			const fs = fsOperation(activeFile.uri);
			const res = await fs.readFile();
			const blob = new Blob([new Uint8Array(res)], {
				type: mimeType.lookup(extension),
			});

			box(filename, `<img src='${URL.createObjectURL(blob)}'>`);
		} catch (err) {
			helpers.error(err);
		}
		return;
	}

[sebastianjnuwu]

Is this enough? @RohitKushvaha01

if (runFile && extension === "svg") {
  try {
    const fs = fsOperation(activeFile.uri);
    const res = await fs.readFile();
    let text = new TextDecoder().decode(res);

    if (!/^<\?xml/.test(text)) {
      text = `<?xml version="1.0" encoding="UTF-8"?>\n` + text;
    }

    const blob = new Blob([text], { type: "image/svg+xml" });
    const url = URL.createObjectURL(blob);

    box(
      filename,
      `<div style="display:flex;justify-content:center;align-items:center;height:100%">
         <img src="${url}" alt="${filename}" style="max-width:100%;max-height:100%">
       </div>`
    );
  } catch (err) {
    helpers.error(err);
  }
  return;
}

[RohitKushvaha01]

Is this enough? @RohitKushvaha01

if (runFile && extension === "svg") {
  try {
    const fs = fsOperation(activeFile.uri);
    const res = await fs.readFile();
    let text = new TextDecoder().decode(res);

    if (!/^<\?xml/.test(text)) {
      text = `<?xml version="1.0" encoding="UTF-8"?>\n` + text;
    }

    const blob = new Blob([text], { type: "image/svg+xml" });
    const url = URL.createObjectURL(blob);

    box(
      filename,
      `<div style="display:flex;justify-content:center;align-items:center;height:100%">
         <img src="${url}" alt="${filename}" style="max-width:100%;max-height:100%">
       </div>`
    );
  } catch (err) {
    helpers.error(err);
  }
  return;
}

I already tested this yesterday, but I am concerned about the encoding, the encoding may change based on the file

[sebastianjnuwu]

Yes, in Android 15 there is now this coolness, in Android 14 it worked perfectly. And if you can, instead of running it in the browser, do the same as the png files. I tried to find their files but I couldn't find them.