Zeichnen in SVG

Aus SELFHTML-Wiki
(Weitergeleitet von SVG/Farben)
Wechseln zu: Navigation, Suche
Logo Fill and Stroke

SVG-Grafikobjekte wie Pfade, Rechtecke oder auch Text beschreiben geometrische Formen. Anders als bei Pixelgrafiken werden dabei nicht einzelne Bildpunkte gespeichert, sondern mathematische Beschreibungen von Linien, Kurven und Flächen.

Eine Linie in SVG ist zunächst nur die Verbindung zwischen zwei Punkten und besitzt keine eigene Dicke. Erst durch das Zeichnen einer Kontur (Stroke) erhält sie eine sichtbare Breite. Auch Text besteht in SVG aus geometrischen Formen, die auf den Kurven der Schriftdatei basieren.

Damit eine Form im Browser sichtbar wird, wird sie gerendert: Das Innere eines Objekts wird gefüllt (Fill) und optional entlang des Umrisses eine Randlinie gezeichnet (Stroke). Diese beiden Eigenschaften bestimmen einen großen Teil der Darstellung von SVG-Grafiken.[1][2]

Wie wird in SVG „gemalt“?

Die Funktionsweise lässt sich mit dem Malen auf einer Leinwand vergleichen: SVG-Elemente werden in der Reihenfolge ihres Auftretens gezeichnet. Später gezeichnete Elemente liegen über früher gezeichneten und können diese teilweise oder vollständig verdecken.

Auch die einzelnen Bestandteile einer Form werden wie Farbschichten betrachtet: Zuerst wird die Füllung gezeichnet, anschließend die Kontur und gegebenenfalls weitere Effekte wie Markierungen oder Filter.

Der entscheidende Unterschied zu klassischen Bildern bleibt jedoch bestehen: SVG speichert keine fertigen Pixel, sondern die Beschreibung der Formen. Dadurch können Grafiken ohne Qualitätsverlust vergrößert oder verkleinert werden.

Füllungen mit fill

Eine SVG-Form besteht zunächst nur aus einer geometrischen Beschreibung. Damit sie als Fläche sichtbar wird, benötigt sie eine Füllung. Diese wird mit dem fill-Attribut festgelegt.

Füllung von Grafikobjekten ansehen …
	<rect x="350" y="30" />
	<rect fill="blue" x="470" y="30" />
	<rect fill="none" x="420" y="100" />

Die drei Rechtecke werden unterschiedlich gezeichnet:

  • Wird keine Füllung angegeben, verwendet SVG den Standardwert black. Deshalb erscheint beispielsweise ein Rechteck ohne weitere Angaben als schwarze Fläche.
  • fill="steelblue": Die Füllfarbe kann durch eine Farbangabe geändert werden:
  • fill="none": Soll das Innere einer Form nicht dargestellt werden, wird die Füllung mit none abgeschaltet.
    Dabei bleibt die Form selbst erhalten. Sie besitzt weiterhin eine geometrische Ausdehnung und kann beispielsweise mit einer Kontur (stroke) gezeichnet werden.

Erlaubt sind dabei folgende Werte:

  • eine Farbangabe
    (SVG verwendet die gleichen Farbangaben wie HTML und CSS!)
  • die Angabe none deaktiviert die Füllung. Der Bereich innerhalb der Form bleibt ungezeichnet.
  • eine url(#id) um …
    • einen Verlauf
    • ein Muster
    • oder eine Grafik (die als pattern definiert wird) zu referenzieren

Beachte:
Anders als bei der background-Eigenschaft in CSS ist es in SVG nicht möglich mehrere Füllungen (multiple fills), die nacheinander ausgeführt werden, zu verwenden. So könnte man ein Objekt mit einer Hintergrundfarbe füllen und ein oder mehrere Muster oder Schraffuren darüber legen.
Dies soll in SVG 2 kommen.[3]

fill-opacity – Füllungen transparent machen

Mit der fill-opacity-Eigenschaft (engl. für Deckkraft) lässt sich über den Alphakanal der Grad der Transparenz eines Elementes steuern.

durchscheinende Füllungen ansehen …
circle {
	fill-opacity: .5;
}

#eins {
	fill: steelblue;
}

#zwei {
	fill: gold;
}

