SVG

SVG ist eine Beschreibungssprache für Vektorgrafiken. Aus HTML-Sicht sind SVG Elemente inline-block Elemente. Das svg Element selbst hat eine Standardgröße. Mit CSS kann man diesem svg Element die gewünschte width, height und weitere Eigenschaften zuweisen.

In einem SVG Element kann man Vektorgrafiken erzeugen. Diese bekommen Eigenschaften wie Größe, Position, Farbe, Rand etc.

Diese Eigenschaften kann man auch mit CSS zuweisen. Man kann diese Grafiken mit allen möglichen Selektoren ansprechen, Nachfolgeselektoren, Klassen, Id, etc.
Hier werden jedoch die SVG Eigenschaften zugewiesen.
svg circle{fill:green;)
Siehe auch unten das Ellipse Beispiel.

SVG in HTML erzeugen

Hier sieht man einige Grundformen. Wertezuweisungen der SVG Elemente können auch in Prozent angegeben werden. Ohne Einheit ist es Pixel.

Kreis

<svg>
<circle r="30" cx="50" cy="80" fill="red" />
<circle r="20" cx="30" cy="50" fill="black" stroke="#fa0" stroke-width="10" />
</svg>

Der rote, erste Kreis hat seinen Rand mit CSS bekommen.

 svg circle:nth-child(1) {
            stroke: #00f;
            stroke-width: 2px;
        }

Rechteck

<svg>
<rect width="50" height="20" x="50%" y="50%" fill="red" />
<rect width="20" height="20" x="0" y="0" fill="black" stroke="#fa0" stroke-width="3" />
</svg>

Text

<svg>
<text text-anchor="baseline" x="0" y="20">bla bla baseline</text>
<text text-anchor="middle" x="50%" y="50%">mi mi middle</text>
</svg>

Die Grundlinie eines Textes befindet sich links oben. Es wird durch die Eigenschaft text-anchor definiert, deren Standartwert baseline ist. Mittels text-anchor="middle" wird die Mitte des Textes in die linke obere Ecke gesetzt. Weitere Verschiebungen werden mit x und y definiert.

Ellipse

<svg class="svgEllipse">
<ellipse />
<ellipse />
<ellipse />
<ellipse />
<ellipse />
<ellipse />
<circle r="30" cx="50%" cy="50%" fill="#ff9d00" stroke="#7702bf" stroke-width="3" />
</svg>

Hier wurden mehrere Ellipsen erzeugt und diese mit CSS transform:rotate(30) gedreht und der Drehpunkt in die Mitte gesetzt transform-origin: 50% 50%; . Die CSS transform Eigenschaften stammen ursprünglich aus SVG.

CSS

        .svgEllipse {
            background-image: linear-gradient(#92d9f8, #ffff7f, #ffa618)
        }

        .svgEllipse ellipse {
            fill: #a551cb;
            rx: 20px;
            ry: 40%;
            cx: 50%;
            cy: 50%;
            transform-origin: 50% 50%;
        }

        .svgEllipse ellipse:nth-child(1) {
            transform: rotate(30deg);
        }

        .svgEllipse ellipse:nth-child(2) {
            transform: rotate(60deg);
        }

        .svgEllipse ellipse:nth-child(3) {
            transform: rotate(90deg);
        }

        .svgEllipse ellipse:nth-child(4) {
            transform: rotate(120deg);
        }

        .svgEllipse ellipse:nth-child(5) {
            transform: rotate(150deg);
        }

        .svgEllipse ellipse:nth-child(6) {
            transform: rotate(180deg);
        }

SVG Direkt einbinden

<img src="../images/svg.svg" alt="SVG" width="100">
<embed src="../images/svg1.svg" width="100">
<object data="../images/html5_logo.svg" width="100"></object>

Filtereigenschaften

In SVG lassen sich Filter definieren. Auch die mit CSS definierten Filter stammen ursprünglich aus SVG.

Siehe dazu dieses Beispiel

CSS Tipps / Farben / Filter