skills.rest
kozyszoo
kozyszooCOMMUNITY
Explore all skills by this author →
GitHub

svg-to-png

Converts SVG files to PNG images with customizable dimensions and backgrounds.

1|Updated Mar 3, 2026
Search Tags:#png#image generation#conversion#svg#batch processing#icon creation
One-click install
npx skills add https://github.com/kozyszoo/antigravity-handson --skill svg-to-png-kozyszoo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-to-png
Source: https://github.com/kozyszoo/antigravity-handson/tree/main/.claude/skills/svg-to-png
Command: npx skills add https://github.com/kozyszoo/antigravity-handson --skill svg-to-png-kozyszoo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sharp, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the conversion of Scalable Vector Graphics (SVG) files into high-quality PNG images, ensuring precise control over dimensions and appearance.

Core Features & Use Cases

  • High-Quality Conversion: Renders SVGs to PNG using sharp with automatic density calculation for crisp output.
  • Customizable Output: Control dimensions, background color, and leverage advanced CSS features like mix-blend-mode and filters.
  • Batch Processing & Presets: Easily generate multiple PNG sizes for app icons, splash screens, favicons, and social media images using predefined presets.
  • Use Case: Convert a single SVG logo into a full set of app icons for various platforms and resolutions, or generate a social media preview image from an SVG design.

Quick Start

Convert the file 'logo.svg' to 'logo.png' with a width of 1024 pixels.

Frequently Asked Questions about svg-to-png

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert SVG to PNG with specific dimensions?▼

You can convert SVG to PNG with precise control over output dimensions by rendering the vector file using sharp. The process calculates the correct density automatically to ensure the resulting PNG image is crisp and high-quality.

Can I batch convert SVG files to PNG for app icons?▼

Yes, you can batch convert SVG files to PNG for app icons by applying predefined presets. This feature facilitates generating multiple PNG sizes simultaneously, which is ideal for creating full sets of app icons, favicons, and splash screens.

Does sharp support rendering SVG with mix-blend-mode and filters?▼

Yes, sharp supports rendering SVG files that include advanced CSS features like mix-blend-mode and filters. The Skill processes these properties during the SVG to PNG conversion, ensuring the visual effects are maintained in the final image.

How do I set a background color when converting SVG to PNG?▼

You can set a custom background color when converting SVG to PNG to handle transparent areas in the vector graphic. This ensures the output PNG image has the exact solid background appearance required for your specific use case.

What is the best way to generate social media images from SVG?▼

The best way to generate social media images from SVG is by using batch processing with predefined presets. This allows you to quickly export high-quality PNG files tailored to the specific dimensions required by various social media platforms.

Related Skills

Explore More Design & Creative Skills→
projectedanxprojectedanx
1

hyperframes

Generate MP4 and WebM videos from HTML, CSS, and GSAP animations.

Community
Advanced
augustsclaugustscl
2

baoyu-compress-image

Compress images to webp, png, or jpeg with automatic tool selection.

Community
Intermediate
cenconq25cenconq25
39

asset-spec

Generate per-asset spec Markdown files and update the manifest from PRDs and design bible.

Community
Intermediate
akillnessakillness
40

pretext

Measure multiline text height and line layout without DOM reflow.

Community
Intermediate