一键导入
vector-design-best-practices
Expert guidance on creating, optimizing, and implementing SVG graphics with accessibility and performance in mind
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
Expert guidance on creating, optimizing, and implementing SVG graphics with accessibility and performance in mind
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
Automated Product Hunt screenshots and listing copy for deployed Next.js projects using Playwright MCP
Automated Product Hunt screenshots and listing copy for deployed Next.js projects using Playwright MCP
Battle-tested patterns for optimizing React applications, from component design to bundle optimization
Comprehensive SEO strategies covering technical implementation, on-page optimization, and Core Web Vitals
基于 SOC 职业分类
| name | vector-design-best-practices |
| description | Expert guidance on creating, optimizing, and implementing SVG graphics with accessibility and performance in mind |
You are an expert in SVG design, optimization, and implementation. You help developers create performant, accessible, and maintainable vector graphics for web applications.
When creating SVGs, consider the complexity and use case:
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.
Every SVG should go through optimization before production. Here's the priority order:
# 1. Remove editor metadata and unnecessary groups
# 2. Simplify paths and reduce decimal precision
# 3. Minify attribute values
# 4. Remove invisible elements
Recommended tools:
npx svgo input.svg -o output.svgCommon optimization wins:
SVGs must be accessible. Always include:
<svg role="img" aria-labelledby="title-id desc-id">
<title id="title-id">Brief title describing the image</title>
<desc id="desc-id">Detailed description if needed for complex graphics</desc>
<!-- SVG content -->
</svg>
For decorative SVGs:
<svg aria-hidden="true" focusable="false">
<!-- Decorative content -->
</svg>
Color contrast requirements:
File size budgets:
Implementation strategies:
Inline SVG (best for critical, above-fold graphics):
// React example
export function Logo() {
return (
<svg viewBox="0 0 100 100" className="logo">
<path d="M10,10 L90,90" />
</svg>
);
}
External SVG (best for reused, cached graphics):
<img src="/icons/logo.svg" alt="Company Logo" />
Sprite sheets (best for icon systems):
<svg><use href="/sprites.svg#icon-name" /></svg>
Always use viewBox, not fixed width/height:
<!-- Good -->
<svg viewBox="0 0 100 100" class="icon">
<!-- Avoid -->
<svg width="100" height="100">
Maintain aspect ratio:
.icon {
width: 100%;
height: auto;
max-width: 100px; /* Set reasonable constraints */
}
Responsive SVG patterns:
<!-- Different detail levels for different sizes -->
<svg viewBox="0 0 100 100">
<g class="detail-high"><!-- Complex details --></g>
<g class="detail-low"><!-- Simplified shapes --></g>
</svg>
@media (max-width: 600px) {
.detail-high { display: none; }
}
@media (min-width: 601px) {
.detail-low { display: none; }
}
Option 1: SVGR for component conversion
npm install @svgr/webpack
// next.config.js
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack']
});
return config;
}
};
import Logo from './logo.svg';
<Logo className="w-12 h-12" />
Option 2: Direct inline (best for dynamic styling)
export function Icon({ color = "currentColor", size = 24 }) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke={color}
>
<path d="..." />
</svg>
);
}
Use CSS custom properties for theming:
<svg style="--primary: #3b82f6; --secondary: #8b5cf6;">
<circle fill="var(--primary)" />
<rect fill="var(--secondary)" />
</svg>
Leverage currentColor for automatic theming:
<svg>
<path stroke="currentColor" fill="none" />
</svg>
.icon { color: #3b82f6; }
.icon:hover { color: #1d4ed8; }
CSS animations (performant, simple):
@keyframes rotate {
to { transform: rotate(360deg); }
}
.spinning-icon {
animation: rotate 2s linear infinite;
transform-origin: center;
}
SMIL animations (for complex, coordinated animations):
<circle r="10">
<animate
attributeName="r"
from="10"
to="20"
dur="1s"
repeatCount="indefinite"
/>
</circle>
JavaScript (for interactive, data-driven animations):
// 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 < 1) {
requestAnimationFrame(update);
}
}
requestAnimationFrame(update);
}
Design tools often export verbose, unoptimized SVGs:
<!-- Figma export (before optimization) -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_123_456)">
<path d="M12.0000 2.00000 L12.0001 2.00001..." fill="#000000"/>
</g>
<defs>
<clipPath id="clip0_123_456">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Always optimize: Run through SVGO to remove unnecessary precision, groups, and metadata.
<!-- Avoid -->
<path fill="#3b82f6" />
<!-- Better -->
<path fill="currentColor" />
Without viewBox, SVGs don't scale properly:
<!-- Breaks responsive scaling -->
<svg width="100" height="100">
<!-- Scales beautifully -->
<svg viewBox="0 0 100 100">
<!-- Avoid (can't override easily) -->
<path style="fill: #000; stroke-width: 2px;" />
<!-- Better -->
<path fill="#000" stroke-width="2" />
Sometimes designers create overly complex paths. For production:
For complex custom illustrations, unique icon sets, or brand-specific graphics that would take hours to hand-code, consider AI-powered tools like SVGGenie. These tools can generate production-ready, optimized SVGs from text descriptions, saving significant development time while maintaining code quality.
Good candidates for AI generation:
Stick with hand-coding or design tools for:
Before shipping SVGs to production:
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.