🎨 HTML to SVG Converter ✂️

A lightning-fast, zero-dependency web app that converts HTML/CSS snippets into perfectly sized, transparent SVG graphics. Runs entirely in your browser. Perfect for creating custom badges, logos, and UI components!

👉 Click here to test the app! 👈

📄 Example snippet to test

<div style="background: #1e1e1e; color: white; border: 3px solid #9fa9a3; border-radius: 15px; padding: 10px 20px; display: inline-flex; align-items: center; gap: 15px; font-family: Arial, sans-serif;">
  <div style="width: 30px; height: 30px; border: 2px solid #4ade80; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">AI</div>
  <div style="font-size: 15px; line-height: 1.2;"><b>Crafted</b><br>with AI</div>
</div>

---

🚀 Features

• Zero Dependencies: No React, no Tailwind, no Node.js required. Just pure, lightweight Vanilla JavaScript, HTML5, and CSS3.
• 100% Client-Side: Everything happens locally in your browser. No server calls, no data tracking, instant rendering.
• Sub-Pixel Accuracy: Automatically measures your HTML content using getBoundingClientRect() to crop the SVG perfectly around your design.
• Smart Auto-Correction: Uses XMLSerializer to automatically fix unclosed tags (like <br>) converting standard HTML into strict, SVG-compatible XHTML.
• Transparency Support: Renders a checkerboard background in the preview to easily check your transparent areas.
• Modern UI: Fast, responsive, and adaptive Dark/Light mode interface based on your system preferences.

🛠️ How it works

1. Paste the HTML code into the left panel.
2. The app injects your code into an invisible, isolated DOM container to measure its exact width and height.
3. It sanitizes the code using XMLSerializer, wrapping it into a valid XHTML format.
4. It embeds the XHTML into an SVG <foreignObject> tag with matching dimensions.
5. The browser renders the SVG in real-time in the preview panel. Click Download to get your .svg file!

🏆 What makes it special?

• Instant Offline Access: Since it doesn't require a backend, you can literally save the index.html file on your desktop and use it offline forever.
• No Build Step: You don't need Webpack, Vite, or npm to run or modify this project. Just open the code in any text editor.

💡 Why use this tool?

• GitHub Readmes: Easily create custom, beautifully styled badges or banners (using HTML/CSS) and convert them to SVGs to embed in your repositories.
• UI Mockups: Convert web components directly into vector graphics for presentations or documentation.
• Logo Creation: Prototype quick logos using web fonts and CSS shapes, then export them cleanly.

⚡ Getting Started

Online

Simply visit the Live Demo hosted on GitHub Pages.

Local Installation

Running this tool locally is ridiculously easy:

1. Clone this repository or simply download the index.html file.
2. Double-click index.html to open it in your favorite browser.
3. Done.