#drei {
	fill: #c82f04;
}

Ein Wert von eins bedeutet dabei eine 100 %ige Deckkraft, also vollständig deckend,
ein Wert von null entsprechend keinerlei Deckkraft, also vollständige Transparenz.

Beachte: Obwohl der Wert für opacity eine prozentuale Angabe ist, sind Prozentwerte in XML-Attributen nicht erlaubt – im CSS jedoch schon.

Wenn du die Transparenz eines Objekts veränderst, vermischen sich die übereinanderliegenden Farben. Wie diese vermischt werden, kann man mit mix-blend-mode genauer festlegen.

Konturen mit stroke

Mit der Eigenschaft stroke legt man die Farbe einer Kontur fest. Die Kontur wird entlang des mathematischen Umrisses eines SVG-Objekts oder Pfades gezeichnet.

Beispiel 
circle {
  fill: gold;
  stroke: steelblue;
}


Ohne eine Angabe für stroke wird keine Umrandung dargestellt. Eine vorhandene Kontur kann mit stroke="none" oder stroke: none entfernt werden.

Beachte: Im Gegensatz zu vielen CSS-Eigenschaften ist stroke keine Kurzschreibweise für Eigenschaften wie stroke-width, stroke-linecap oder stroke-dasharray.

Mit stroke wird lediglich festgelegt, womit die Kontur gezeichnet wird – beispielsweise mit einer Farbe, einem Verlauf oder einem Muster. stroke funktioniert dabei wie ein virtueller Stift, dessen Eigenschaften mit weiteren Attributen angepasst werden können:

Breite der Kontur mit stroke-width

Mit stroke-width wird die Stärke einer Linie oder Umrandung festgelegt.

Randlinien in unterschiedlicher Stärke ansehen …
circle {
  fill: gold;
  stroke: steelblue;
  }
#eins {
  stroke-width: 5;
  } 
#zwei {
  stroke-width: 10;
  } 
#drei {
  stroke-width: 20;
  }

Der Rand einer Form ist zunächst nur die mathematische Grenze zwischen dem Inneren und der Umgebung der Form.

Die sichtbare Größe eines Objekts nimmt mit zunehmender stroke-width zu. Die Kontur wird dabei mittig auf dem mathematischen Pfad gezeichnet und verteilt sich gleichmäßig nach innen und außen.

Transparente Konturen mit stroke-opacity

Mit der Eigenschaft stroke-opacity lässt sich die Deckkraft einer Kontur steuern. Die Eigenschaft wirkt nur auf die gezeichnete Linie, nicht auf die Füllung des Objekts.

Der Wert liegt zwischen 0 und 1:

  • 1 bedeutet eine vollständig deckende Kontur,
  • 0 eine vollständig transparente Kontur.
Randlinien mit unterschiedlicher Deckkraft ansehen …
circle {
  fill: gold;
  stroke: steelblue;
  stroke-width: 20;
  stroke-opacity:1;
  } 
#zwei {
  stroke-opacity: .5;
  } 
#drei {
  stroke-opacity: .2;
  }

Durch die Transparenz werden darunterliegende Farben sichtbar und mehrere Konturen können sich optisch mischen.

Konturen gestalten / Linienmuster und Strichelungen

Linienenden mit stroke-linecap

Die Eigenschaft stroke-linecap kann das Aussehen von Linien- und Pfadenden verändern.

Linien – rund oder eckig? ansehen …
line {
  stroke: steelblue;
  stroke-width: 20;
  }
#eins {
  stroke-linecap: butt;
  } 
#zwei {
  stroke-linecap: round;
  } 
#drei {
  stroke-linecap: square;
  }
Beachte: Die Wertangaben round und square ragen über die Endpunkte hinaus.

Ecken mit stroke-linejoin

Mit der Eigenschaft stroke-linejoin legt man fest, wie die Spitzen, die durch das Aufeinandertreffen zweier Pfadsegmente (Knick) entstehen, gezeichnet werden sollen. So kann man bei Dreiecken und anderen Formen abgerundete Ecken realisieren.

Spitzen abrunden ansehen …
.spitz {
	stroke-linejoin: miter;
}

.rund {
	stroke-linejoin: round;
}

