Skip to content

feat: add a raster-to-SVG tool to the svg-icons skill - #2824

Draft
Snailedlt wants to merge 26 commits into
devicons:masterfrom
Snailedlt:feat/raster-to-svg
Draft

Snailedlt wants to merge 26 commits into
devicons:masterfrom
Snailedlt:feat/raster-to-svg

Conversation

@Snailedlt

Copy link
Copy Markdown
Collaborator

Stacked on #2822: please review only the commits after it (currently one, feat: add a raster-to-SVG tool to the svg-icons skill). I'll rebase once #2822 is merged.

What

.claude/skills/svg-icons/scripts/vectorize.js turns a PNG logo into a multi-colour SVG that versions.js can take:

node vectorize.js logo.png --out logo.svg --palette '#1b2a4a,#ff6b4a,#ffffff'
  • Finds the logo's flat colours, or snaps them to --palette (the brand's real values).
  • Anti-aliased edge pixels go to one of their two nearest colours, so no thin seams in a third colour.
  • Smooths each colour mask (pixel stairs would show as notches in plain/line versions), traces it with potrace, and stacks the layers with a little hidden overlap so no gaps show.
  • Removes the background only where it touches the border, so white details inside the logo stay white fills.
  • Fits to 0 0 128 128, optimizes with the skill's SVGO config.

The skill still says official vectors first and rebuilding simple geometry (circles, bars) by hand over tracing. Tracing is the last resort, and the icon PR has to say the SVG was traced and from which file.

Also: trace.js gets a traceBits() helper, techniques.md documents the limits (gradients become flat bands; very thin lines need --smooth 1–2 or redrawing), and there's a new eval case (vectorize-raster-logo).

Tested

Rendered existing devicon icons to PNG, vectorized them and compared with the source SVG (opaque-pixel IoU / colour match at 256px):

Icon IoU Colour match
firebase 0.996 0.989
gitlab 0.967 0.989
nodejs (wordmark) 0.949 0.955
docker (512px PNG) 0.905 0.658 (thin outlines are lost)

The firebase result also goes through versions.js to clean plain and line versions.

Prepared by Claude (an AI assistant) on behalf of @Snailedlt.

🤖 Generated with Claude Code

Snailedlt and others added 26 commits October 28, 2026 00:16
devicon.json had idris before icinga, so the check-bot's "devicon.json
is not sorted" check fails on every icon PR. Also reformats the moved
entry to the file's usual 4-space indentation (it used tabs).

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
…vicons#2799)

* fix: update Python version to 3.12 and adjust pip install command

* fix: update Python version to 3.12 in workflow files
* feat: add xai icon and metadata to devicon.json

* fix: add missing newline at end of xai-original.svg and correct formatting in devicon.json

* feat: add alternative names for xai icon in devicon.json
…devicons#2783)

Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>
* new icon: gnu (original)

Closes devicons#2661

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: clean up gnu SVGs

Removes no-op attributes left by the export (mix-blend-mode style, zero-width stroke attributes); one-colour logos are now a single path wound for the font's nonzero fill; line versions keep thin parts (like the + in Element Plus) instead of dropping them; postfix-line uses the entry's color.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: Yash <yashsaini18166@gmail.com>
* feat(icon): add Drizzle ORM original icon

* feat(icon): add Drizzle ORM plain icon

* feat(icon): register Drizzle ORM icon

* fix(icon): preserve catalog formatting

* fix: align Drizzle icon metadata with review

* fix: optimize Drizzle SVG path precision

* fix: use Drizzle original as the plain alias

* fix: preserve source SVG path precision

* Update drizzle-original.svg with new SVG design

Replaced the original SVG content with a new design featuring updated paths and colors.

* Add 'original' font to devicon.json

---------

Co-authored-by: Yash <yashsaini18166@gmail.com>
* new icon: plsql (original, plain, line)

Closes devicons#2717

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: clean up plsql SVGs

Removes no-op attributes left by the export (mix-blend-mode style, zero-width stroke attributes); one-colour logos are a single path wound for the font's nonzero fill; line versions keep thin parts instead of dropping them; postfix-line uses the entry's color.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: ungroup paths in plsql originals

Applies the review suggestions from @Yashh56.

Co-authored-by: Yash <141008488+Yashh56@users.noreply.github.com>

