SVG Text Extractor

\n \n {extractedText && (\n
Extracted Text:

\n          <button onClick={() => navigator.clipboard.writeText(extractedText)}>\n            Copy to Clipboard\n          </button>\n        </div>\n      )}\n      <a href={import.meta.url.replace(\"esm.town\", \"val.town\")} target=\"_top\">View Source</a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\n\nif (typeof document !== \"undefined\") {\n  client();\n}\n\nexport default async function server(req: Request): Promise<Response> {\n  if (req.method === \"POST\") {\n    const formData = await req.formData();\n    const svgFile = formData.get(\"svgFile\") as File;\n    \n    if (!svgFile || !svgFile.name.endsWith('.svg')) {\n      return Response.json({ error: \"Please upload a valid SVG file\" }, { status: 400 });\n    }\n\n    const svgContent = await svgFile.text();\n    const dom = new JSDOM(svgContent, { contentType: \"image/svg+xml\" });\n    const svgDoc = dom.window.document;\n    const textElements = svgDoc.getElementsByTagName(\"text\");\n    const extractedText = Array.from(textElements).map(el => el.textContent).join(\"\\n\");\n\n    return Response.json({ text: extractedText });\n  }\n\n  return new Response(`\n    <!DOCTYPE html>\n    <html lang=\"en\">\n      <head>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <title>SVG Text Extractor</title>\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { \"Content-Type\": \"text/html\" },\n  });\n}\n\nconst css = `\n  body {\n    font-family: Arial, sans-serif;\n    line-height: 1.6;\n    margin: 0;\n    padding: 20px;\n    background-color: #f4f4f4;\n  }\n  .container {\n    max-width: 600px;\n    margin: 0 auto;\n    background-color: #fff;\n    padding: 20px;\n    border-radius: 5px;\n    box-shadow: 0 0 10px rgba(0,0,0,0.1);\n  }\n  h1 {\n    color: #333;\n  }\n  form {\n    margin-bottom: 20px;\n  }\n  input[type=\"file\"] {\n    margin-right: 10px;\n  }\n  button {\n    background-color: #4CAF50;\n    color: white;\n    padding: 10px 15px;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n  }\n  button:hover {\n    background-color: #45a049;\n  }\n  .result {\n    margin-top: 20px;\n  }\n  textarea {\n    width: 100%;\n    height: 100px;\n    margin-bottom: 10px;\n  }\n  a {\n    display: inline-block;\n    margin-top: 20px;\n    color: #4CAF50;\n    text-decoration: none;\n  }\n  a:hover {\n    text-decoration: underline;\n  }\n`;","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/SvgToText/code/main.tsx","extension","actionData","errors"]
</article></body></html>