Mit dem <rect>-Tag kann man Rechtecke und Quadrate anzeigen. Die Attribute rx und ry für das <rect>-Tag legen fest, wie stark die Ecken des Rechtecks abgerundet sind. Falls die Ecken keine Rundung aufweisen sollen, gibt man rx=“0″ an oder lässt das Attribut ganz weg.
<rect x="5" y="5" rx="5" ry="5" width="70" height="70" />
Die Attribute cx und cy des <circle>-Tags legen die x- und y-Position des Kreis-Mittelpunktes fest, zur Definition des Radius’ wird das Attribut r verwendet.
<circle cx="40" cy="40" r="35" />
Ellipsen sind nicht gleichmäßig rund, das heißt die Radiuswerte in x- und y-Richtung weichen voneinander ab. Das Attribut rx definiert den horizontalen Radius, ry den vertikalen Radius.
<ellipse cx="40" cy="40" rx="35" ry="25" />
Das Element <line> zeigt eine gerade Linie an, die von Anfangspunkt (x1, y1) und Endpunkt (x2, y2) festgelegt wird.
<line x1="5" y1="75" x2="75" y2="5" />
Ein <polygon>-Element enthält mindestens drei Seiten. Jede Seite eines Polygons wird durch ein entsprechendes Wertepaar von Eckpunkten definiert.
<polygon points="40 5, 5 75, 75 75" />
Ein <polyline>-Element kann jede beliebige Form annehmen, die aus geraden Linien besteht. Dieses Element verwendet ähnlich wie das polygon-Element ein System von Wertepaaren.
<polyline points="5 75, 40 5, 75 75, 40 5" />
Das <path>-Element wird verwendet um eine Linie aus gebogenen und geraden Segmenten festzulegen, die mithilfe des Attributs d festgelegt werden: M = move to („Bewegung nach“), L = line to („Linie zu“), C = curve to („Kurve nach“), Z = close path („Pfad abschließen“). Das Ende eines Pfades kann eine weitere Form enthalten. Dies ist nützlich, wenn man Pfeile oder Verbindungen in technischen Diagrammen darstellen möchte.
<path d="M5 5 C5 5 125 40 40 75
L 5 40 5 15 Z" marker-end="url(#Triangle)" />
Text kann auf einfache Weise in einer SVG-Grafik angezeigt werden. Dazu wird er einfach in ein <text>-Element eingeschlossen, wobei man seine Position mithilfe der x- und y-Attribute festlegt. Man beachte, dass die Position von Formen anhand des oberen linken Punktes festgelegt wird, die Position von Text dagegen vom unteren linken Punkt aus.
<text x="10" y="20" >Results</text>
Mehrere Zeilen Text werden mit <tspan>-Elementen angezeigt, die in ein text-Element eingeschlossen sind. Die <tspan>-Elemente können absolut oder relativ positioniert werden. Absolute Positionen werden mithilfe von x- und y-Attributen festgelegt, während dx- und dy-Attribute die relative Position für jedes neue <tspan>-Element festlegen.
<text x="10" y="20">Results</text> <tspan x="20" dy="15">first</tspan> <tspan x="20" dy="15">second</tspan>
Mehr Digitalisierung wird von den Unternehmen gefordert. Für KMU ist die Umsetzung jedoch nicht trivial,…
Der Nettoprofi wächst um 117 Prozent. Auch beim Umsatz erzielt die Facebook-Mutter ein deutliches Plus.…
Vom Standpunkt eines Verbrauchers aus betrachtet, stellt sich die Frage: Wie relevant und persönlich sind…
Scamio analysiert und bewertet die Gefahren und gibt Anwendern Ratschläge für den Umgang mit einer…
Seine Trainingsdaten umfassen 3,8 Milliarden Parameter. Laut Microsoft bietet es eine ähnliche Leistung wie OpenAIs…
Sie erlaubt eine Remotecodeausführung außerhalb der Sandbox. Betroffen sind Chrome für Windows, macOS und Linux.