HTML to SVG Converter

Enter your HTML below. It will be wrapped in a

inside the SVG.

\n \n \n

Outputs

\n\n

\n 1. SVG Code\n \n

\n\n

\n 2. SVG Data URL\n \n

\n\n

\n 3. HTML Image Preview\n

\n HTML Code\n \n

\n\n

\n 4. Markdown Code\n \n

\n \n

\n \n \n */\n}\n\nfunction css() {\n /*\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n line-height: 1.6;\n background-color: #f4f7f9;\n color: #333;\n margin: 0;\n padding: 20px;\n }\n .container {\n max-width: 800px;\n margin: 0 auto;\n background: #fff;\n padding: 20px 30px;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n }\n h1, h2 {\n color: #111;\n border-bottom: 1px solid #eee;\n padding-bottom: 10px;\n margin-top: 0;\n }\n h2 {\n margin-top: 30px;\n }\n textarea {\n width: 100%;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-family: \"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", monospace;\n font-size: 14px;\n box-sizing: border-box;\n resize: vertical;\n }\n textarea[readonly] {\n background-color: #f0f0f0;\n cursor: copy;\n }\n button {\n display: block;\n width: 100%;\n padding: 12px;\n margin-top: 15px;\n font-size: 16px;\n font-weight: bold;\n color: #fff;\n background-color: #007bff;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.2s;\n }\n button:hover {\n background-color: #0056b3;\n }\n .hidden {\n display: none;\n }\n .output-group {\n margin-top: 20px;\n }\n .output-group label {\n display: block;\n font-weight: bold;\n margin-bottom: 8px;\n }\n #outputImageContainer {\n padding: 15px;\n border: 1px dashed #ccc;\n border-radius: 4px;\n margin-bottom: 10px;\n overflow: auto;\n background-color: #f9f9f9;\n }\n */\n}\n\nfunction js() {\n /*\n document.addEventListener(\"DOMContentLoaded\", () => {\n const htmlInput = document.getElementById(\"htmlInput\");\n const generateBtn = document.getElementById(\"generateBtn\");\n const outputContainer = document.getElementById(\"outputContainer\");\n const measurementDiv = document.getElementById(\"measurementDiv\");\n\n const outputSvgCode = document.getElementById(\"outputSvgCode\");\n const outputDataUrl = document.getElementById(\"outputDataUrl\");\n const outputImageContainer = document.getElementById(\"outputImageContainer\");\n const outputImageCode = document.getElementById(\"outputImageCode\");\n const outputMarkdown = document.getElementById(\"outputMarkdown\");\n\n // Pre-fill with example\n htmlInput.value = `\n

✨ HTML in SVG

This is pretty cool!

`.trim();\n\n generateBtn.addEventListener(\"click\", () => {\n const input = htmlInput.value.trim();\n if (!input) {\n alert(\"Please enter some HTML.\");\n return;\n }\n\n // 1. Render HTML in the off-screen div to measure it\n measurementDiv.innerHTML = input;\n\n // Using getBoundingClientRect gives more precise, non-integer values\n const { width, height } = measurementDiv.firstElementChild.getBoundingClientRect();\n measurementDiv.innerHTML = \"\"; // Clean up\n\n if (width === 0 || height === 0) {\n alert(\"Could not determine the size of the HTML content. Make sure it's not empty or display:none.\");\n return;\n }\n\n // We need to escape special characters for the data URL\n const sanitizedInput = input.replace(/\"/g, \"'\").replace(/%/g, \"%25\").replace(/#/g, \"%23\").replace(//g, \"%3E\");\n\n // 2. Construct the SVG string.\n // The content must be wrapped in a div with the xhtml namespace.\n const svgString = ``;\n\n // 3. Create the various output formats\n const svgDataUrl = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgString)))}`;\n const htmlImgTag = ` $\"Generated$ `;\n const markdown = `![Generated Image](${svgDataUrl})`;\n\n // 4. Display the outputs\n outputContainer.classList.remove(\"hidden\");\n\n outputSvgCode.value = svgString;\n outputDataUrl.value = svgDataUrl;\n\n outputImageContainer.innerHTML = htmlImgTag;\n outputImageCode.value = htmlImgTag;\n\n outputMarkdown.value = markdown;\n });\n\n [outputSvgCode, outputDataUrl, outputImageCode, outputMarkdown].forEach(textarea => {\n textarea.addEventListener('click', () => {\n textarea.select();\n document.execCommand('copy');\n });\n });\n });\n */\n}\n\nconst app = new Hono();\napp.get(\"/\", serve(html, \"text/html\"));\napp.get(\"/styles.css\", serve(css, \"text/css\"));\napp.get(\"/main.js\", serve(js, \"text/javascript\"));\n\nexport default app.fetch;","label",[60],"pulls","branches","forks","envVars",{"_167":20,"_169":20},"connections",{"_167":20,"_168":20},"count","unfilledCount","emptyCount",{"_29":152,"_13":60,"_58":59,"_39":-5,"_31":32,"_153":76,"_154":93,"_33":171,"_35":69,"_61":81,"_156":157,"_63":24,"_158":14,"_172":173,"_129":174},["D",1749826654270],"children",[],[60],["D",1749826639524],{"_11":12,"_128":66},{"_11":12,"_124":-5,"_65":66,"_25":64,"_125":126,"_127":24},{"_35":76,"_13":16,"_29":32,"_116":82,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":14,"_123":12},"ctx",{"_47":-5,"_148":212,"_213":214,"_215":216,"_217":24,"_218":24,"_219":24,"_220":93,"_221":-5,"_222":-7,"_223":-7,"_224":20,"_225":24,"_226":24,"_227":-5,"_228":24,"_229":24,"_230":24,"_231":-5},"ENV",{"_183":184,"_185":186,"_187":16,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History