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>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
​
<body>
  <div class="container-fluid text-center">
    <div class="row">
      <div class="col-sm-6">
        <div class="svg-container" id='svg-icon'>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1">
            <path
              d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
          </svg>
​
        </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>
​
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
    crossorigin="anonymous"></script>
  <script>
    $(document).ready(function () {
      var svgStyleElement = $('#svg-icon svg path');
      var colorPicker = $('#colorPicker');
      var svgChangeSize = $('#svg-change-size');
      var svgIcon = $('#svg-icon svg');
​
      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>