svg-cleaner
Clean SVG files for UI usage. Use when asked to remove SVG comments, simplify SVG markup, or make icon color follow CSS via currentColor.
Files1
View on GitHubSKILL.md.claude/skills/svg-cleaner/SKILL.md
GitHubSVG Cleaner
Use this skill when the user wants an SVG cleaned up for application use, especially for icons that should inherit color from CSS.
Arguments:
$ARGUMENTSmay contain one or more SVG file paths, or a short instruction about the target SVGs.- If no arguments are provided, inspect the current task context and ask for the SVG path only if it cannot be inferred safely.
Goals:
- Remove SVG comments such as
<!-- ... -->. - Make icon color follow CSS with
currentColorwhere it is safe to do so. - Preserve rendering unless the user explicitly asks for a more aggressive cleanup.
Workflow:
- Read the SVG file or files first.
- Remove comments and obvious editor noise only when it is safe.
- Inspect how color is applied:
- If the SVG is effectively single-color, convert hardcoded
filland/orstrokecolors tocurrentColor. - Keep
fill="none"andstroke="none"unchanged. - Preserve
url(#...)paints, gradients, masks, clip paths, filters, and other structural features. - Preserve multi-color artwork unless the user explicitly asks to flatten it into a single CSS-controlled color.
- If the SVG is effectively single-color, convert hardcoded
- Prefer the smallest safe change:
- If one shared color is used throughout, replacing repeated hardcoded colors with
currentColoris preferred. - If a root-level
fillorstrokecan safely express the same result, that is acceptable. - Update inline
styleattributes when they are the only place color is defined.
- If one shared color is used throughout, replacing repeated hardcoded colors with
- Keep important SVG behavior intact:
- Preserve
viewBox. - Preserve geometry, transforms,
fill-rule,clip-rule, and opacity-related attributes unless cleanup requires a targeted rewrite.
- Preserve
- After editing, quickly re-read the result and check that no hardcoded color remains on elements that should now inherit from CSS.
Decision rules:
- Treat monochrome icons as good candidates for
currentColor. - Treat logos, illustrations, flags, gradients, and intentionally multi-color assets as not safe for automatic color unification.
- If safety is unclear, make the conservative cleanup only: remove comments and report why color conversion was skipped.
Output:
- Briefly state which SVG files were updated.
- State whether
currentColorconversion was applied or intentionally skipped. - Call out any remaining manual follow-up only if the SVG structure makes safe automation ambiguous.