Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 12. Februar 2019

SVG & CSS: Was geht, was nicht in der Gestaltung per Stylesheet

SVG hat sich als Format für Vektorgrafiken im Browser etabliert. Grafikprogramme wie Adobes Illustrator unterstützen das Speichern in diesem Format und moderne Browser können sie problemlos darstellen. Da SVG-Grafiken wie auch HTML-Dokumente über eine Auszeichnungssprache erstellt werden, ist die Erstellung und Bearbeitung per Texteditor möglich. Für die Gestaltung von SVG-Grafiken kann man zudem auf Stylesheets zurückgreifen. Was den Einsatz von CSS betrifft, gibt es neben vielen Gemeinsamkeiten zu HTML jedoch auch einige Unterschiede zu beachten.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

svg_css

Anzeige

SVG-Attribute und CSS-Eigenschaften

Zwischen HTML und CSS gibt es eine klare Trennung: HTML ist für Inhalt und Struktur zuständig, CSS für die Gestaltung. Diese Trennung gibt es im SVG-Format so nicht. Daher wird die Gestaltung von Formen und Texten in der Regel nicht per CSS, sondern über Elementattribute geregelt:

<rect x="10" y="10" width="300" height="100" fill="red" stroke="green" stroke-width="2" />

Im Beispiel wird ein Rechteck gezeichnet, welches per „fill“ eine Farbe erhält. Die Rahmenfarbe und -stärke wird über die Attribute „stroke“ und „stroke-width“ vergeben. Alternativ kann das Aussehen des Rechtecks auch per CSS gestaltet werden:

<rect x="10" y="10" width="300" height="100" style="fill: red; stroke: green; stroke-width: 2" />

Dabei setzt man die Attribute einfach als CSS-Eigenschaften ein. Allerdings funktioniert der Gebrauch von SVG-Attributen als entsprechende CSS-Eigenschaft nicht bei allen Attributen. Positions- sowie Breiten- und Höhenangaben lassen sich nicht per CSS auszeichnen. Daher sind „x“ und „y“ sowie „width“ und „height“ im Beispiel weiterhin als Attribut angegeben.

Wie auch in HTML-Dokumenten lassen sich CSS-Eigenschaften über eine Klasse oder ID einem Element zuordnen. So ist es im SVG-Format möglich, das Aussehen mehrerer Elemente über eine Klasse zu definieren.

<style>
  .beispiel {
    fill: red;
    stroke: green;
    stroke-width: 2;
  }
</style>

<rect x="10" y="10" width="300" height="100" class="beispiel" />

Da das SVG-Format nicht zwischen einem Head- und Bodybereich unterscheidet, teilen sich Stylesheets und die eigentlichen Inhalte gemeinsam das SVG-Element, welches vergleichbar ist mit dem HTML-Element.

Pseudoklassen verwenden

Auch der Einsatz von Pseudoeklassen wie beispielsweise „:hover“ ist innerhalb von SVG-Grafiken möglich – sogar in Kombination mit der CSS3-Eigenschaft „transition“.

<style>
  .beispiel {
    fill: red;
    stroke: green;
    stroke-width: 2;
    transition: all 2s ease;
  }
  .beispiel:hover {
    fill: blue;
  }
</style>

Bewegt man sich über Elemente, denen die Klasse „beispiel“ zugewiesen ist, ändert sich die Füllfarbe von rot nach blau. Damit der Effekt sichtbar ist, darf die SVG-Grafik allerdings nicht per IMG-Element in ein HTML-Dokument eingebunden sein, sondern per EMBED- oder IFRAME-Element:

<embed src="beispiel.svg" />

Das IMG-Element stellt zwar die SVG-Grafik dar, ignoriert aber Hovereffekte und Transitions. Neben der CSS3-Eigenschaft „transition“ ist die Verwendung der „transform“-Eigenschaft möglich. Elemente können auf diese Weise beispielsweise gedreht oder skaliert werden.

<style>
  .beispiel:hover {
    fill: blue;
    transform: rotate(20deg);
  }
</style>

Es empfiehlt sich auch hier, die neuen CSS3-Eigenschaften um die jeweiligen Vendor-Präfixe zu ergänzen, um möglichst viele Browser abdecken zu können. Während Chrome und Firefox die Eigenschaften problemlos interpretieren, verweigert sich der Internet Explorer selbst in der aktuellen Version, obwohl er die CSS3-Eigenschaften innerhalb von HTML-Dokumenten durchaus versteht.

Media Queries und SVG

Ebenfalls möglich, ist der Einsatz von Media Queries innerhalb von SVG-Grafiken. So lassen sich SVG-Grafiken für unterschiedliche Auflösungen anpassen:

<style>
  @media only screen and (max-width: 800px) {
    .beispiel {
      display: none;
    }
  }
</style>

Im Beispiel werden alle Elemente mit der Klasse „beispiel“ nicht angezeigt, sobald die dargestellte Breite der SVG-Grafik kleiner als 800 Pixel ist. Wird eine Grafik per IMG-, EMBED- oder IFRAME-Element in ein HTML-Dokument eingebunden, gilt hierbei die Breite des einbindenden Elementes, nicht die des HTML-Dokumentes.

<embed src="beispiel.svg" width="500" />

Im Beispiel würden Elemente mit der Klasse „beispiel“ nicht dargestellt, da die SVG-Grafik eine Breite von 500 Pixeln hat.

Media Queries in SVG-Grafiken bieten sich auch an, um das Aussehen für den Druck zu optimieren.

<style>
  @media only print {
    .beispiel {
      fill: none;
    }
  }
</style>

Im Beispiel wird bei der Druckausgabe auf die Füllfarbe verzichtet. Der Einsatz von Stylesheets in SVG-Grafiken bietet demnach große Vorteile. Ältere Browser und der letzte Internet Explorer machen jedoch nicht immer mit.

(Der Beitrag erschien zuerst im Dezember 2013 und wird seitdem aktuell gehalten. Das letzte Update erfolgte am 10. Februar 2019.)

(Artikelbild: Depositphotos)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.