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ừ textareavar svgCode = document.getElementById('inputSvgstyle').value;// Tạo một Blob từ mã SVGvar blob = new Blob([svgCode], {type: 'image/svg+xml'});// Tạo một đường dẫn tới filevar url = URL.createObjectURL(blob);// Tạo một thẻ a để tải filevar a = document.createElement('a');a.href = url;a.download = 'output.svg';// Simulate a click để tải filedocument.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 viết: Đổi mã SVG thành File tùy chọn màu được viết bởi admin trang Giaodien.blog
Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.
Để lại nguồn có nghĩa là bạn tôn trọng tác giả.
Động lực để mình chia sẻ nhiều bài viết hay.