【色変更・プレビュー機能付き】SVGタグをBase64変換してCSSのbackground-imageプロパティ用に変換するツール【Photoshop,Illustrator】

let originalSVG = '';

function updatePreview() {
    let svgInput = document.getElementById("svgInput");
    originalSVG = svgInput.value;
    setSVGBackground(originalSVG);
}

function applyColorChange() {
    let colorPicker = document.getElementById("colorPicker");
    if (originalSVG !== "") {
        let updatedSVG = originalSVG.replace(/(<svg[^>]*>)|(<\/svg>)/gi, (match) => match)
            .replace(/fill="([^"]*)"/gi, `fill="${colorPicker.value}"`)
            .replace(/fill:([^;>]*)/gi, `fill:${colorPicker.value}`);
        setSVGBackground(updatedSVG);
    }
}

function setSVGBackground(svg) {
    let cssOutput = document.getElementById("cssOutput");
    let preview = document.getElementById("preview");
    let encodedSVG = btoa(unescape(encodeURIComponent(svg)));
    cssOutput.value = `background-image: url('data:image/svg+xml;base64,${encodedSVG}');`;
    preview.style.backgroundImage = `url('data:image/svg+xml;base64,${encodedSVG}')`;
}

document.getElementById("colorPicker").addEventListener("input", applyColorChange);