.bevel {
	stroke-linejoin: bevel;
}
polyline,.line {
  fill: none;	
  stroke: steelblue;
  stroke-width: 40;
  }

Folgende Angaben sind möglich:

  • miter: eckige Spitzen, Standardwert; (miter, engl. für Gehrung)
  • miter-clip: SVG2! wie miter, aber bei einer Angabe von stroke-miterlimit wird die Gehrung (miter) abgeschnitten
  • round: abgerundete Spitzen
  • bevel: abgeschnittene Spitzen; (bevel, engl. für Fase)
  • arcs: SVG2! Die äußeren Ränder der Kontur erhalten dieselbe Krümmung wie der Pfad, sodass ein natürlicheres Aussehen erzielt wird.

Werte von stroke-linejoin; Quelle:https://www.w3.org/TR/SVG2/painting.html#StrokeLinejoinProperty

Hinweis:
Die Werte miter-clip und arcs sind neu in SVG2 und noch nicht in die Browser implementiert.

Spitz zulaufende Ecken mit stroke-miterlimit

Die Wertzuweisung stroke-linejoin: miter erzeugt spitze Linienverbindungen, die für kleine Schnittwinkel eine sehr große Gehrungslänge haben.

Mit der Eigenschaft stroke-miterlimit kann man eine maximale Gehrungslänge festlegen. Würde also eine Spitze länger als die maximale Gehrungslänge werden, ignoriert der Browser die Anweisung miter und stellt den Winkel angefast (bevel) dar.[4][5]


Schnittwinkel kürzen ansehen …
polyline {
  fill:none;	
  stroke: steelblue;
  stroke-width: 35;
  }
#eins {
  stroke-miterlimit: 2;
  } 
#zwei {
  stroke-miterlimit: 3;
  } 
#drei {
  stroke-miterlimit: 6;
  } 
#vier {
  stroke-miterlimit: 7;
  } 
#fuenf {
  stroke-miterlimit: 11;
  }

Im zweiten bis fünften Beispiel wurde die Werte für stroke-miterlimit jeweils so erhöht, dass der Winkel nicht abgeflacht wird.
Je spitzer der Winkel, desto höher muss der Wert für stroke-miterlimit sein.

Folgende Angabe ist nötig:

  • eine Zahl, die gleich oder größer als 1 ist (Standardwert = 4)

Mit dem Standardwert 4 werden Schnittwinkel kleiner als 29° trotz miter angefast (bevel) dargestellt.

Je spitzer die Schnittwinkel ausfallen, desto höher muss stroke-miterlimit gewählt werden.

Werte für stroke-miterlimit; Quelle: https://www.w3.org/TR/SVG2/painting.html#StrokeMiterlimitProperty

Falls sich zwei gleichbreite Linien schneiden, ist der Sinus des halben Schnittwinkels θ das Verhältnis von Linienbreite und Gehrungslänge. Es gilt

sin(θ/2) = stroke-width / miterLength

eigene Kreation; Quelle: https://css-tricks.com/tight-fitting-svg-shapes#article-header-id-0

Wenn die miter-Länge geteilt durch die Randlinienstärke (stroke-width) den Wert für stroke-miterlimit übertrifft, dann gilt für:

  • miter: Die Verbindung wird abgeflacht (bevel) dargestellt
  • miter-clip: Die Gehrung (miter) wird von einer senkrechten Linie abgeschnitten, die entsprechend dem Wert von stroke-miterlimit vom Schnittpunkt der Linien entfernt ist.

Gestrichelte Linien mit stroke-dasharray

Mit der Eigenschaft stroke-dasharray kann man die Umrandung auch gepunktet oder gestrichelt ausführen. Dabei können Länge und Rhythmus der Strichelung frei gestaltet werden.

Erlaubt sind dabei folgende Werte:

  • none: durchgehende Linie (Standardwert)
  • Liste von Längenangaben oder Prozentwerten. Jeder zweite Wert gilt als Lücke. Zwischen den Werten steht ein Komma oder Leerzeichen.
  • Prozentwerte, beziehen sich auf die normierte Bilddiagonale. Das ist die Quadratwurzel des Durchschnitts aus den Quadraten von Länge und Breite.
Strichmuster mit unterbrochenen Linien ansehen …
line {
  stroke: steelblue;
  stroke-width: 5;
  }

