SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillscreate-svg

create-svg

Design & creation

View repository

Updated 10-15 23:31

About this skill

Create SVG

Create professional, scalable SVG logos and visual marks from a brief — multiple concepts, layouts, and color variations.

Core Workflow

Work through these phases in order, reading the matching reference for the depth you need:

  1. Requirements Gathering — collect brand info, design preferences, logo type, style, technical constraints, and number of variations. See references/requirements.md.
  2. Concept Development — develop a primary direction plus alternatives, with design thinking and a base SVG structure. See references/concepts-layouts.md.
  3. Layout Variations — produce horizontal, vertical, square, icon-only, and text-only lockups per concept. See references/concepts-layouts.md.
  4. SVG Generation — write clean, scalable, optimized, accessible SVG code. See references/svg-construction.md.
  5. Presentation — present concepts with rationale, layouts, and color variations. See references/presentation-delivery.md.
  6. File Generation — save each variation with a consistent naming convention. See references/presentation-delivery.md.
  7. Usage Guidelines & Delivery — document usage, clear space, PNG export, web/print specs, and the final package. See references/presentation-delivery.md.

Throughout: choose colors via references/style-color.md, lean on references/examples.md for ready patterns, and iterate per references/process.md.

References

Each file is loaded on demand — read one only when the task needs that depth (progressive disclosure).

  • references/requirements.md — the Phase 1 requirements checklist: brand info, logo types, style guidelines, technical requirements, number of variations · read when starting a logo and gathering what to build.
  • references/concepts-layouts.md — Phase 2–3 concept development (design thinking + base SVG structure) and the five layout lockups · read when developing concepts or producing layout variations.
  • references/svg-construction.md — Phase 4 SVG best practices: semantic code, scalable viewBox, color management, optimization, accessibility · read when writing or optimizing the SVG markup.
  • references/style-color.md — color psychology guide mapping seven color families to meanings, hex values, and industries · read when choosing or justifying a color palette.
  • references/examples.md — ready SVG patterns (wordmark, geometric icon, abstract mark, combination mark) and a full worked example workflow · read when you need a concrete starting template or an end-to-end walkthrough.
  • references/presentation-delivery.md — Phases 5–7 plus deliverables: presentation format, file naming, usage guidelines, clear space, PNG export, web/print specs, file organization · read when presenting, saving files, or documenting usage.
  • references/process.md — the iteration loop and communication style for working with users · read when gathering feedback, refining a concept, or shaping how you talk through choices.