# Prepare Svg

> Prepare and normalize SVG files for reusable UI icon usage. Use this whenever the user wants to import an SVG from Figma or another design source, clean up an SVG icon, make an SVG reusable across different sizes or colors, replace hardcoded SVG dimensions or colors, or standardize SVG assets before developers decide how to render them in code.

- Skill: `ilya-valasiuk/prepare-svg` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add ilya-valasiuk/prepare-svg`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ilya-valasiuk/prepare-svg/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: ilya-valasiuk (https://skillmd.com/u/ilya-valasiuk)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ilya-valasiuk/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
<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
<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