Die Abkürzung SVG steht für "Scalable Vector Graphics".
Auf Mozilla Developer Network (MDN) findet sich die folgende Definition:
[E]ine XML-Auszeichnungssprache zur
Beschreibung zweidimensionaler Vektorgrafiken.
(Quelle)
Die aktuellen Browser (Firefox, Chrome, IE, Opera, Vivaldi, Safari) können SVG-Grafiken ohne die Installation von Plugins/AddOns darstellen. Im Gegensatz zu Bitmap-Grafiken (Raster-Grafiken) wie z.B. PNG-, GIF- oder JPEG-Dateien werden Vektor-Grafiken nicht über ein Punkte-Raste definiert, sondern über geometrische Grundformen wie Kreise oder Linien. Dadurch verschlechtert sich die Grafik-Qualität bei Vektor-Grafiken auch dann nicht, wenn diese Vergrößert werden. Bei Vergrößerungen von Bitmap-Grafiken hingegen kommt es zu einer Verschlechterung der Darstellung, die Grafik wird "pixelig", d.h. es kommt zum "Treppenstufen-Effekt".
Vektor-Grafiken haben auch Nachteile: Der Aufwand bei der Darstellung ("Rendering") kann höher sein, und für fotorealistische Darstellungen sind meist Bitmap-Dateien besser geeignet.
Hier sollte ein gelber Kreis mit schwarzer Randlinie angezeigt werden:
Der SVG-Code ist eingebettet, ist also direkt im Quelltext der vorliegenden HTML-Seite
in einem SVG-Tag definiert.
Die schwarze Linie als Rahmen ist mit CSS im HEAD-Bereich dieser HTML-Seite
definiert.
Vergrößern Sie in Ihrem Browser die Anzeige dieser HTML-Seite mit der Zoom-Funktion
(Tastenkombination STRG + NummernBlockPlus für Firefox, Chrome, Opera und IE).
Dabei verschlechtert sich die Darstellungs-Qualität der Kreislinie nicht.