SVG mit Claude Code bearbeiten: Praxisleitfaden

Vor dem ersten SVG-Prompt

SVG eignet sich f?r Icons, Logos, Diagramme und kleine Datenvisualisierungen. Es bleibt beim Skalieren scharf und kann Farben aus CSS ?bernehmen. Claude Code kann ein Repository lesen, Dateien bearbeiten und Pr?fbefehle ausfuehren. Dadurch eignet es sich gut, um einzelne SVG-Dateien in wiederverwendbare UI-Bausteine zu verwandeln.

Ein zu kurzer Prompt ist aber riskant. “Erstelle ein SVG-Icon” kann ein gut aussehendes, aber fragiles Ergebnis liefern: kein viewBox, fest codierte Farben, fehlende zugängliche Namen, Animation ohne Ruecksicht auf reduzierte Bewegung oder eine Optimierung, die Skalierung zerst?rt. Masa hatte dieses Problem in einer kleinen ClaudeCodeLab-Testoberfläche. Das Icon sah korrekt aus, musste aber f?r Textbutton, reinen Icon-Button und Dark Mode jeweils manuell angepasst werden.

Dieser Leitfaden zeigt einen robusteren Ablauf: viewBox behalten, currentColor nutzen, dekorative und bedeutungstragende Icons trennen, einfache Animationen stabil halten und mit SVGO konservativ optimieren. Offizielle Quellen sind MDN <svg>, MDN viewBox, MDN ARIA img role, MDN aria-hidden, SVGO und die Claude Code Dokumentation.

Der Ablauf

SVG-Arbeit ist nicht nur Zeichnen. In einer Anwendung betrifft sie Designsystem, Barrierefreiheit, Performance, Sicherheit und Code Review.

flowchart LR
  A["Zweck klaeren"] --> B["viewBox fixieren"]
  B --> C["currentColor nutzen"]
  C --> D["aria-label oder aria-hidden w?hlen"]
  D --> E["In HTML oder React einbauen"]
  E --> F["Mit SVGO optimieren"]
  F --> G["Layout und Sicherheit pr?fen"]

Ein guter Prompt ist konkret: “Erstelle eine SVG-Icon-Komponente mit viewBox="0 0 24 24", stroke="currentColor", dekorative Icons mit aria-hidden, eigenstaendige sinnvolle Icons mit role="img" und title, plus eine SVGO-Konfiguration, die viewBox nicht entfernt.”

Inline SVG und viewBox

Inline SVG bedeutet, dass das <svg> direkt in HTML oder JSX steht und nicht als Datei ?ber img geladen wird. Das ist sinnvoll, wenn ein Icon CSS-Farben erben, auf Hover reagieren, React-Props nutzen oder leicht animiert werden soll.

viewBox ist das interne Koordinatensystem. MDN beschreibt es mit vier Zahlen: min-x min-y width height. Einfach gesagt bedeutet viewBox="0 0 24 24", dass das Icon auf einem 24-mal-24-Raster gezeichnet wird, auch wenn es sp?ter in 16px, 24px oder 48px angezeigt wird.

<button class="icon-button" type="button" aria-label="Suchen">
  <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>

Der Button hat bereits den zugänglichen Namen. Darum ist das SVG dekorativ. Wenn der Button nur aus dem Icon besteht, geh?rt der Name auf den Button. Wenn das SVG selbst als Bild Bedeutung traegt, braucht das SVG einen eigenen Namen.

Theming mit currentColor und CSS-Variablen

Fest codierte Farben im SVG erzeugen Wartungsaufwand. Wenn ein Pfad fill="#111827" enth?lt, muss Claude Code das SVG bei jedem Theme-Wechsel anfassen. F?r UI-Icons ist es besser, CSS-Farbe zu erben.

: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="L?schen" 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>

Nach der Umstellung sollte Claude Code nach festen Farben suchen, zum Beispiel mit rg "fill=\"#|stroke=\"#" in Komponenten und Asset-Ordnern. Logos k?nnen eine Ausnahme sein, normale UI-Icons eher nicht.

Barrierefreie React-Icons

Ein bedeutungstragendes SVG braucht einen zugänglichen Namen. Ein dekoratives SVG sollte aus dem Accessibility Tree verschwinden. MDN empfiehlt f?r eingebettete SVG-Bilder role="img" und ein Label; f?r nicht interaktive Deko ist aria-hidden="true" passend.

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 />
  Speichern
</button>

<SvgIcon name="search" title="Suchen" />

