PC Magazin
Vektorgra ken fürs Web
Webseiten exibel und dynamisch gestalten
S calable Vector Graphics (kurz SVG) sind vektorbasierte Gra ken für das Web. Sie können ebenso wie pixelbasierte Gra ken per
url("hintergrund.svg"); }
Das SVG ist ein XML-basiertes Dateiformat. Sie könnten es direkt mit einem Texteditor schreiben. In den meisten Fällen werden Sie die Gra k aber mit einem Vektorprogramm wie Adobe Illustrator, Af nity Designer oder Inkscape erstellen, exportieren und dann in einem Texteditor optimieren.
Der große Vorteil ist, dass ein SVG für alle Größen und Au ösungen ohne Qualitätsverlust skaliert wird. Das SVG ist daher das richtige Format für Logos, Icons, Infogra - ken und vektorbasierte Illustrationen. Alle modernen Browser ab dem Internet Explorer 9 können SVG grundsätzlich darstellen. Innerhalb eines SVG können eine ganze Reihe von gra schen Elementen zum Einsatz kommen: Rechteck, Kreis, Ellipse, Linie, Pfad, Polygon, Polygonzug, aber auch Text
und andere (pixelbasierte) Bilder. Nehmen wir als Beispiel ein einfaches Rechteck mit den Maßen 200 x 300 Pixel, das bei den Koordinaten 10, 20 beginnt. Innerhalb eines SVG können Maßeinheiten verwendet werden, die aus CSS bekannt sind, etwa px, em, %. Es ist auch möglich, keine konkreten Einheiten anzugeben. In dem Fall entsprechen die Maße user units, was im Web effektiv auf Pixel hinausläuft.
Dazu kommen ein paar Basisdeklarationen und -informationen: Titel des SVG Längere Beschreibung fill="green" />
SVG
Der
wird in einem Browser angezeigt, wenn der Nutzer mit der Maus über dem SVG hovert. Die <desc> wird nicht sichtbar angezeigt und kann für die Barrierefreiheit genutzt werden. Durch das XMLFormat ist ein SVG nicht nur für Menschen lesbar, es kann auch einfach von Suchmaschinen indexiert werden.</p><p>Inline-SVG mit CSS anpassen</p><p>Sie können ein SVG auch direkt in das HTML einer Webseite einbauen. Sie sparen sich so zusätzliche Aufrufe, die externe Gra ken erzeugen würden. Auf der anderen Seite wird das Markup etwas unübersichtlicher. Aber meistens geht es um ein paar Stellen in Templates, mit denen Sie nicht ständig arbeiten müssen.</p><p>Ein Inline-SVG innerhalb von HTML bietet einen weiteren Vorteil: Sie können Elemente innerhalb des SVG direkt mit CSS ansprechen und verändern. Nehmen wir ein Search-Icon in einem Link: <a href=“/search“><svg xmlns=“http:// www.w3.org/2000/svg“viewBox=“0 0 24 24“><path fill=“white“d=“M23.414,22l6.389-6.389a9.023,9.023,0,1,01.414,1.414L22,23.414ZM3,10a7,7,0, 1,1,7,7A7.008,7.008,0,0,1,3,10Z“/></ svg></a></p><p>Das Icon wird zunächst in weiß auf dem dunklen Hintergrund des Links dargestellt. Da das SVG direkt eingebunden ist, können Sie die Farbe des path bei einem Hover oder Focus per CSS anpassen: a { display: inline-block; width: 40px; height: 40px; padding: 20px; background: #333; } a:hover, a:focus { background: #CCC; } a:hover path, a:focus path {fill:black;}</p><p>Für komplexere Effekte können Sie Elemente innerhalb der Gra k mit ids und Klassen ausstatten. So können Sie etwa eine interaktive Infogra k erstellen, bei der auf einer Deutschlandkarte Informationen zu einem Bundesland angezeigt werden, wenn ein Benutzer über dem Land hovert. Dabei orientiert sich die Fläche für den Hover-Effekt an den tatsächlichen Umrissen des Bundeslandes und nicht etwa an einem Rechteck.</p><p>SVG generieren und optimieren</p><p>Sie können Ihre Gra k in einem Vektorprogramm erstellen, als SVG exportieren und direkt auf der Website einsetzen. Aber es emp ehlt sich, die Datei vorher in einem Texteditor zu öffnen und manuell zu bereinigen. Denn alle Programme erzeugen zusätzliche Anweisungen im SVG, die Sie nicht benötigen.</p><p>Angenommen, Sie erstellen in Illustrator einen schwarzen Kreis mit einem Durchmesser von 100 Pixel und speichern das Ergebnis als SVG mit den Standardeinstellungen ab – dann erhalten Sie folgende Datei: <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator</p><p>22.1.0, SVG Export Plug-In .</p><p>SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/ SVG/1.1/DTD/svg11.dtd"></p><p><svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/ xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"> <circle cx="50" cy="50" r="50"/> </svg></p><p>Das ist eine ganze Menge an Informationen, wenn Sie wissen, dass es auch kürzer ginge: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50"/></svg></p><p>Insbesondere die Informationen zur XMLVersion, dem Generator und dem Doctype sind nicht nötig. Außerdem können Sie einige Attribute im SVG-Element einsparen. In diesem einfachen Beispiel schrumpft die Datei von 495 auf 100 Byte. Sie sparen knapp 80 %. Wenn Sie mehrere Icons auf der Website einsetzen, lohnen sich solche Optimierungen, zumal sie schnell zu machen sind. In anderen Fällen kann ein Export aus Illustrator aber auch für deutlich mehr Ballast sorgen. Denn Illustrator speichert auch unsichtbare Ebenen ab. Das kann nützlich sein, wenn Sie diese Ebenen für bestimmte Effekte über CSS ein- und ausschalten möchten. In vielen Fällen müssen Sie solche nicht benötigten unsichtbaren Ebenen aber manuell entfernen.</p><p>Auch bei of ziellen Icons können manchmal noch Kleinigkeiten optimiert werden. Das Logo-Paket von Twitter enthält zum Beispiel dieses SVG für den blauen Vogel: <svg id="Logo_FIXED" data-name="Logo — FIXED" xmlns="http://www. w3.org/2000/svg" viewBox="0 0 400 400"><defs><style>.cls-1{fill:none;}. cls-2{fill:#1da1f2;}</style></ defs><title>Twitter_Logo_Blue</ title><rect class="cls-1" width="400" height="400"/><path class="cls-2" d="[…]"/></svg></p><p>Man sieht auf den ersten Blick, dass die Datei ein paar unnötige Elemente enthält. Etwa die id, den unpassenden <title>, die</p><p>Style-Angaben und das unnötige Rechteck. Sie erhalten die gleiche Gra k über: <svg xmlns="http://www.w3.org/2000/ svg' viewBox="0 0 400 400"><path d="[…]" fill="#1da1f2"/></svg></p><p>Statt die SVG manuell zu bereinigen, können Sie auch Services im Netz einsetzen. Gute Ergebnisse liefert die Site vecta.io/nano.</p><p>In manchen Beispielen enthält das SVG Werte für width und height. Die Werte legen die Dimensionen der Gra k fest. Man könnte meinen, das reiche, um mit dem Bild sauber zu arbeiten. Tatsächlich kann es aber zu Problemen führen – je nachdem, wie Sie das Bild einbauen und per CSS verändern. Nehmen wir ein Bild, das ursprünglich für 400 x 400 Pixel gedacht ist, per <img> eingebaut wird, aber per CSS verzerrt wird. // SVG</p><p><svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"></p><p><path … /></p><p></svg></p><p>// HTML</p><p><img src="testbild.svg" alt=""></p><p>// CSS img { width: 400px; height: 200px; }</p><p>Hier zeigen Firefox und Chrome das Bild verzerrt an. Der Internet Explorer hingegen schneidet das Bild bei 200 Pixel ab. In der Regel wollen Sie ein SVG aber weder verzerren noch abschneiden. Eine Vektorgra k sollte einfach passend zum umgebenden Raum skalieren.</p><p>Statt mit width und height zu arbeiten ist es daher sinnvoll, das Attribut viewBox zu verwenden. Damit legen Sie fest, welcher</p><p>Bereich eines SVG zu sehen ist. Für reguläre SVG reicht es, dort die Koordinaten 0,0 sowie Breite und Höhe des SVG anzugeben. In diesem Beispiel entspricht das also: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"></p><p>Wenn Sie dieses SVG als <img> einbauen und über CSS „verzerren“, zeigen alle modernen Browser/Internet Explorer das gleiche Verhalten: Das SVG wird auf eine Höhe von 200px skaliert und in der Mitte einer Box von 400 x 200 Pixel angezeigt.</p><p>Bei einem optimierten SVG werden Sie also immer die Werte für width und height löschen und stattdessen nur mit der viewBox arbeiten. Das SVG wird so immer den maximalen möglichen Platz einnehmen; egal, ob das SVG Inline, als <img> oder als Hintergrundbild eingebunden wird.</p><p>Bei komplexeren SVG-Gra ken wäre es auch möglich, Elemente darin über ids und CSS für breite und schmale Bildschirme anders anzuordnen.</p><p>Fallback-Lösungen für alte Browser</p><p>Der Internet Explorer unterstützt SVG seit Version 9. Falls Sie in einem Projekt noch den Internet Explorer 8 aus dem Jahr 2009 (oder gar ältere Versionen) berücksichtigen müssen, benötigen Sie eine FallbackLösung. Eine Möglichkeit bietet Modernizr ( modernizr.com). Das Tool überprüft, ob der aktuelle Browser SVG unterstützt und ergänzt dann die Klasse svg im html-Element der Seite. Sie können dann mit CSS auf dieser Klasse aufbauen – oder Sie nutzen die entsprechende Funktion für JavaScript: if (!Modernizr.svg) {</p><p>/* Anpassungen für alte Browser, die SVG nicht verstehen */ }</p><p>Alternativ sorgen Sie direkt im img-Element dafür, im Zweifel ein PNG zu laden: <img src="logo.svg" onerror="this. src='fallback-logo.png'; this. onerror=null;" alt="Logo"></p><p>Diese beiden Lösungen funktionieren dementsprechend nur, wenn im Browser JavaScript aktiviert ist.</p><p>Falls Sie bei den Fallbacks nur Internet Explorer berücksichtigen müssen, können Sie auch mit Conditional Comments arbeiten, die der IE bis Version 9 angeboten hat. In dem Fall können Sie eine Fallunterscheidung für ältere IE bis Version 8 einbauen: <!--[if lte IE 8]><img src="logo.png"</p><p>/><![endif]--></p><p><!--[if gt IE 8]><img src="logo.svg"</p><p>/><![endif]--></p><p><!--[if !IE]> --><img src="logo.svg"</p><p>/><!-- <![endif]--></p><p>Viele weitere Features</p><p>Über das einfache Einsatzgebiet für Logos und Icons hinaus bieten SVG eine ganze Reihe weitere Features, mit denen sich ansehnliche Effekte umsetzen lassen. Dazu gehören Filter, Masken und Animationen. Ein paar dieser Möglichkeiten stellen wir im nächsten Artikel vor.</p>
<figure>
<img src="https://i.prcdn.co/img?regionKey=ClGhlQXcfBhn0t5vuAltDQ%3d%3d" alt=" ?? ??"/>
<figcaption>
</figcaption>
</figure>
<figure>
<img src="https://i.prcdn.co/img?regionKey=IWeTmp5rCb4Igvki0RDP7Q%3d%3d" alt=" ?? ?? Alle modernen Browser ab dem Internet Explorer 9 unterstützen SVG mit seinen grundsätzlichen Eigenschaften. Bei fortgeschrittenen Features wie SMILAnimationen ist das allerdings nicht mehr der Fall."/>
<figcaption>
Alle modernen Browser ab dem Internet Explorer 9 unterstützen SVG mit seinen grundsätzlichen Eigenschaften. Bei fortgeschrittenen Features wie SMILAnimationen ist das allerdings nicht mehr der Fall.
</figcaption>
</figure>
<figure>
<img src="https://i.prcdn.co/img?regionKey=XaHSDLEMW4TCc1%2bN2Ai2CA%3d%3d" alt=" ?? ?? Auch bei Elementen innerhalb eines SVG funktionieren :hover, :focus und :target (bit.ly/2NaaZGr)."/>
<figcaption>
Auch bei Elementen innerhalb eines SVG funktionieren :hover, :focus und :target (bit.ly/2NaaZGr).
</figcaption>
</figure>
<figure>
<img src="https://i.prcdn.co/img?regionKey=Q%2bc6xHUIbs0PF0eBIS3bAw%3d%3d" alt=" ?? ?? Das Vektorprogramm Af nity Designer ist eine professionelle, kostengünstige Alternative zu Adobe Illustrator (af nity.serif.com)."/>
<figcaption>
Das Vektorprogramm Af nity Designer ist eine professionelle, kostengünstige Alternative zu Adobe Illustrator (af nity.serif.com).
</figcaption>
</figure>
<figure>
<img src="https://i.prcdn.co/img?regionKey=G7DoiG9UqJXa7PtoDYomJA%3d%3d" alt=" ?? ?? Sie können den Export eines SVG aus Adobe Illustrator etwas anpassen. Aber am Ende werden Sie die Datei doch noch einmal optimieren wollen."/>
<figcaption>
Sie können den Export eines SVG aus Adobe Illustrator etwas anpassen. Aber am Ende werden Sie die Datei doch noch einmal optimieren wollen.
</figcaption>
</figure>
<figure>
<img src="https://i.prcdn.co/img?regionKey=fOePrmXO6JUrlg8078%2bYQw%3d%3d" alt=" ?? ?? Die Website vecta.io/nano optimiert Ihre SVG automatisch. Dabei werden alle unnötigen Attribute entfernt und andere Angaben sinnvoll zusammengefasst."/>
<figcaption>
Die Website vecta.io/nano optimiert Ihre SVG automatisch. Dabei werden alle unnötigen Attribute entfernt und andere Angaben sinnvoll zusammengefasst.
</figcaption>
</figure>
<figure>
<img src="https://i.prcdn.co/img?regionKey=IH5xBcunUALyqjfPGUOYEw%3d%3d" alt=" ?? ?? Snap.svg ist eine der bekannteren Bibliotheken, um SVG zu animieren oder interaktiv zu gestalten."/>
<figcaption>
Snap.svg ist eine der bekannteren Bibliotheken, um SVG zu animieren oder interaktiv zu gestalten.
</figcaption>
</figure>
<figure>
<img src="https://i.prcdn.co/img?regionKey=CPqITmw76NAPG3JzNJVC1Q%3d%3d" alt=" ?? ?? Auf css-tricks.com nden Sie weitere FallbackLösungen für SVG (bit.ly/svg-fallbacks)."/>
<figcaption>
Auf css-tricks.com nden Sie weitere FallbackLösungen für SVG (bit.ly/svg-fallbacks).
</figcaption>
</figure>
</article>
<section>
<h3><a href="/catalog?language=de">Newspapers in German</a></h3>
<h3><a href="/catalog?country=de">Newspapers from Germany</a></h3>
</section>
<footer>
<p><a href="/" class="logo"><span>PressReader</span></a></p>
<nav>
<ul>
<li><a href="https://about.pressreader.com">Work with us</a></li>
<li><a href="https://about.pressreader.com/news/">Blog</a></li>
<li><a href="http://care.pressreader.com/hc/">Help center</a></li>
<li><a href="https://itunes.apple.com/app/pressreader/id313904711?amp%3Bmt=8&mt=8">Download on the App Store</a></li>
<li><a href="https://play.google.com/store/apps/details?id=com.newspaperdirect.pressreader.android">Get it on App Store</a></li>
</ul>
</nav>
<p><a href="https://care.pressreader.com/hc/en-us/articles/206528495-Terms-of-Use" target="_blank">Terms of Use</a> / <a href="https://care.pressreader.com/hc/en-us/articles/205818089-Privacy-Policy" target="_blank">Privacy Policy</a> / <a href="https://care.pressreader.com/hc/en-us/articles/360038010812-Privacy-Notice-for-California-Residents" target="_blank">CCPA</a></p>
<p>© 2003-2024 PressReader</p>
</footer>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments);
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g;
m.parentNode.insertBefore(a, m);
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
</script>
<script>
ga('create', 'UA-44408245-1');
ga('send', 'pageView');
</script>
</body>
</html>
div { background-image: