skills.rest
kaynetik
kaynetikCOMMUNITY
Explore all skills by this author →
Website𝕏@kaynetikGitHub

svg-gen

Generate accessible, optimized SVG artwork for icons and logos.

1|Updated Mar 20, 2026
Search Tags:#branding#accessibility#optimization#svg#vector#icon#logo
One-click install
npx skills add https://github.com/kaynetik/skills --skill svg-gen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-gen
Source: https://github.com/kaynetik/skills/tree/main/svg-gen
Command: npx skills add https://github.com/kaynetik/skills --skill svg-gen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designers and engineers often need consistent, small-footprint vector assets that scale, remain accessible, and integrate cleanly into web and app stacks; this Skill eliminates inconsistent exports, editor noise, and accessibility oversights by prescribing a viewBox-first, grouped, and optimized authoring approach.

Core Features & Use Cases

  • Icon authoring: Grid-aligned, 24x24 default icons with currentColor theming, crisp stroke rules, and optional symbol sprites for reuse.
  • Logo and branding: Concept directions, horizontal/vertical/square lockups, palette classes, prefixed IDs to avoid collisions, and export-ready naming and layout guidance.
  • Optimization & handoff: Remove editor noise, merge paths when sensible, trim decimals, and produce accessible variants (aria-hidden for decorative, role/img plus title/desc for communicative).
  • Use Case: Deliver a set of app icons and brand lockups that work inline, as favicons, and in design handoffs with documented palettes and export commands.

Quick Start

Generate a 24x24 production-ready icon SVG with a deliberate viewBox, fill set to currentColor, file-scoped prefixed IDs, and appropriate accessibility attributes.

Frequently Asked Questions about svg-gen

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

FAQPage Schema
How do I create accessible SVG icons for web interfaces?▼

Accessible SVG icons require viewBox-first layout, grouped markup, and specific attributes like aria-hidden for decorative elements or role/img with title and desc tags for communicative icons to ensure screen reader compatibility.

What's the best way to optimize SVG files for production handoff?▼

Optimizing SVG files for production involves removing editor noise, merging paths when sensible, trimming decimals, and applying file-scoped prefixed IDs to prevent asset collisions during web embedding.

How do I theme SVG logos with currentColor for brand palettes?▼

Theming SVG logos with currentColor involves setting fill attributes to currentColor and applying palette classes, allowing brand lockups to dynamically adapt to parent UI text colors.

Can I generate SVG sprite sheets for reusable UI icon sets?▼

Generating SVG sprite sheets for UI icon sets uses a 24x24 default grid alignment with symbol tags, enabling reliable inline SVG embedding and reuse across web applications.

Why does my SVG artwork have rendering issues when embedded inline?▼

Inline SVG rendering issues often stem from non-prefixed IDs causing asset collisions, unoptimized paths retaining editor noise, or missing viewBox attributes that disrupt scaling.

Does svg-gen support different brand logo lockups and layouts?▼

svg-gen supports generating horizontal, vertical, and square brand logo lockups, providing export-ready naming and layout guidance alongside concept directions for consistent branding assets.

Related Skills

Explore More Design & Creative Skills→
SoufianouassifSoufianouassif

branding-generator

Generate three brand directions with color palettes, typography, and SVG logos.

Community
Advanced
hathbangerhathbanger

brand-architect

Generate SVG logos, color palettes, and typography from a brand brief.

Community
Intermediate
anaghkanungo7anaghkanungo7
1

vector-design-best-practices

Guide developers to create accessible, optimized SVG graphics in React/Next.js projects.

Community
Intermediate
garochee33garochee33
3

imagegen

Generate and edit raster image assets for design and creative workflows.

Community
Advanced