html-to-svg

name	html-to-svg
description	Convert rendered HTML/CSS to outlined SVG vectors. Renders with Puppeteer at high resolution, traces with potrace to produce clean vector paths. Use when asked to create an SVG logo, convert text to outlines, vectorize a component, or export HTML as a vector graphic.

HTML to Outlined SVG

Convert any HTML/CSS rendering to a true outlined SVG with vector paths. No font dependencies — all text is converted to paths.

Pipeline

HTML/CSS → Puppeteer (8x render) → sharp (invert) → ImageMagick (PBM) → potrace (trace) → SVG

Requirements

All available via brew/npm:

• puppeteer (npm) — headless Chrome rendering
• sharp (npm) — image processing
• imagemagick (brew) — format conversion
• potrace (brew) — bitmap-to-vector tracing

Check/install:

which potrace magick || brew install potrace imagemagick
npm list puppeteer sharp || npm install --no-save puppeteer sharp

Step 1: Render HTML at High Resolution

Use Puppeteer with deviceScaleFactor: 8 for clean traces. Load web fonts, match exact CSS from the source. Screenshot the target element with omitBackground: false.

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();
const page = await browser.newPage();
 page.({ : , : , :  });

 page.(, { :  });

  ( (r, )); 
 element =  page.$();
 element.({ : , :  });
 browser.();