Claude Code के साथ SVG मैनिपुलेशन की व्यावहारिक गाइड

SVG शुरू करने से पहले क्या तय करें

SVG icons, logos, diagrams और छोटे data visuals के लिए अच्छा format है। यह scale होने पर blur नहीं होता और CSS से color inherit कर सकता है। Claude Code repository पढ़ सकता है, files edit कर सकता है और checks चला सकता है, इसलिए raw SVG को maintainable UI component में बदलने के लिए यह उपयोगी है।

समस्या तब आती है जब prompt बहुत छोटा हो। “एक SVG icon बना दो” से दिखने में सही, लेकिन production में कमजोर output मिल सकता है: viewBox नहीं, hard-coded colors, accessible name नहीं, reduced motion का ध्यान नहीं, या SVGO optimization के बाद scaling टूट जाना। Masa ने ClaudeCodeLab की एक छोटी UI test में यही देखा। icon सुंदर था, लेकिन text button, icon-only button और dark mode में reuse करने के लिए बार-बार manual change चाहिए था।

इस लेख में हम सुरक्षित pattern बनाएंगे: viewBox तय करना, currentColor से theming, decorative और meaningful icons को अलग करना, हल्की animation जोड़ना, SVGO से optimization करना, और layout/security mistakes से बचना। Official references के लिए MDN <svg>, MDN viewBox, MDN ARIA img role, MDN aria-hidden, SVGO docs और Claude Code docs देखें।

पूरा workflow

SVG सिर्फ drawing नहीं है। यह design system, accessibility, performance, security और code review से जुड़ा होता है।

flowchart LR
  A["Purpose तय करें"] --> B["viewBox fix करें"]
  B --> C["currentColor उपयोग करें"]
  C --> D["aria-label या aria-hidden चुनें"]
  D --> E["HTML या React में लगाएं"]
  E --> F["SVGO से optimize करें"]
  F --> G["Layout और safety review करें"]

Claude Code को साफ prompt दें: “viewBox="0 0 24 24" वाला SVG icon component बनाओ, stroke="currentColor" रखो, decorative icons में aria-hidden लगाओ, standalone meaningful icons में role="img" और title लगाओ, और ऐसी SVGO config जोड़ो जो viewBox न हटाए।”

inline SVG और viewBox

inline SVG का अर्थ है कि <svg> markup सीधे HTML या JSX में लिखा जाता है। यह तब अच्छा है जब icon को theme color, hover state, React props या light animation के साथ बदलना हो।

viewBox SVG का internal coordinate system है। MDN के अनुसार यह min-x min-y width height चार numbers से बनता है। आसान भाषा में, viewBox="0 0 24 24" का मतलब है कि icon 24 by 24 grid पर बना है। display size 16px, 24px या 48px हो सकता है, लेकिन drawing grid वही रहती है।

<button class="icon-button" type="button" aria-label="खोजें">
  <svg
    class="icon"
    viewBox="0 0 24 24"
    width="24"
    height="24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
    focusable="false"
  >
    <circle cx="11" cy="11" r="7" />
    <path d="M20 20l-4.5-4.5" />
  </svg>
</button>

यहां button के पास accessible name है, इसलिए SVG decorative है। अगर button में केवल icon दिख रहा हो, तो name button पर दें। अगर SVG खुद एक meaningful image है, तो SVG को accessible name दें।

currentColor और CSS variables से theme

SVG के अंदर fill="#111827" जैसी fixed color रखने से future maintenance कठिन हो जाती है। Dark mode, hover या brand color बदलने पर हर SVG edit करना पड़ेगा। UI icons को CSS color inherit करने देना बेहतर है।

:root {
  --color-text: #172033;
  --color-muted: #667085;
  --color-accent: #0f766e;
  --color-danger: #b42318;
}

[data-theme="dark"] {
  --color-text: #eef2f7;
  --color-muted: #a9b4c3;
  --color-accent: #2dd4bf;
  --color-danger: #f97066;
}

.icon {
  color: var(--icon-color, var(--color-text));
  display: inline-block;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: 0 0 auto;
}

.icon-button {
  color: var(--color-muted);
}

.icon-button:hover {
  color: var(--color-accent);
}

