Raster Logo Svg

raster-logo-svg

Create an SVG wrapper around an existing raster logo so the output is pixel-identical to the source. This is not true vectorization.

Choose the approach

| Need | Do | |------|-----| | Match an existing raster logo exactly | Embed (this skill) | | Crisp at any size, editable paths | Export from Figma/Illustrator, or commission true vector | | Quick monochrome outline | Potrace (usually wrong for brand logos with color/gold/type) | | Hand-redrawn paths | Only if no raster exists and user accepts approximation |

Default to embed when a .webp, .png, or .jpg logo already exists and the user wants .svg.

Workflow

1. Source of truth — keep the raster (e.g. docs/logo.webp). Do not delete it.
2. Generate SVG — run the script from repo root or skill directory:

python3 skills/raster-logo-svg/scripts/embed-logo.py docs/logo.webp -o docs/logo.svg -l "project-name"

Requires ImageMagick (magick identify) for dimensions. Install: brew install imagemagick.

1. README — prefer the raster in GitHub README for reliable rendering:

Use the SVG for plugin manifests, favicons, npm package icons, or anywhere a .svg path is required.

1. Verify — open the SVG locally; it must look identical to the raster. Do not commit temp traces (icon-traced.svg, potrace output, failed hand-drawn attempts).

Output format

The script produces:

• viewBox matches source pixel dimensions from magick identify.
• MIME: image/webp, image/png, or image/jpeg from file extension.
• Self-contained: no external href="logo.webp" (breaks when SVG is copied alone).

Tradeoffs (tell the user when relevant)

• Pros: Perfect visual match, fast, no design source needed.
• Cons: Not true vector; upscaling very large may soften (same as the raster).
• Size: SVG file ≈ base64(raster) + ~200 bytes overhead (~33% larger than raw binary).

Do not

• Hand-draw paths to “recreate” a brand logo when the raster exists — results rarely match.
• Use potrace/ImageMagick trace for full-color wordmarks.
• Replace the canonical raster with only SVG unless the user explicitly drops the raster.
• Embed secrets or sensitive images in public repos without user confirmation.

Optional: external-reference SVG

Only for local tooling that resolves sibling files (not GitHub README ``):

Prefer base64 embed for portable .svg files.

Example (designer-skill)

python3 skills/raster-logo-svg/scripts/embed-logo.py \
  docs/designer-skill-mcp-logo.webp \
  -o docs/designer-skill-mcp-logo.svg \
  -l "designer-skill-mcp"

README uses designer-skill-mcp-logo.webp; plugin/icon paths can use the .svg.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Pythoughts-labs
• Source: Pythoughts-labs/designer-skill
• License: MIT
• Homepage: https://pythinker.com

Install and usage instructions live in the source repository linked above.