.eins {
  stroke-dasharray: 1%, 1%;
  }

.zwei {
  stroke-dasharray: 1%, 5%;
  }

.drei {
  stroke-dasharray: 100 10 10 10;
  }

.vier {
  stroke-dasharray: 90, 20, 0, 20, 0, 20;
  stroke-linecap: round;
  stroke-width: 8;
  stroke-dashoffset: -4;
  }

Das vierte Beispiel zeigt eine Strich-Zweipunktlinie mit Kreisen. Die Punkte haben die Länge 0 und abgerundete Enden mit stroke-linecap: round.

Position der Strichelung mit stroke-dashoffset

Mit der Eigenschaft stroke-dashoffset kann man den Beginn der Umrandung nach vorne oder hinten schieben.

Erlaubt sind dabei folgende Werte:

Im folgenden Beispiel wird mit dieser Eigenschaft der sichtbare Teil des Strichmusters aus dem Viewport verschoben und dann mit einer Animation bis 0 reduziert. Die Linie wird wie „von Zauberhand“ gezeichnet:

Haus vom Nikolaus ansehen …
path {
	fill: none;
	stroke: steelBlue;
	stroke-width: 5;
	stroke-dasharray: 900 900;
	stroke-linejoin: round;
	stroke-linecap: round;
	animation: strokeAni 5s infinite linear;
}

