SVG/Elemente/Grundformen

Sie können eine SVG-Datei mit Grafikobjekten füllen. Hier stellen wir Ihnen die Grundformen (basic shapes) vor.

Rechteck

Mit rect definieren Sie in SVG ein Rechteck.

Folgende Angaben sind nötig:

• x: horizontale Position der linken oberen Ecke
• y: vertikale Position der linken oberen Ecke
• width: Breite
• height: Höhe

Beispiel ansehen …

  <svg viewBox="0 0 870 300">
    <rect id="eins" width="200" height="100"/>
    <rect id="zwei" x="220" y="20"   width="200" height="100"/>
    <rect id="drei" x="100" y="150" width="200" height="100" rx="20" ry="20" />
    Ihr Browser kann kein SVG.
  </svg>

Das Beispiel enthält drei Vierecke.

• das erste rect-Element hat keine x,y-Koordinaten, die linke obere Ecke wird auf 0,0 gesetzt.
• das zweite rect-Element enthält x und y-Attribute, die es entsprechend positionieren.
• das dritte rect-Element erhält mit rx und ry abgerundete Ecken.

Achtung!

In diesem Beispiel wurde das viewBox-Attribut XML-konform in CamelCase geschrieben. In HTML5 wäre eine konsequente Kleinschreibung möglich.

ansehen …

Beachten Sie: Falls Sie keine Werte für die x,y-Koordinaten setzen, wird die linke obere Ecke auf 0,0 positioniert.

Folgende Angaben sind möglich:

• rx: Abrundung der Ecken in der Horizontalen
• ry: Abrundung der Ecken in der Vertikalen

Wird nur eine der beiden Angaben angegeben, erhält die andere Angabe deren absoluten Wert. Ist beispielsweise rx=10%, wird bei fehlendem ry für dieses ein Wert von 10% der Breite(!) des Viewports angenommen.

Beispiel ansehen …

<svg>
  <rect x="50" y="50" width="300" height="100" rx="20" ry="20" />
</svg>

ansehen …

Kreis

Mit circle definieren Sie in SVG einen Kreis. Folgende Angaben sind nötig:

• cx: horizontale Position des Mittelpunktes
• cy: vertikale Position des Mittelpunktes
• r: Radius

Beispiel ansehen …

<svg>
  <circle id="eins" cx="70"  cy="70"  r="50" />
  <circle id="zwei" cx="240" cy="140" r="20" />
</svg>

ansehen …

Beachten Sie: Wenn Sie für cx und cy keine Angaben machen, wird der Kreis um den Punkt 0,0 herum gezeichnet.

Ellipse

Mit ellipse definieren Sie in SVG ein Oval oder Ellipse. Es kann beinahe identisch beschrieben werden wie ein Kreis, nur dass es anstatt eines Radius zwei Werte gibt, welche Breite und Höhe repräsentieren.

Folgende Angaben sind nötig:

• cx: horizontale Position des Mittelpunktes
• cy: vertikale Position des Mittelpunktes
• rx: Breite
• ry: Höhe

Beispiel ansehen …

<svg>
  <ellipse id="eins" cx="70"  cy="50"  rx="60" ry="40" />
  <ellipse id="zwei" cx="250" cy="100" rx="20" ry="60" />
</svg>

ansehen …

Linie

Mit line definieren Sie in SVG eine Linie.

Folgende Angaben sind möglich:

• x1: horizontaler Startpunkt
• y1: vertikaler Startpunkt
• x2: horizontaler Endpunkt
• y2: vertikaler Endpunkt

Fehlende Angaben werden als 0 angenommen. Sinnvollerweise muss mindestens eine Angabe gesetzt werden. <line /> ohne Attribute zu verwenden erzeugt einen Punkt (bzw. ein Viertel davon) im Ursprung, sofern stroke-linecap nicht seinen Standardwert butt hat.

Beispiel ansehen …

<svg>
  <line id="eins" x1="10"  y1="10" x2="200" y2="190"/>
  <line id="zwei" x1="200" y1="10" x2="200" y2="190" />
</svg>

ansehen …

Statt dem bisher verwendeten fill, das bei einer Linie keinen Effekt hat, legen wir hier mit CSS Linienfarbe und -dicke fest.

Empfehlung: Alternativ können Sie eine Linie mit

• <polyline points="x1,y1 x2,y2"/>
• <path d="Mx1,y1 Lx2,y2"/>

festlegen.

Polygonzug

Mit polyline definieren Sie in SVG einen Polygonzug (oder Polylinie), der aus verschiedenen Koordinatenpunkten besteht.

Das einzige Attribut lautet:

• points: enthält alle Punkte der Polylinie

Beispiel ansehen …

#eins {
  stroke: #3983ab;
  stroke-width:3px;
  fill: none;
  }
#zwei {
  stroke: #3983ab;
  stroke-width: 3px;
  fill: #dfac20;
  }

<svg>
  <polyline id="eins" points="10,10 40,40 10,70 40,100 10,130 40,160 10,190"/>
  <polyline id="zwei" points="110,10 140,40 110,70 140,100 110,130 140,160 110,190" />
</svg>

ansehen …

Beachten Sie: Wenn Sie nur den Polygonzug darstellen wollen, müssen Sie fill="none" angeben, da ansonsten der Standardwert schwarz für die Füllung verwendet wird.

Polygon

Mit polygon definieren Sie ein Polygon (Vieleck). Es besitzt wie die Polylinie eine Punktemenge, die ein Objekt beschreibt. Bei einem Polygonzug wird jedoch der Startpunkt nicht mit dem Endpunkt dieser Menge verknüpft, während dies bei einem Polygon der Fall ist.

Das einzige Attribut lautet:

• points: enthält alle Punkte der Polylinie / des Polygons

Beispiel ansehen …

<svg>
  <polygon id="eins" points="100,10 150,190 50,190"/>
  <polygon id="zwei" points="300,10 350,190 300,170 250,190" />
</svg>

ansehen …

SVG erlaubt mehrere korrekte Schreibweisen für die Angabe der Punktemenge:

• Punkte dürfen aus positiven und negativen Zahlen bestehen.
• Trennzeichen einer Dezimalzahl ist grundsätzlich der Punkt.
• Die einzelnen Koordinaten werden durch ein Komma oder ein Whitespace-Zeichen voneinander getrennt.

Anwendung

inhaltsleer oder doch mit End-Tag?

Normalerweise sind die Elemente der Grundformen inhaltsleere Elemente, müssen also am Ende noch einen abschließenden Schrägstrich haben.

Beispiel

<svg width="400" height="200">
  
  <rect x="50" y="50" width="300" height="100"/>
    
</svg>

<svg width="400" height="200">
      
  <rect x="50" y="50" width="300" height="100">
    <animate … />
  </rect>
 
</svg>

Wenn Sie eine Grundform mit SMIL animieren, wird das Animations-Element zum Kind-Element. Deswegen benötigt das rect-Element im 2. Beispiel ein Start- und ein End-Tag; der abschließende Schrägstrich aus dem 1. Beispiel fällt weg.