SVG Beispieldateien: Formen, Verlauf und Platzhalter

SVG ist ein XML-basiertes Vektorbildformat, das Browser direkt darstellen. Die Dateien enthalten Rechteck, Kreis, Linie und Text, einen Farbverlauf, einen grauen Bildplatzhalter, einen Logo-Platzhalter und eine Datei mit viewBox ohne width und height. Damit lassen sich Upload, Vorschau und Skalierung testen; eine Datei mit nicht geschlossenem Tag ist absichtlich fehlerhaft.

6 Varianten auf einer Seite, jede mit eigenem Kopier- oder Download-Knopf. Darunter: 1× Absichtlich ungültig.

SVG: Rechteck, Kreis, Linie und Text

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120" viewBox="0 0 200 120">
  <rect x="10" y="10" width="80" height="50" fill="#e0f2fe" stroke="#0369a1" stroke-width="2"/> …

SVG: Farbverlauf und abgerundetes Rechteck

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120" viewBox="0 0 200 120">
  <defs> …

SVG: grauer Bildplatzhalter 800 x 450 mit Beschriftung

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450">
  <rect width="800" height="450" fill="#e5e7eb"/> …

SVG: Logo-Platzhalter (Quadrat mit Buchstabe)

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <rect width="100" height="100" rx="20" fill="#0369a1"/> …

SVG: nur viewBox, ohne width und height

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18.5 21 12 16.5 5.5 21 7.5 13.5 2 9h7z" fill="#f59e0b"/></svg>

Ohne Breite und Höhe füllt das Bild je nach Einbettung den ganzen Platz.

SVG mit Fehler: Tag nicht geschlossenAbsichtlich ungültig

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <rect width="50" height="50" fill="red"> …