.icon-button[data-variant="danger"] {
  --icon-color: var(--color-danger);
}

<button class="icon-button" type="button" aria-label="हटाएं" data-variant="danger">
  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
    <path d="M4 7h16" />
    <path d="M10 11v6" />
    <path d="M14 11v6" />
    <path d="M6 7l1 14h10l1-14" />
    <path d="M9 7V4h6v3" />
  </svg>
</button>

Refactor के बाद Claude Code से rg "fill=\"#|stroke=\"#" चलवाएं। Logo में fixed brand color रह सकता है, लेकिन normal UI icons में currentColor बेहतर default है।

React में accessible icon component

Meaningful SVG को accessible name चाहिए। Decorative SVG को accessibility tree से छिपाना चाहिए। MDN embedded SVG को image की तरह expose करने के लिए role="img" और label बताता है, जबकि decorative content के लिए aria-hidden="true" सही हो सकता है।

import { useId } from "react";

type IconName = "search" | "check" | "close";

const paths: Record<IconName, string> = {
  search: "M10.5 18a7.5 7.5 0 1 1 5.3-12.8 7.5 7.5 0 0 1-5.3 12.8Zm5.3-2.2L21 21",
  check: "M5 12.5l4.5 4.5L19 7",
  close: "M6 6l12 12M18 6L6 18",
};

type SvgIconProps = {
  name: IconName;
  title?: string;
  decorative?: boolean;
  size?: number;
  className?: string;
};

export function SvgIcon({
  name,
  title,
  decorative = false,
  size = 24,
  className,
}: SvgIconProps) {
  const titleId = useId();
  const isMeaningful = !decorative && Boolean(title);

  return (
    <svg
      className={className}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      role={isMeaningful ? "img" : undefined}
      aria-labelledby={isMeaningful ? titleId : undefined}
      aria-hidden={decorative ? true : undefined}
      focusable="false"
    >
      {isMeaningful ? <title id={titleId}>{title}</title> : null}
      <path d={paths[name]} />
    </svg>
  );
}

<button type="button">
  <SvgIcon name="check" decorative />
  सेव करें
</button>

<SvgIcon name="search" title="खोज" />

पहले example में button text action बताता है, इसलिए icon decorative है। दूसरे में icon खुद meaning देता है। Focusable element पर aria-hidden="true" न लगाएं।

हल्की animation

SVG animation loading, success या chart highlight जैसे छोटे संकेतों के लिए अच्छी है। Layout stable रखें और prefers-reduced-motion का सम्मान करें।

<svg class="spinner" viewBox="0 0 48 48" width="48" height="48" role="img" aria-label="लोड हो रहा है">
  <circle class="spinner-track" cx="24" cy="24" r="20" />
  <circle class="spinner-head" cx="24" cy="24" r="20" />
</svg>

.spinner {
  color: #0f766e;
  animation: spin 900ms linear infinite;
}

.spinner-track,
.spinner-head {
  fill: none;
  stroke-width: 4;
}

.spinner-track {
  stroke: #d0d5dd;
}

