<div style="display: flex; flex-wrap: wrap;">

    <!-- img -->
    <div style="margin: 1em;">
      <img src="img/img-object-embedded.svg">
    </div>

    <!-- object -->
    <div style="margin: 1em;">
      <object data="img/img-object-embedded.svg" type="image/svg+xml">
        <p>SVG is not supported.</p>
      </object>
    </div>

    <!-- embedded -->
    <div style="margin: 1em;">
      <svg width="300px" 
        height="300px" 
        viewBox="0 0 300 300" 
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" 
        version="1.1"
        onload="f()">
        <title>Trial-1</title>
        <desc>Trial work</desc>
        <script type="application/ecmascript"><![CDATA[
          function f(){
            const obj1 = document.getElementById('obj1');
            let xv = 0;
            const timer = window.setInterval(m, 300);

            function m(){
              obj1.setAttribute('transform', 'translate(' + xv++ + ', ' + xv++ + ')');
              if(xv>50){
                clearInterval(timer);
              }
            }
          }
        ]]></script>
        <rect x="0" y="0" width="300" height="300" />
        <rect id="obj1" x="100" y="100" width="100" height="100" style="stroke:red" />
      </svg>
    </div>

  </div>