@keyframes strokeAni {
	0% {
		stroke-dashoffset: 900;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

Komplexe Formen

Die bisherigen Eigenschaften bestimmen das Aussehen einer Kontur. Die folgenden Eigenschaften steuern dagegen besondere Aspekte ihrer Darstellung, etwa die Zeichenreihenfolge oder das Verhalten beim Skalieren.

Selbstüberschneidende Formen mit fill-rule

Normalerweise füllt SVG die Fläche, die von einem Pfad eingeschlossen wird. Bei einfachen Formen ist eindeutig, welcher Bereich innerhalb der Form liegt. Bei sich selbst überschneidenden Pfaden gibt es jedoch mehrere mögliche Interpretationen.

Mit der fill-rule-Eigenschaft wird festgelegt, welche Bereiche eines solchen Pfades gefüllt werden.

Die beiden wichtigsten Werte sind:

  • nonzero (Standardwert): Ein Bereich gilt als innerhalb der Form, wenn die Pfadrichtung eine bestimmte Orientierung ergibt.
  • evenodd: Jeder zweite Bereich wird als außerhalb betrachtet. Dadurch entstehen transparente Aussparungen.

Im folgenden Beispiel überschneiden sich die Linien der Formen. Mit evenodd bleiben die inneren Bereiche transparent. Wird auf nonzero gewechselt, werden diese Bereiche ebenfalls gefüllt.

Füllmethoden ansehen …
.normal {
	stroke: steelblue;
	stroke-width: 3;
	fill: gold;
	fill-rule: evenodd;
}

.normal:hover,
.normal:focus {
	fill-rule: nonzero;
}

Bei :hover (oder dank tabindex :focus) wird der Hintergrund mit nonzero vollständig ausgefüllt.

fill-rule wird vor allem bei komplexeren Pfaden benötigt, beispielsweise bei Sternen, Logos oder Schriftzügen.

Zeichenreihenfolge mit paint-order

Browserunterstützung
caniuse.com

Mit der Eigenschaft paint-order wird festgelegt, in welcher Reihenfolge Füllung (fill), Kontur (stroke) und Markierungen (markers) gezeichnet werden. Die Zeichenreihenfolge bestimmt, welcher dieser Bestandteile im Vordergrund liegt. Dies ist beispielsweise bei Text mit einer breiten Kontur nützlich.[6]

Die Standard­reihen­folge für die Zeichnung ist:

  1. mit Farbe füllen (fill)
  2. Randlinien zeichnen (stroke)
  3. Markierungen zeichnen (markers)

Diese Standardreihenfolge entspricht dem Wert normal.

Soll eine andere Reihenfolge verwendet werden, werden die gewünschten Schlüsselwörter – durch Leerzeichen getrennt – in der gewünschten Reihenfolge angegeben.

Es ist nicht erforderlich, alle drei Schlüsselwörter anzugeben. Fehlende Einträge ergänzt der Browser automatisch in der Standardreihenfolge.

Hoher Kontrast durch Konturen ansehen …
  <text x="270" y="120">
    stroke over 
  </text>	

  <text x="400" y="220" paint-order="stroke">
    stroke behind
  </text>

Auf einem Bild wechseln helle und dunkle Bildbereiche oft unmittelbar nebeneinander. Eine Kontur sorgt dafür, dass sich der Text unabhängig vom Hintergrund deutlich abhebt.

Damit die Kontur die Buchstaben nicht teilweise überdeckt, wird durch paint-order="stroke" zuerst die Randlinie gerendert, die dann durch die Füllung verdeckt wird, sodass nur die außenliegende Hälfte dargestellt wird. So verbessert sie den Kontrast, ohne die Lesbarkeit zu beeinträchtigen.

vector-effect

Bei Landkarten werden oft Symbole und Grafik-Objekte verwendet, die in verschiedenen Zoom-Stufen beliebig skaliert werden. Allerdings soll eine Straße eben doch ein Strich in der Landschaft bleiben und nicht endlos breit dargestellt werden.

Browserunterstützung
caniuse.com

Die Eigenschaft vector-effect legt fest, ob Randlinien beim Zoomen skaliert werden oder nicht. Mit dem Wert non-scaling-stroke verhindert man dies.

gleiche Strichstärken mit vector-effect ansehen …
<path vector-effect="non-scaling-stroke" id="p1" ... />

<g stroke="steelblue">
<use href="#p1" x="100" y="100" />
<use href="#p1" x="120" y="100" transform="scale(2)" />
<use href="#p1" x="200" y="-300" transform="scale(0.4 -0.6)" />
<use href="#p1" x="-650" y="-200" transform="scale(-0.4) skewX(-30)" />
</g>

Die Randlinie bleibt immer 2 Einheiten breit, egal wie stark gezoomt wird. Dies ist z.B. bei Landkarten, in denen die Randlinie eine Straße darstellen soll, wichtig.

Beachte: Anders als die anderen Kontureneigenschaften wird vector-effect nicht implizit an Kindelemente vererbt, sondern muss für jedes Kindelement einzeln gesetzt werden. Das Setzen beispielsweise in einem g- oder svg-Element hat somit keinen direkten Effekt, allerdings kann in diesem Fall bei Kindelementen inherit verwendet werden.

In der Spec gibt es viele weitere Werte, die aber von den Browserherstellern nicht implementiert wurden.

Siehe auch

  • Zeichnen in SVG
    Finetuning
    • color-interpolation
    • color-rendering
    • image-rendering
     
  • Markierungen in SVG
    • Farben wiederverwenden
      • context-fill und context-stroke
    • color
    • Marker ausrichten
     
  • Verläufe in SVG
    • linearGradient
      • stop
    • radialGradient
     
  • Muster in SVG
    • pattern
     

Weblinks

  1. ↑ W3C: Chapter 13: Painting: Filling, Stroking and Marker Symbols
    Scalable Vector Graphics (SVG) 2
    W3C Candidate Recommendation (04 October 2018)
  2. ↑ Die hier besprochenen Technologien sind im CSS Fill and Stroke Module Level 3festgelegt. Als CSS-Modul soll es zukünftig auch für HTML-Elemente verfügbar gemacht werden, damit nicht standardisierte Versuche wie -webkit-text-stroke aus der Chrome-Welt dann vereinheitlicht werden können.
    Allerdings haben die Browserhersteller nur einen (kleineren) Teil implementiert, sodass die Spec hier eher ein Blick in die fernere Zukunft ist.
  3. ↑ W3C: SVG 2 Addition: Allow multiple paints in fill and stroke.
  4. ↑ css-tricks: Tight Fitting SVG Shapes, the Present and Future von Ana Tudor
    erklärt, welche Probleme die Gehrung von Ecken beim passgenauen Zuschneiden von Objekten verursacht.
  5. ↑ codepen.io: stroke-miterlimit-Animation von Ana Tudor
  6. ↑ W3C: PaintOrder

Abgerufen am 10.08.2026
von "http://wiki.selfhtml.org/wiki/Zeichnen_in_SVG"