一键在 Manus 中运行任何 Skill

html-to-svg

星标1

分支0

更新时间2026年3月4日 21:41

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.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

JDerekLomas

JDerekLomas/claude-code-skills

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

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();
await page.setViewport({ width: 800, height: 200, deviceScaleFactor: 8 });

await page.setContent(`
  <html>
  <head>
    <link href="https://fonts.googleapis.com/css2?family=YOUR+FONT&display=swap" rel="stylesheet">
    <style>
      * { margin: 0; padding: 0; }
      body { background: black; display: flex; align-items: center; height: 100vh; }
      /* Match exact CSS from source */
    </style>
  </head>
  <body>
    <!-- Exact HTML from source -->
  </body>
  </html>
`, { waitUntil: 'networkidle0' });

await new Promise(r => setTimeout(r, 500)); // wait for fonts
const element = await page.$('.target-element');
await element.screenshot({ path: '/tmp/hires.png', omitBackground: false });
await browser.close();

Key points:

deviceScaleFactor: 8 gives enough resolution for clean vector traces
waitUntil: 'networkidle0' ensures web fonts are loaded
Add a 500ms delay after content load for font rendering
Use omitBackground: false to capture the background color
Screenshot the specific element, not the full page

Step 2: Invert for Tracing

Potrace traces dark regions. For white-on-dark designs, invert first:

const sharp = require('sharp');
await sharp('/tmp/hires.png')
  .negate({ alpha: false })
  .toFile('/tmp/inverted.png');

Step 3: Convert to PBM and Trace

magick /tmp/inverted.png -threshold 50% /tmp/trace.pbm
potrace /tmp/trace.pbm -s -o /path/to/output.svg --tight

Flags:

-s — SVG output
--tight — crop to content bounds
-t N — despeckle threshold (default 2, increase for noisy images)
-a N — corner smoothing (default 1.0, decrease for sharper corners)

Step 4: Fix Colors

Potrace outputs black paths on transparent. For white-on-dark:

Remove the XML doctype and metadata
Add a background <rect> with your dark color
Change fill="#000000" to fill="#ffffff" on the path group

The SVG structure from potrace:

<svg viewBox="...">
  <rect width="..." height="..." fill="#1a1a1a"/>  <!-- add this -->
  <g transform="..." fill="#ffffff" stroke="none">  <!-- change fill -->
    <path d="..."/>
    <!-- vector paths -->
  </g>
</svg>

Tips

Match the source exactly: Copy HTML and CSS verbatim from the source component. Don't approximate — use the same font family, weight, size, letter-spacing, gap, etc.
Verify with a PNG first: Before tracing, render at 1x and compare side-by-side with the original to confirm it matches.
Variable fonts: Google Fonts often serves variable fonts. A single woff2 file covers multiple weights — no need to download separate files.
High contrast only: Potrace works best on high-contrast images (white on black or vice versa). For complex multi-color designs, trace each color layer separately.
Circle quality: Geometric shapes like circles trace well at 8x. If circles look faceted, increase to deviceScaleFactor: 10 or 12.
Clean up: The script files (make-logo-svg.mjs, etc.) are throwaway. Delete after generating the SVG.

同仓库更多 Skills

同仓库

codevibing

JDerekLomas/claude-code-skills

Share to codevibing.com - the social network for Claude Code users. Zero friction posting, heartbeats, friends.

2026-05-111

visual-compare

JDerekLomas/claude-code-skills

Visual comparison of a reference app against a replica build. Screenshots both via Chrome DevTools, uses Claude vision to identify differences, generates gap reports. Use when asked to compare, audit visuals, check replication fidelity, or run a visual diff.

2026-03-041

card-deck-creation

JDerekLomas/claude-code-skills

Create themed card decks with AI-generated artwork, Puppeteer rendering, and web deployment. Use when asked to make a card deck, playing cards, tarot deck, or similar card-based content.

2026-02-111

codevibing

JDerekLomas/claude-code-skills

Share to codevibing.com - the social network for Claude Code users. Zero friction posting, heartbeats, friends.

2026-02-111

daily-sourcelibrary

JDerekLomas/claude-code-skills

Batch OCR and translation for Source Library using Gemini Batch API (50% cheaper). Process books from the roadmap queue.

2026-02-111

input

JDerekLomas/claude-code-skills

Human-in-the-loop feedback tools for reviewing AI output. Use when asked to review a site, get design feedback, check generated images, or review AI content. Commands include /input check (see feedback), /input apply (apply edits), /input clear (reset), and /input page setup (add widget to project).

2026-02-111

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();
await page.setViewport({ width: 800, height: 200, deviceScaleFactor: 8 });

await page.setContent(`
  <html>
  <head>
    <link href="https://fonts.googleapis.com/css2?family=YOUR+FONT&display=swap" rel="stylesheet">
    <style>
      * { margin: 0; padding: 0; }
      body { background: black; display: flex; align-items: center; height: 100vh; }
      /* Match exact CSS from source */
    </style>
  </head>
  <body>
    <!-- Exact HTML from source -->
  </body>
  </html>
`, { waitUntil: 'networkidle0' });

await new Promise(r => setTimeout(r, 500)); // wait for fonts
const element = await page.$('.target-element');
await element.screenshot({ path: '/tmp/hires.png', omitBackground: false });
await browser.close();

Key points:

deviceScaleFactor: 8 gives enough resolution for clean vector traces
waitUntil: 'networkidle0' ensures web fonts are loaded
Add a 500ms delay after content load for font rendering
Use omitBackground: false to capture the background color
Screenshot the specific element, not the full page

Step 2: Invert for Tracing

Potrace traces dark regions. For white-on-dark designs, invert first:

const sharp = require('sharp');
await sharp('/tmp/hires.png')
  .negate({ alpha: false })
  .toFile('/tmp/inverted.png');

Step 3: Convert to PBM and Trace

magick /tmp/inverted.png -threshold 50% /tmp/trace.pbm
potrace /tmp/trace.pbm -s -o /path/to/output.svg --tight

Flags:

-s — SVG output
--tight — crop to content bounds
-t N — despeckle threshold (default 2, increase for noisy images)
-a N — corner smoothing (default 1.0, decrease for sharper corners)

Step 4: Fix Colors

Potrace outputs black paths on transparent. For white-on-dark:

Remove the XML doctype and metadata
Add a background <rect> with your dark color
Change fill="#000000" to fill="#ffffff" on the path group

The SVG structure from potrace:

<svg viewBox="...">
  <rect width="..." height="..." fill="#1a1a1a"/>  <!-- add this -->
  <g transform="..." fill="#ffffff" stroke="none">  <!-- change fill -->
    <path d="..."/>
    <!-- vector paths -->
  </g>
</svg>

Tips

Match the source exactly: Copy HTML and CSS verbatim from the source component. Don't approximate — use the same font family, weight, size, letter-spacing, gap, etc.
Verify with a PNG first: Before tracing, render at 1x and compare side-by-side with the original to confirm it matches.
Variable fonts: Google Fonts often serves variable fonts. A single woff2 file covers multiple weights — no need to download separate files.
High contrast only: Potrace works best on high-contrast images (white on black or vice versa). For complex multi-color designs, trace each color layer separately.
Circle quality: Geometric shapes like circles trace well at 8x. If circles look faceted, increase to deviceScaleFactor: 10 or 12.
Clean up: The script files (make-logo-svg.mjs, etc.) are throwaway. Delete after generating the SVG.