* fix: remove export leftovers from plsql originals

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: Yash <141008488+Yashh56@users.noreply.github.com>
Co-authored-by: Yash <yashsaini18166@gmail.com>
…mark, line, line-wordmark) (devicons#2788)

* update icon: firebase (original, original-wordmark, plain, plain-wordmark, line, line-wordmark)

Closes devicons#2204

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: remove sliver artifacts from firebase plain/line versions

Cutting the gaps between colours at an angle left thin slivers and sharp spikes, which showed up in the line versions (seen in the peek screenshots). They're now removed by shrinking the shape slightly and growing it back.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: clean up firebase SVGs

Removes no-op attributes left by the export (mix-blend-mode style, zero-width stroke attributes); line versions keep thin parts instead of dropping them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: ungroup paths in firebase originals

Applies the review suggestions from @Yashh56.

Co-authored-by: Yash <141008488+Yashh56@users.noreply.github.com>

* fix: remove export leftovers from firebase originals

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: Yash <141008488+Yashh56@users.noreply.github.com>
Co-authored-by: Yash <yashsaini18166@gmail.com>
…ine, line-wordmark) (devicons#2791)

* new icon: juce (original, original-wordmark, plain, plain-wordmark, line, line-wordmark)

Closes devicons#2708

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: clean up juce SVGs

Removes no-op attributes left by the export (mix-blend-mode style, zero-width stroke attributes); one-colour logos are now a single path wound for the font's nonzero fill; line versions keep thin parts (like the + in Element Plus) instead of dropping them; postfix-line uses the entry's color.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: ungroup paths and remove export leftovers in juce originals

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
* new icon: nx (original, line)

Closes devicons#2639

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: clean up nx SVGs

Removes no-op attributes left by the export (mix-blend-mode style, zero-width stroke attributes); one-colour logos are a single path wound for the font's nonzero fill; line versions keep thin parts instead of dropping them; postfix-line uses the entry's color.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: add wordmark aliases to nx, whose logo is its wordmark

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: Yash <yashsaini18166@gmail.com>
* docs: replace CONTRIBUTING.md with links to the wiki

The guide moved to the wiki long ago, and the old copy kept going out of
date. CONTRIBUTING.md now only links to the wiki pages, grouped like the
wiki's sidebar. The two sections that weren't in the wiki yet ("Terms" and
"Updating an Icon") get their own wiki pages.

Closes devicons#1329

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* docs: only link to the wiki, which has the overview

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
…mark, line, line-wordmark) (devicons#2790)

* new icon: informatica (original, original-wordmark, plain, plain-wordmark, line, line-wordmark)

Closes devicons#1631

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: remove sliver artifacts from informatica plain/line versions

Cutting the gaps between colours at an angle left thin slivers and sharp spikes, which showed up in the line versions (seen in the peek screenshots). They're now removed by shrinking the shape slightly and growing it back.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: clean up informatica SVGs

Removes no-op attributes left by the export (mix-blend-mode style, zero-width stroke attributes); one-colour logos are now a single path wound for the font's nonzero fill; line versions keep thin parts (like the + in Element Plus) instead of dropping them; postfix-line uses the entry's color.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: ungroup paths and remove export leftovers in informatica originals

* fix: match informatica wordmark symbols to original-wordmark

The plain-wordmark and line-wordmark symbols were scaled down from the
plain/line icons without scaling the arc radii of the rounded corners, which
distorted the diamond. Rebuild them by properly scaling the plain/line
symbols onto the original-wordmark symbol's position, and reuse the
original-wordmark lettering so all three wordmarks line up.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0176z2bCyzHBAnB3V4q2ToTs

* fix: include the Salesforce tagline in the informatica wordmarks

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: clean letters and outlined cloud in informatica plain/line wordmarks

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
…evicons#2813)

* ci: check PR titles with a workflow instead of the semantic-prs app

The Ezard/semantic-prs app parses titles as conventional commits, whose
types are one word, so the configured 'new icon' / 'update icon' types
never match and every icon PR fails 'Semantic PR'. pr_title.yml checks
the same rules (plus the icon formats) with a few lines of github-script,
keeps the check name, and explains the expected format in the job summary.
semantic.yml now only turns the app off.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* ci: address review of the PR title check

- delete semantic.yml (the app gets uninstalled)
- run on ubuntu-latest
- pin github-script to a commit SHA
- show the title as text in the job summary
- drop the history comment

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
… line, line-wordmark ) (devicons#2811)

* feat: add gemini icon set with original and plain variations

* Implement code changes to enhance functionality and improve performance

* Update icons/gemini/gemini-plain.svg

Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>

* Add Gemini icons: plain wordmark and wordmark line SVGs

* Add Gemini line wordmark SVG icon

* Refactor SVG icons for Gemini: Update gemini-line-wordmark.svg and gemini-line.svg to improve structure and styling

* Update icons/gemini/gemini-line-wordmark.svg

Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>

* Update icons/gemini/gemini-plain-wordmark.svg

Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>

* Update icons/gemini/gemini-original-wordmark.svg

Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>

* Update icons/gemini/gemini-line.svg

Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>

---------

Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>
…, line, line-wordmark) (devicons#2785)

* feat: add PostGIS icon (devicons#1689)

* feat: add PostGIS plain icon (devicons#1689)

* feat: register PostGIS icon (devicons#1689)

* fix: preserve detail in PostGIS plain icon

* chore: remove unusable PostGIS plain icon

* feat: register PostGIS original icon

* fix: add PostGIS plain variant metadata

* fix: optimize PostGIS original SVG

* feat: add monochrome PostGIS plain SVG

* fix: clean PostGIS SVG metadata

* fix: preserve PostGIS plain path precision

* Optimized the icon and added a newline

* fix: rebuild postgis icons and add wordmark and line versions

- original: the official brand.svg globe, optimized
- plain: globe silhouette with the coastlines cut in as gaps
- line: the globe's rim and coastlines
- wordmarks: globe + "PostGIS" lettering traced from the official
  postgis-logo-horizontal.png, as in the postgis.net header
- devicon.json: font versions are plain/line(-wordmark); colour from the logo

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: postgis plain as the rim with filled continents

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: postgis plain as the line version with filled continents

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: postgis plain with the continents cut out of the globe

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: postgis plain continents match the line version's coastlines

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Yash <yashsaini18166@gmail.com>
Co-authored-by: Snailedlt <jorgenkalsnes.hagen@gmail.com>
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
…rk, line, line-wordmark) (devicons#2820)

* feat: add new prisma icons (original, original-wordmark, plain, plain-wordmark)

* feat: add new prisma icons (line, line-wordmark) and update existing icons

* Update icons/prisma/prisma-line-wordmark.svg

Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>

* Update icons/prisma/prisma-plain-wordmark.svg

Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>

* Update icons/prisma/prisma-plain.svg

Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>

* Update icons/prisma/prisma-original-wordmark.svg

Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>

* Update icons/prisma/prisma-original.svg

Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>

---------

Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- check_icon: an alias may share a name with a non-font SVG (e.g. Babel);
  flag fill="none" in font versions
- validate: reject extra shapes/groups in plain/line; flag artwork outside the box
- pixdiff: report files missing from either folder
- build: keep group opacity; don't flatten groups with transforms/compositing;
  paper.js cleanup only on paper output, not in optimize.js
- versions: a logo with white parts isn't treated as one-colour
- AGENTS.md holds the guide so any agent can use it; CLAUDE.md imports it

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- check_icon: report null/malformed aliases instead of crashing; reject
  <defs>/<symbol>/<use> in font versions
- prefixIds: also rename ID selectors in <style>
- versions: semi-transparent logos don't take the one-path shortcut
- leaves: warn when group opacity is flattened onto overlapping shapes

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Font versions may only have <svg xmlns viewBox> and one <path d fill>;
anything else is reported, instead of listing what isn't allowed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- leaves: keep shapes by bounds, not signed area (small units, opposite winding)
- versions: one-colour originals come from the raw shapes, not --gap's smoothing
- check/validate: a font path needs path data
- optimize: keep #hex fills (no SVGO colour names)
- render: escape file names in the preview sheet

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
svgo.config.js follows devicon's SVGOMG guide with precision 3 (lower
precision broke icomoon glyphs in devicons#2380), #hex colours, <style> classes
inlined before the element is dropped and raster images left for
validation to catch.

svg-icons optimizes changed files as the last change, then validates and
renders again. optimize.js --check lets the review flag files that would
shrink by over 20% (or 4 KB); smaller savings are noise from other SVGO
versions. The review also asks for peek screenshots of the latest SVGs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
optimize.js --check needed 500 saved bytes, which let small unoptimized
files through (41% on a 1 KB icon). 200 bytes still keeps re-optimized
files out. The drizzle review eval now also expects the review to flag
the unoptimized SVG.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
vectorize.js turns a PNG logo into a multi-colour SVG for versions.js:
it finds the flat colours (or snaps to --palette), gives anti-aliased
edge pixels to one of their two nearest colours, smooths each colour mask
and traces it with potrace, stacks the layers with a few pixels of hidden
overlap so no seams show, removes the background only where it touches
the border (enclosed white parts stay white), then fits to 0 0 128 128
and optimizes.

The skill still prefers official vectors and rebuilding simple geometry;
tracing is the last resort and has to be stated in the PR. Adds a
vectorize-raster-logo eval case.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants