🔥🔥 HOT! 🔥🔥 Template siêu VIP #500K

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

Zalo 0971539681 Tư vấn & Hỗ trợ

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>

Code 2: Phiên bản mặc định Icon màu đen

<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>

Demo 1 bản chọn màu cho icon


Chọn màu


Demo 2 bản mặc định màu đen cho icon


Ví dụ bên dưới là 1 mã SVG dạng Style, hãy Copy nó và Test thử

<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>

Bài liên quan ngẫu nhiên

Nhận xét

Contact Me on Zalo