Having an SVG file in this format:
<svg id="test" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 1435 1084">
<style type="text/css">
svg{background:red}
</style>
<script type="text/javascript">//<![CDATA[
const x=1;
const y=1;
if (x===y){
document.getElementById('test').append('<style type="text/css">svg{background:blue}</style>');
}else{}
//]]></script>
</svg>
The objective is to prevent a specific script from running when the SVG is utilized as an image object, while allowing it to function normally when embedded as an object or within an iFrame, or viewed independently in a browser. The portion of code that should be disabled when used as an image contains a <style> tag.
Although the CDATA tag seemed like a suitable solution for this issue, it did not yield the desired outcome.
This has led to some confusion. I have examined SVGs with CDATA tags that executed correctly, yet when attempting the same approach, the JavaScript does not execute.
Additionally, I am interested in any suggestions for creating an SVG that can trigger different JavaScript depending on whether it's viewed alone, inline, as an object, within an iFrame, or as an image.
I have experimented with various approaches and have identified the CDATA tag as the most promising solution.
Edit: A code snippet has been included. In theory, the SVG background should appear blue in this instance, but it renders as red.
<svg id="test" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 1435 1084">
<style type="text/css">
svg{background:red}
</style>
<script type="text/javascript">//<![CDATA[
const x=1;
const y=1;
if (x===y){
document.getElementById('test').append('<style type="text/css">svg{background:blue} </ style>');
} else { }
// ]]> </script>
</svg>