Setze aria-hidden="true" nie auf fokussierbare Elemente. Ein reiner Icon-Button braucht einen Namen auf dem Button oder sichtbaren Text.

Einfache Animation ohne Layoutschaden

SVG-Animation eignet sich f?r Laden, Erfolg und kleine Hervorhebungen. Gr??e und Layout sollten stabil bleiben, und prefers-reduced-motion muss respektiert werden.

<svg class="spinner" viewBox="0 0 48 48" width="48" height="48" role="img" aria-label="L?dt">
  <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;
  }
}

F?r weitere Bewegungskonzepte passt der Anschluss an Claude Code CSS-Animationen. SVG beschreibt die Form, CSS beschreibt Zustand und Bewegung.

Kleine SVG-Charts

SVG kann kleine Diagramme ohne grosse Bibliothek erzeugen. Wenn Labels aus externen Daten kommen, muessen sie vor dem Einfuegen in <text> escaped werden.

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="Monatliche Anfragen" xmlns="http://www.w3.org/2000/svg">
    <g color="#0f766e">${bars}</g>
  </svg>`;
}

Das reicht f?r kleine Dashboards, Artikelgrafiken und einfache Landing-Page-Belege. F?r Achsen, Legenden, Tooltips, Zoom oder grosse Datenmengen ist eine Chart-Bibliothek die bessere Wahl.

Optimieren mit SVGO

Design-Exports enthalten oft Metadaten, Editor-Attribute und zu viele Dezimalstellen. SVGO entfernt diesen Ballast. Starte konservativ und pr?fe den Diff.

// 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 dokumentiert preset-default, removeDimensions und weitere Plugins. Vorsicht bei removeViewBox: laut SVGO kann es verhindern, dass SVGs ihren Container ausfuellen, und Clipping verursachen.

Einsatzfaelle und Fehler

Typische Einsatzfaelle sind Produkt-Icons, technische Diagramme, Visuals neben Preisen und Kauf-CTAs sowie kleine Dashboards f?r Lesefortschritt, CTA-Klicks oder Anfragen.

Fehler	Wirkung	Korrektur
viewBox entfernen	Icon skaliert schlecht oder wird beschnitten	In SVGO erhalten und Diff pr?fen
Feste Farben	Dark Mode und Hover brechen	currentColor verwenden
Bedeutungsvolles Icon verstecken	Screenreader verliert die Aktion	Button oder SVG benennen
Deko-Icon vorlesen	Doppelte Namen	aria-hidden="true"
Upload-SVG inline einsetzen	Risiko durch Skripte und Events	Nur vertrauenswuerdige SVG inline
Reduced Motion ignorieren	Bewegung kann belasten	prefers-reduced-motion nutzen

MDN dokumentiert das SVG-Element <script>. Behandle ein hochgeladenes SVG daher nicht als harmlosen Bildtext. Claude Code kann Diffs pr?fen, aber begrenze den Zielordner und lies die ?nderungen. F?r Berechtigungen und Befehle ist auch die Claude Code Sicherheitsseite relevant.

Wiederverwendbarer Prompt

Erstelle ein SVG-Icon-System f?r dieses Repository.
Anforderungen:
- viewBox="0 0 24 24" beibehalten
- currentColor f?r fill oder stroke verwenden
- Dekorative Icons mit aria-hidden=true verstecken
- Eigenstaendige sinnvolle Icons mit role=img und title auszeichnen
- Ein reduced-motion-freundliches Lade-SVG hinzufuegen
- Eine SVGO-Konfiguration hinzufuegen, die viewBox nicht entfernt
- Risiken, ge?nderte Dateien und Pr?fbefehle berichten

Als n?chster Schritt passt Claude Code Performance-Optimierung, weil Icon-Anzahl, Diagramme und Animationen am Ende auch Seitengr??e und Rendering beeinflussen.

CTA und getestetes Ergebnis

Wenn du daraus ein wiederverwendbares Setup machen willst, nutze die ClaudeCodeLab Produkte und Templates oder bringe ein echtes Repository in eine Claude Code Schulung und Beratung. SVG ist ein guter Einstieg, weil der Umfang klein ist, aber Design, Accessibility, Performance und Review gleichzeitig beruehrt.

In Masas Test-UI konnten dieselben Icons nach der Umstellung auf currentColor in hellem Theme, dunklem Theme und destruktiven Buttons genutzt werden. Der echte Fehler lag in der Accessibility: Ein reiner Such-Icon-Button verlor seinen Namen, als aria-hidden mechanisch auf alle Icons gesetzt wurde. Die finale Regel lautet: Button benennen, nur dekorative Icons verstecken.