SkillsAdd

pymodel/designer-skill · Archived

raster-logo-svg

Wrap raster logos (webp, png, jpg) in self-contained SVG files via base64 embedding for pixel-perfect matches.

First seen Jun 28, 2026

Installation

$ npx skills add pymodel/designer-skill --skill raster-logo-svg
View on skills.sh ↗ GitHub repository ↗

Summary

  • Wrap raster logos (webp, png, jpg) in self-contained SVG files via base64 embedding for pixel-perfect matches.
  • Use when creating logo SVGs, converting webp/png to svg, fixing hand-drawn logos that do not match the source, or preparing plugin/README logo assets without a vector source file.

Stronger alternatives

This repository is archived — consider an actively maintained alternative.

designer-skill Same source · more installs
pymodel/designer-skill

Use for UI design, implementation, redesign, visual review, accessibility, responsive behavior,…

12 installs
release Same source
pymodel/designer-skill

Release designer-skill-mcp to npm with a git tag and GitHub release. Use when the user asks to …

3 installs
qgis-impl-raster-analysis Similar · more installs
impertio-studio/qgis-claude-skill-package

Use when performing raster analysis: map algebra, terrain analysis, raster classification, or D…

27 installs
react Same author
pymodel/react-frontend-skills

Current React 19.2 guidance for concurrent rendering, Server Components, Actions, effects, Reac…

10 installs

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-diagnostics Same topic
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from pymodel/designer-skill.

npx skills add pymodel/designer-skill
designer-skill 12 release 3

Browse all from pymodel/designer-skill

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 29
License LICENSE
Default branch main
Open issues 1
Status Archived

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,407 B
  • docs SUMMARY.md 313 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 6 installs

SKILL.md

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:
<img src="docs/logo.webp" alt="project-name" width="580" />

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:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 W H" role="img" aria-label="…">
  <image width="W" height="H" href="data:image/webp;base64,…"/>
</svg>
  • 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 <img src="logo.svg">):

<image href="logo.webp" width="1163" height="350"/>

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.