Prepare Svg

Prepare SVG

Use this skill to prepare SVG files so they are easier to reuse in different contexts.

This skill is about preparing the SVG asset itself. It is not responsible for choosing how the SVG is rendered in the application. Developers, agents, and teams may render the prepared SVG with SVGR, inline markup, an image pipeline, framework-specific tooling, or another approach.

Goal

For reusable UI icons, remove presentation details from the SVG file so size and color can be controlled later from code or styles.

Default preparation rules

For simple reusable icons:

1. Remove width and height from the root <svg>
2. Keep the viewBox
3. Replace hardcoded icon colors with currentColor
4. Preserve values like fill="none" or stroke="none" when they are intentional
5. Do not change the geometry of the icon unless the user asks for it

Why these changes matter

Removing root width and height allows the rendered icon to receive size from the consuming code or CSS.

Using currentColor allows the rendered icon to inherit color from the consuming code or CSS.

That means a prepared SVG can later be styled in many ways, for example:

• with CSS classes
• with utility classes such as Tailwind
• with component props
• with framework-specific styling systems

Generic examples

Before:

<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="..." fill="#FAFCFF"/>
</svg>

After:

<svg viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="..." fill="currentColor"/>
</svg>

Possible styling after preparation:

• CSS:
  • width: 8px; height: 8px; color: #0980A7;
• Tailwind example:
  • size-2 text-blue-500

These are only examples of how a prepared SVG may be styled later. Do not treat them as the required rendering approach.

Use judgment

This workflow is best for simple reusable icons.

Be careful with:

• logos
• illustrations
• gradients
• multi-color artwork
• SVGs where some fills or strokes are intentionally different colors

For those cases, do not blindly convert every color to currentColor. Keep the visual meaning unless the user explicitly wants a monochrome reusable icon.

Final checks

Before finishing:

• confirm the SVG still has a correct viewBox
• confirm root width and height are removed when the icon should be size-controlled externally
• confirm reusable icon colors no longer rely on hardcoded values
• confirm intentional none, transparency, or multi-color behavior was not accidentally broken