# Create Svg

> Create professional SVG logos, brand identities, icons, wordmarks, and visual marks — multiple concepts, layouts, and color variations. Use when asked to design a logo, brand identity, icon, or visual mark.

- Skill: `jgamaraalv/create-svg` (Agent Skill, multi-file: 8 files)
- Install (CLI): `npx skillmds@latest add jgamaraalv/create-svg`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jgamaraalv/create-svg/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: jgamaraalv (https://skillmd.com/u/jgamaraalv)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jgamaraalv/create-svg

---


# 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.