SVG to PNG

A high-fidelity SVG to PNG converter designed as a Claude/OpenCode skill. It supports two rendering engines to ensure the best possible output for any SVG file.

Features

• Dual Engine Support:
  • rsvg (Default): Fast, native rendering using librsvg.
  • playwright: Pixel-perfect rendering using Headless Chromium (supports Emojis, advanced CSS, and JavaScript).
• Batch Processing: Convert entire directories at once.
• Smart Scaling:
  • Zoom scaling (e.g., @2x, @3x).
  • Fixed width or height resizing (aspect ratio preserved).
• Format Control: Support for background transparency or custom background colors.

Installation

1. Clone the repository:

   git clone https://github.com/your-username/svg-to-png.git
   cd svg-to-png

2. Install Dependencies:

   Python Requirements:

   pip install -r requirements.txt
   playwright install chromium

   System Requirements (for rsvg mode):

   • macOS: brew install librsvg
   • Ubuntu: apt-get install librsvg2-bin

Usage

You can use the script directly from the command line:

# Basic conversion
python3 skills/scripts/convert.py input.svg

# High-fidelity mode (fixes Emoji/font issues)
python3 skills/scripts/convert.py input.svg --engine playwright

# Batch convert a folder
python3 skills/scripts/convert.py ./assets -o ./output

# Generate 2x Retina images
python3 skills/scripts/convert.py icon.svg --scale 2.0

Integration as a Skill

This repository is structured to be used as an OpenCode/Claude Skill.

svg-to-png/
├── .claude-plugin/     # Claude plugin 配置
│   ├── marketplace.json
│   └── plugin.json
├── skills/             # 技能定义与脚本
│   ├── SKILL.md        # 技能说明文档
│   └── scripts/
│       └── convert.py  # 转换脚本
├── README.md
└── requirements.txt

• skills/SKILL.md: Contains the skill definition, prompts, and usage instructions for the AI.
• skills/scripts/: Contains the executable logic.

To install this into your AI agent's skill library, copy the skills folder to your skills directory(.claude/skills, or ~/.claude/skills)

Or you can use the following commands in Claude Code:

/plugin marketplace add luosky/svg-to-png
/plugin install svg-to-png@svg-to-png

License

MIT