Moderne Web-Technologien – SVG
Einleitung
Bei modernen Web-Technologien ist meist die Rede von HTML und CSS. Es gibt aber verschiedene andere, unbekanntere Technologien die auch unter diesen Begriff fallen. Eine davon sind die Scalable Vector Graphics (SVG).
Einsatzgebiet
SVG erlaubt, mit einfachen Befehlen vektorbasierte Zeichnungen zu kreieren und diese in HTML-Seiten einzubinden. Die Grafiken lassen sich ohne Qualitätsverlust beliebig skalieren. Das heisst, beim Einsatz eines Responsive Web Designs kann für kleine Smartphone- und grosse TV-Bildschirme immer dieselbe SVG-Grafik verwendet werden. Das ist ein wesentlicher Unterschied zu Bildern.
SVG eignet sich für das Präsentieren von Zeichnungen, Logos, Diagrammen, Lageplänen etc. Adobe Illustrator eignet sich für das Erstellen der Vekorgrafiken. Neuere Versionen von Firefox, Internet Explorer 9, Google Chrome, Opera und Safari unterstützen den Standard.
Herkunft
SVG ist ein Standard des W3C und basiert auf XML. Version 1.1 ist eine W3C Recommendation, ebenso SVG Tiny 1.2 für mobile Geräte.
Funktionsübersicht
Mit SVG können einfache geometrische Formen (wie Rechteck, Kreis, Linie, Polygon, Pfade) erstellen, füllen und mit Filtern und Farbverläufen versehen. Die Figuren können mit CSS formatiert und auch animiert werden.
Mini-Tutorial
- Erstellen Sie eine einfache Zeichnung in Illustrator
- Speichern Sie die Datei über das Menü Datei > Speichern im Format SVG (nicht komprimiert):
- Das Dokument wurde von Illustrator im SVG-Format gespeichert und kann in dieser Software jederzeit weiter bearbeitet werden. Für das Einbinden ins Web ist es aber nicht geeignet. Mit Vorteil wird die Datei über den SVG Optimizer optimiert
- In einem HTML-Editor kann nun der Code der optimierten SVG-Datei eingefügt werden.
[code]
html>
<html>
<head>
<meta class="hiddenSpellError" />class="hiddenSpellError" />charset="utf-8">
<title>SVG</title>
</head>
<body>
<svg class="hiddenSpellError">class="hiddenSpellError">xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"></svg>
<style>
.style0{
stroke: #1A171B;
stroke-miterlimit: 10;
fill: #FF0033;
}
</style>
points="26.6,7.8 32.2,19.3 44.9,21.1 35.7,30.1 37.9,42.7 26.6,36.7 15.2,42.7 17.4,30.1 8.2,21.1 20.9,19.3"/>
</svg>
</body>
</html>
[/code]
Interessante Links
- SVG Unterstützung
- Animation mit SVG
- Responsive Web Design mit SVG