Beim Dokumentaufbau beginnen
SVG ist eine auf XML beruhende Sprache für Vektorgrafiken. Ein svg-Element kann Formen, Pfade, Texte, Gruppen und Attribute enthalten, die das Bild beeinflussen. Das Beispiel unten besitzt eine viewBox von 40 mal 40 und einen Kreis mit Mittelpunkt 20,20 sowie Radius 12. Die viewBox legt ein Koordinatensystem fest; sie bestimmt nicht, dass die Grafik auf der Webseite 40 CSS-Pixel breit sein muss. Wie bei XML sind korrekte Elementverschachtelung und Anführungszeichen um Attribute wichtig. Ein allgemeiner XML-Formatierer macht die Struktur lesbar; der SVG-Formatierer prüft zusätzlich auf eine svg-Wurzel. Für eine tatsächliche SVG-Grafik ist er die passende Wahl.
Zum Prüfen formatieren, eine Kopie minimieren
Der Formatierer fügt Einrückungen und Zeilenumbrüche hinzu. So können Sie Kreiselement, Füllfarbe und viewBox getrennt lesen und Änderungen besser prüfen. Der SVG-Minimierer erzeugt eine kompaktere Textdarstellung für eine veröffentlichte Datei; er ist kein Bildkompressor, der Pfade neu optimiert oder eine andere Zeichnung entwirft. Behalten Sie die ursprüngliche Quelle und vergleichen Sie beide Fassungen in einem echten Renderer. Eine kürzere Zeichenfolge beweist nicht, dass jede ungewöhnliche SVG-Funktion überall gleich dargestellt wird, besonders bei begrenztem Parserumfang. Wenn das Werkzeug einen Fehler meldet, untersuchen Sie den Eingang, statt fehlendes XML zu erraten.
- SVG-XML mit viewBox und Kreis
- Struktur lesbar formatieren
- Kopie minimieren → Darstellung vergleichen
Sichtbare und unsichtbare Bedeutung erhalten
Ein Diagramm kann Texte, Beschriftungen oder einen Titel enthalten, die für Lesende und Hilfstechnologien wichtig sind. Streichen Sie solche Inhalte nicht bloß für weniger Bytes. SVG kann außerdem Stile, Links, Animationen und Skripte enthalten. Formatieren ist daher keine Bereinigung einer nicht vertrauenswürdigen Datei. Stammt die Grafik von Dritten, ist vor dem Einfügen in eine Seite eine passende Sicherheitsprüfung und Bereinigung erforderlich. Der Beispielkreis ist bewusst einfach: Er zeigt den Aufbau, ohne vollständige SVG-Unterstützung des kleinen Browser-Werkzeugs zu versprechen. Vergleichen Sie nach der Bearbeitung Bild, Abmessungen und Textalternativen.
Koordinaten und Einbettung prüfen
Erscheint ein SVG zu klein, abgeschnitten oder leer, sehen Sie zuerst auf die viewBox. Ihre vier Zahlen beschreiben den sichtbaren Koordinatenbereich; eine Form außerhalb kann trotz gültigem XML unsichtbar bleiben. Prüfen Sie danach Breite und Höhe am Einbettungsort, denn CSS kann die Anzeigegröße festlegen. Füllung und Kontur beeinflussen ebenfalls die Sichtbarkeit. Formatierung sollte die beabsichtigten Koordinaten nicht ändern; eine minimierte Fassung vergleichen Sie unter denselben Seitenstilen wie die Quelle. Öffnen Sie ein wichtiges Bild sowohl allein als auch in der tatsächlichen Seite.
Mit überprüfbaren Schritten arbeiten
Fügen Sie ein kleines repräsentatives SVG in den eingebetteten Formatierer ein und prüfen Sie die lesbare Struktur. Ist die Datei XML, aber keine SVG-Grafik, wählen Sie den XML-Formatierer. Geben Sie nach der Durchsicht eine Kopie in den SVG-Minimierer, bewahren Sie beide Fassungen auf und vergleichen Sie sie im Browser bei mehreren Größen. Überprüfen Sie vorhandene Textalternativen und Interaktionen. Erst danach sollte die veröffentlichte Datei ersetzt werden. Die Eingabe bleibt bei dieser Umwandlung im Browser, doch ein öffentliches vorausgefülltes Embed zeigt sie im URL-Fragment; veröffentlichen Sie keine privaten Quellen. Sauberer Code erleichtert die Prüfung und ersetzt keinen Bildtest.