Đổi mã SVG thành File tùy chọn màu

Chuyển đổi mã SVG một cách dễ dàng với công cụ Chuyển đổi mã SVG Style thành File này. Đơn giản chỉ cần dán mã SVG của bạn, chọn màu fill, và tải về SVG đã được chuyển đổi với màu sắc được chỉ định. Công cụ tự động thêm màu fill động cho đường dẫn đã chọn, giúp bạn tùy chỉnh giao diện của đồ họa SVG của mình. Dễ sử dụng, nhanh chóng và hiệu quả cho các nhà phát triển và thiết kế đang làm việc với đồ họa vector có thể co chênh.

Code 1: Có tùy chọn màu cho Icon

<style>
/*<![CDATA[*/
#convert{font-family:'Arial',sans-serif;background-color:#f4f4f4;padding:20px;text-align:center;max-width:600px;margin:auto;}
#convert textarea{width:100%;padding:10px;margin-bottom:10px;box-sizing:border-box;resize:none}
#convert button{background-color:#4caf50;color:white;padding:10px 15px;border:none;cursor:pointer}
#convert button:hover{background-color:#45a049}
#convert a{text-decoration:none;color:#007bff}
#convert a:hover{text-decoration:underline}
#convert #downloadLink{color:#28a745;margin-top:10px}
#colorPicker{margin:10px 0}
/*]]>*/
</style>
<div id="convert">
  <textarea id="inputSvg" rows="10" cols="50" placeholder="Paste your SVG code here..."></textarea>
  <br />Chọn màu <input type="color" id="colorPicker" value="#000000" />
  <br />
  <button onclick="convertToSvg()">Convert to SVG</button>
  <br />
  <a id="downloadLink" style="display: none;" download="converted.svg">Download Converted SVG</a>
</div>
<script>
  //<![CDATA[
  function convertToSvg() {
    const inputSvg = document.getElementById('inputSvg').value;
    const color = document.getElementById('colorPicker').value;
    const cleanedSvg = inputSvg.replace(/^<svg[^>]*>|<\/svg>$/g, '');
    const svgWithStyle = `<svg xmlns='http://www.w3.org/2000/svg'><defs>
                        <style><![CDATA[
                                path {fill: ${color};}
                            ]]></style>
                    </defs>
                    ${cleanedSvg}
                </svg>`;
    const blob = new Blob([svgWithStyle], {
      type: 'image/svg+xml'
    });
    const downloadLink = document.getElementById('downloadLink');
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.style.display = 'block';
    document.getElementById('inputSvg').value = '';
  }
  //]]>
</script>

<style>
/*<![CDATA[*/
#convert-container{font-family:'Arial',sans-serif;background-color:#f0f0f0;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}
#convert-container textarea{width:80%;padding:10px;margin-bottom:20px;border:1px solid #ccc;border-radius:5px}
#convert-container button{padding:10px;background-color:#4caf50;color:#fff;border:none;border-radius:5px;cursor:pointer}
#convert-container button:hover{background-color:#45a049}
/*]]>*/
</style>
<div id="convert-container">
  <textarea cols="50" id="inputSvgstyle" rows="10" placeholder="Paste your SVG code here..."></textarea>
  <button onclick="saveSvg()">Save as SVG</button>
</div>
<script>
  //<![CDATA[
  function saveSvg() {
    // Lấy giá trị từ textarea
    var svgCode = document.getElementById('inputSvgstyle').value;
    // Tạo một Blob từ mã SVG
    var blob = new Blob([svgCode], {
      type: 'image/svg+xml'
    });
    // Tạo một đường dẫn tới file
    var url = URL.createObjectURL(blob);
    // Tạo một thẻ a để tải file
    var a = document.createElement('a');
    a.href = url;
    a.download = 'output.svg';
    // Simulate a click để tải file
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
  //]]>
</script>

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path>
</svg>