Die Entwickler-Tools, zu denen du jeden Tag greifst, alle an einem Ort.

Konverter, Formatter, Hashes, Validatoren und die kleinen Helfer, die du immer wieder öffnest, bleiben zusammen, statt zwischen Tabs verloren zu gehen.

GitHub

/ Tools

■

/ Tool-Finder

109 Tools

/ SVG-Viewer

SVG-Code

Vorschaubreite (px)

Vorschauhöhe (px)

/ Ausgewähltes Tool

■

SVG-Viewer - kostenloses Formatter-Tool

SVG-Code mit Syntaxhervorhebung anzeigen und in der Vorschau betrachten

■ 01

Was ist SVG?

SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektorbildformat für zweidimensionale Grafiken. Anders als Rasterbilder lassen sich SVGs auf jede Größe skalieren, ohne an Qualität zu verlieren, was sie ideal für Logos, Symbole und Illustrationen macht…

■ 02

Wie funktioniert es?

Füge deinen SVG-Code in das Textfeld ein. Das Tool rendert eine Live-Vorschau und zeigt den Code mit Syntaxhervorhebung an. Passe die Vorschaumaße an, um zu sehen, wie das SVG skaliert. Verwende die Schaltfläche Kopieren, um den SVG-Code zu kopieren…

■ 03

Beispielfälle

Deckt Einfacher Kreis und Path-Element ab, damit du gängige Ein- und Ausgaben schnell vergleichen kannst.

/ Verwandte Tools

/ Code

■

Quellcode des ausgewählten Tools, hier neben der Live-Version auf der rechten Seite gezeigt.

/ Quellcode

TypeScript

typescript

// No external dependencies needed - SVG is native to browsers

// Create an SVG programmatically
function createSvg(width: number, height: number): string {
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
  <!-- Add your SVG elements here -->
</svg>`;
}

// Example: Create a circle SVG