Twitter X Logo SVG, PNG | New Twitter Icon SVG Code Download X Corp (Elon Musk)

<!DOCTYPE html>
<html>

</div>
        <input type="color" id="colorPicker" class="mt-3">
        <input type="range" class="form-range" min='1' step=".1" max='10' id="svg-change-size">
        <button id="download-button">Download PNG Image</button>
      </div>
      <div class="col-sm-6">
        <div class="code-editor mt-3">
          <pre><code class="language-css" id="code-editor"></code></pre>
          <button id="copy-button">Copy SVG Code </button>
        </div>
      </div>
    </div>
    <pre id="result" class="toast">Code Copied</pre>
  </div>

function updateSvgSize() {
        const newSize = svgChangeSize.val();
        svgIcon.attr('height', newSize + 'em');
      }

svgChangeSize.on('input', updateSvgSize);

colorPicker.on('input', function () {
        var selectedColor = colorPicker.val();
        svgStyleElement.attr('fill', selectedColor);
      });

var observer = new MutationObserver(function (mutationsList, observer) {
        for (var mutation of mutationsList) {
          $("#code-editor").text($("#svg-icon").html());
        }
      });

observer.observe(document.querySelector("#svg-icon"), {
        childList: true, // This option ensures that child element changes are observed
        subtree: true, // This option ensures deep observation of child elements
        attributes: true, // This option ensures that attribute changes are observed
      });

// Show code on initial load
      $("#code-editor").text($("#svg-icon").html());

$("#copy-button").on("click", () => {
        const copyText = $("#code-editor").text();
        navigator.clipboard
          .writeText(copyText)
          .then(() => {
            $("#result").css("display", "block");
            setTimeout(() => {
              $("#result").css("display", "none");
            }, 5000);
          })
          .catch((err) => {
            console.error("Could not copy text: ", err);
          });
      });

// Download SVG as PNG
      $("#download-button").on("click", () => {
        const svgElement = document.querySelector("#svg-icon svg");
        const svgData = new XMLSerializer().serializeToString(svgElement);

const canvas = document.createElement("canvas");
        canvas.width = svgElement.clientWidth;
        canvas.height = svgElement.clientHeight;

const ctx = canvas.getContext("2d");
        const img = new Image();
        img.onload = function () {
          ctx.drawImage(img, 0, 0);
          const pngUrl = canvas.toDataURL("image/png");

const downloadLink = document.createElement("a");
          downloadLink.href = pngUrl;
          downloadLink.download = "icon.png";
          document.body.appendChild(downloadLink);
          downloadLink.click();
          document.body.removeChild(downloadLink);
        };
        img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgData);
      });
    });
  </script>
  <style>
    .container-fluid {
      margin-top: 30px;
    }

.svg-container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 250px;
      background-color: #f5f5f5;
      border: 1px solid #ccc;
      border-radius: 8px;
    }

svg {
      max-height: 100%;
      max-width: 100%;
    }

input[type="color"] {
      margin-top: 10px;
      width: 100px;
      height: 40px;
      border-radius: 8px;
    }

input[type="range"] {
      margin-top: 10px;
      width: 100%;
    }

#download-button,
    #copy-button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin-top: 20px;
    }

#download-button:hover,
    #copy-button:hover {
      background-color: #0056b3;
    }

.code-editor {
      margin-top: -0px !important;
      background-color: #333;
      border: 1px solid #555;
      border-radius: 8px;
      height: 250px;
      color: #e0e0e0;
      font-size: 14px;
      line-height: 1.5;
      padding: 10px;
    }

code {
      display: block;
      white-space: pre;
    }

pre {
      font-family: 'Courier New', Courier, monospace;
      overflow-x: auto;
      margin: 0;
    }

.toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: none;
      padding: 15px;
      background-color: #000;
      color: #fff;
      border-radius: 8px;
      font-size: 16px;
    }
  </style>

</body>

</html>