SVG to Base64 Converter

✍️ Enter SVG Code

Size: <span id="svgInputCharCount">0</span> Characters</div>
                </div>
                
                <div class="button-group">
                    <div class="checkbox-group">
                        <input type="checkbox" id="autoConvertSvg" checked onchange="autoConvertToggleSvg()">
                        <label for="autoConvertSvg">Auto Convert</label>
                    </div>
                    <button class="btn btn-primary" onclick="convertSvgToBase64()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right-left"><path d="M8 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h1"/><path d="M15 3h1a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-1"/><path d="m8 18 4-4-4-4"/><path d="m16 6-4 4 4 4"/></svg>
                        Convert to Base64
                    </button>
                    <button class="btn btn-secondary" onclick="clearSvgToBase64()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                        Clear
                    </button>
                </div>
            </div>
            
            <div class="output-section">
                <h3>📋 Base64 Output:</h3>
                <div class="textarea-group">
                    <textarea id="base64OutputSvg" class="textarea" placeholder="Base64 string will appear here" readonly>

Size: 0 Characters

SVG preview will appear here

💡 How to Use the SVG to Base64 Converter

1. Paste your SVG XML code into the “Enter SVG Code” field.

2. If “Auto Convert” is checked, the Base64 string and a preview will appear instantly. Otherwise, click “Convert to Base64”.

3. The converted Base64 string will be shown in the output area, along with a live SVG preview.

4. Click “Copy Base64” to copy the string to your clipboard.

5. “Clear” will empty the text areas and remove the preview.