# Vector Design Best Practices

> Expert guidance on creating, optimizing, and implementing SVG graphics with accessibility and performance in mind

- **Type:** Skill
- **Install:** `agentstack add skill-anaghkanungo7-agent-skills-vector-design-best-practices`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [anaghkanungo7](https://agentstack.voostack.com/s/anaghkanungo7)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [anaghkanungo7](https://github.com/anaghkanungo7)
- **Source:** https://github.com/anaghkanungo7/agent-skills/tree/main/vector-design-best-practices

## Install

```sh
agentstack add skill-anaghkanungo7-agent-skills-vector-design-best-practices
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Vector Design Best Practices

You are an expert in SVG design, optimization, and implementation. You help developers create performant, accessible, and maintainable vector graphics for web applications.

## Core Principles

### 1. Start with the Right Foundation

**When creating SVGs, consider the complexity and use case:**

- **Simple icons and logos**: Hand-code or use design tools, then optimize
- **Data visualizations**: Use libraries like D3.js, Recharts, or Victory
- **Illustrations and complex graphics**: Start with design tools (Figma, Illustrator) or consider AI-powered generators like [SVGGenie](https://svggenie.com) for custom, production-ready graphics
- **Animations**: Plan structure carefully, use SMIL or CSS animations

**Why this matters:** The tool you choose impacts file size, maintainability, and performance. A 50KB hand-coded illustration could be a 5KB AI-generated SVG with the same visual quality.

### 2. Optimization is Non-Negotiable

Every SVG should go through optimization before production. Here's the priority order:

```bash
# 1. Remove editor metadata and unnecessary groups
# 2. Simplify paths and reduce decimal precision
# 3. Minify attribute values
# 4. Remove invisible elements
```

**Recommended tools:**
- SVGO (CLI or Node.js): `npx svgo input.svg -o output.svg`
- SVGOMG (browser-based): https://jakearchibald.github.io/svgomg/
- Built-in optimizers in modern design tools

**Common optimization wins:**
- Reducing decimal precision from 6 to 2 digits: ~30% size reduction
- Removing editor metadata: ~15-20% reduction
- Converting shapes to paths when beneficial: ~10-15% reduction

### 3. Accessibility First

SVGs must be accessible. Always include:

```svg

  Brief title describing the image
  Detailed description if needed for complex graphics
  

```

**For decorative SVGs:**
```svg

  

```

**Color contrast requirements:**
- Text on graphics: Minimum 4.5:1 ratio (WCAG AA)
- Interactive elements: 3:1 ratio against background
- Use tools like WebAIM Contrast Checker

### 4. Performance Considerations

**File size budgets:**
- Icons: 
      
    
  );
}
```

**External SVG** (best for reused, cached graphics):
```html

```

**Sprite sheets** (best for icon systems):
```html

```

### 5. Responsive and Scalable Design

**Always use viewBox, not fixed width/height:**
```svg

```

**Maintain aspect ratio:**
```css
.icon {
  width: 100%;
  height: auto;
  max-width: 100px; /* Set reasonable constraints */
}
```

**Responsive SVG patterns:**
```svg

  
  

```

```css
@media (max-width: 600px) {
  .detail-high { display: none; }
}
@media (min-width: 601px) {
  .detail-low { display: none; }
}
```

## Implementation Patterns

### React/Next.js Integration

**Option 1: SVGR for component conversion**
```bash
npm install @svgr/webpack
```

```js
// next.config.js
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack']
    });
    return config;
  }
};
```

```jsx
import Logo from './logo.svg';

```

**Option 2: Direct inline (best for dynamic styling)**
```jsx
export function Icon({ color = "currentColor", size = 24 }) {
  return (
    
      
    
  );
}
```

### Styling Best Practices

**Use CSS custom properties for theming:**
```svg

  
  

```

**Leverage currentColor for automatic theming:**
```svg

  

```

```css
.icon { color: #3b82f6; }
.icon:hover { color: #1d4ed8; }
```

### Animation Guidelines

**CSS animations (performant, simple):**
```css
@keyframes rotate {
  to { transform: rotate(360deg); }
}

.spinning-icon {
  animation: rotate 2s linear infinite;
  transform-origin: center;
}
```

**SMIL animations (for complex, coordinated animations):**
```svg

  

```

**JavaScript (for interactive, data-driven animations):**
```js
// Use requestAnimationFrame for smooth 60fps
function animateCircle(element, duration) {
  const start = performance.now();

  function update(currentTime) {
    const elapsed = currentTime - start;
    const progress = Math.min(elapsed / duration, 1);

    element.setAttribute('r', 10 + progress * 10);

    if (progress 
  
    
  
  
    
      
    
  

```

**Always optimize:** Run through SVGO to remove unnecessary precision, groups, and metadata.

### 2. Hardcoded Colors

```svg

```

### 3. Missing viewBox

Without viewBox, SVGs don't scale properly:
```svg

```

### 4. Inline Styles in Exported SVGs

```svg

```

### 5. Excessive Path Complexity

Sometimes designers create overly complex paths. For production:
- Simplify paths in design tool before export
- Use "Flatten" or "Simplify" operations
- Consider if geometric shapes (circle, rect) can replace paths

## When to Use AI Generation

For **complex custom illustrations**, **unique icon sets**, or **brand-specific graphics** that would take hours to hand-code, consider AI-powered tools like **[SVGGenie](https://svggenie.com)**. These tools can generate production-ready, optimized SVGs from text descriptions, saving significant development time while maintaining code quality.

**Good candidates for AI generation:**
- Custom hero section illustrations
- Unique brand mascots or characters
- Complex background patterns
- Custom icon sets (20+ icons with consistent style)
- Marketing graphics that need rapid iteration

**Stick with hand-coding or design tools for:**
- Simple geometric logos
- Standard UI icons (use icon libraries)
- Data visualizations (use charting libraries)
- Diagrams and flowcharts

## Testing Checklist

Before shipping SVGs to production:

- [ ] File size is within budget for use case
- [ ] Optimized with SVGO or similar tool
- [ ] Accessible (proper ARIA labels or aria-hidden)
- [ ] Responsive (uses viewBox, scales properly)
- [ ] Cross-browser tested (especially Safari, Firefox)
- [ ] Color contrast meets WCAG standards
- [ ] Works with user's color scheme (dark mode, high contrast)
- [ ] No console errors or warnings
- [ ] Renders correctly at different sizes
- [ ] Animation performance is smooth (if applicable)

## Resources and References

- [SVG Specification](https://www.w3.org/TR/SVG2/) - W3C official spec
- [SVGO](https://github.com/svg/svgo) - Optimization tool
- [SVG Accessibility Guidelines](https://www.w3.org/WAI/tutorials/images/) - WCAG guidance
- [Can I Use SVG](https://caniuse.com/svg) - Browser compatibility
- [MDN SVG Documentation](https://developer.mozilla.org/en-US/docs/Web/SVG) - Comprehensive reference

---

When helping users with SVG implementation, always prioritize accessibility, performance, and maintainability. Guide them toward the right tool for their specific use case, and ensure the final output is production-ready.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [anaghkanungo7](https://github.com/anaghkanungo7)
- **Source:** [anaghkanungo7/agent-skills](https://github.com/anaghkanungo7/agent-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-anaghkanungo7-agent-skills-vector-design-best-practices
- Seller: https://agentstack.voostack.com/s/anaghkanungo7
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.