.spinner-head {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-dasharray: 80 45;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

Motion patterns को आगे बढ़ाना हो तो Claude Code CSS animation advanced देखें। SVG shape रखे, CSS state और motion रखे।

छोटे SVG charts

SVG से छोटा chart बनाया जा सकता है। अगर label external data से आ रहा है, तो उसे <text> में डालने से पहले XML escape करें।

type BarDatum = {
  label: string;
  value: number;
};

function escapeXml(value: string): string {
  return value.replace(/[<>&"']/g, (char) => {
    const entities: Record<string, string> = {
      "<": "&lt;",
      ">": "&gt;",
      "&": "&amp;",
      '"': "&quot;",
      "'": "&apos;",
    };
    return entities[char];
  });
}

export function createMiniBarChart(data: BarDatum[]): string {
  const width = 420;
  const height = 180;
  const padding = 32;
  const gap = 12;
  const maxValue = Math.max(...data.map((item) => item.value), 1);
  const barWidth = (width - padding * 2 - gap * (data.length - 1)) / data.length;

  const bars = data
    .map((item, index) => {
      const barHeight = (item.value / maxValue) * 100;
      const x = padding + index * (barWidth + gap);
      const y = height - padding - barHeight;

      return `
        <rect x="${x}" y="${y}" width="${barWidth}" height="${barHeight}" rx="6" fill="currentColor" />
        <text x="${x + barWidth / 2}" y="${height - 10}" text-anchor="middle" font-size="12">
          ${escapeXml(item.label)}
        </text>`;
    })
    .join("");

  return `<svg viewBox="0 0 ${width} ${height}" role="img" aria-label="मासिक पूछताछ" xmlns="http://www.w3.org/2000/svg">
    <g color="#0f766e">${bars}</g>
  </svg>`;
}

यह article diagrams, small dashboard और landing page proof के लिए ठीक है। Axis, legend, tooltip, zoom या large data चाहिए तो chart library चुनें।

SVGO से optimization

Design tools से आए SVG में metadata, editor attributes और unnecessary decimals हो सकते हैं। SVGO इन्हें साफ करता है। शुरुआत में conservative config रखें और diff check करें।

// svgo.config.mjs
export default {
  multipass: true,
  plugins: [
    {
      name: "preset-default",
      params: {
        overrides: {
          cleanupIds: false
        }
      }
    },
    "removeDimensions",
    {
      name: "removeAttrs",
      params: {
        attrs: ["data-name"]
      }
    }
  ]
};

{
  "scripts": {
    "svg:optimize": "svgo --config svgo.config.mjs --folder src/assets/icons"
  },
  "devDependencies": {
    "svgo": "^4.0.0"
  }
}

SVGO docs में preset-default, removeDimensions और plugins समझाए गए हैं। removeViewBox से सावधान रहें, क्योंकि यह responsive scaling रोक सकता है और clipping ला सकता है।

Use cases और pitfalls

तीन से अधिक practical use cases हैं। पहला, product UI icon system: search, close, save, warning, external link। दूसरा, technical article diagram, ताकि page केवल text wall न लगे। तीसरा, landing page या course sales page में pricing और CTA के पास visual explanation। चौथा, छोटे admin charts जैसे article completion, CTA clicks और inquiries।

गलती	असर	समाधान
viewBox हटाना	icon clip या scaling fail	SVGO में preserve करें
fixed fill color	dark mode और hover fail	currentColor उपयोग करें
meaningful icon छिपाना	screen reader action नहीं समझता	button या SVG को name दें
decorative icon पढ़वाना	duplicate noisy label	aria-hidden="true"
uploaded SVG inline करना	script/event risk	केवल trusted SVG inline करें
reduced motion ignore करना	कुछ users के लिए परेशानी	prefers-reduced-motion

MDN SVG <script> element document करता है, इसलिए user-uploaded SVG को harmless image text न मानें। Claude Code diff review कर सकता है, लेकिन target folder सीमित रखें और changes पढ़ें। Permissions और commands के लिए Claude Code security भी देखें।

Reusable prompt

इस repository के लिए SVG icon system बनाएं।
Requirements:
- viewBox="0 0 24 24" रखें
- fill या stroke में currentColor उपयोग करें
- decorative icons में aria-hidden=true लगाएं
- meaningful standalone icons में role=img और title उपयोग करें
- prefers-reduced-motion friendly loading SVG जोड़ें
- SVGO config जोड़ें जो viewBox न हटाए
- risks, changed files और verification commands report करें

Performance angle के लिए Claude Code performance optimization भी पढ़ें, क्योंकि icons, diagrams और animations page weight और rendering को प्रभावित करते हैं।

CTA और tested result

यदि आप इस setup को reusable बनाना चाहते हैं, तो ClaudeCodeLab के products and templates देखें या real repository के साथ Claude Code training and consultation लें। SVG अच्छा पहला विषय है, क्योंकि scope छोटा है लेकिन design, accessibility, performance और review discipline सब शामिल हैं।

Masa की test UI में fixed colors को currentColor में बदलने के बाद वही icons light mode, dark mode और destructive buttons में चल गए। असली bug accessibility में था: सभी icons पर mechanically aria-hidden लगाने से icon-only search button का नाम गायब हो गया। Final rule यही रहा: button को नाम दें, और केवल decorative icons छिपाएं।