Moderne Web-Technologien – SVG

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

  1. Erstellen Sie eine einfache Zeichnung in Illustrator
  2. Speichern Sie die Datei über das Menü Datei > Speichern im Format SVG (nicht komprimiert):
    svg_01
  3. 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
    svg_02
  4. 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

Comments are closed.