SVG - ein Format für alle Fälle bearbeitet von Matthias Scharwies 23.11.2016 21:01 <p>Seit 15 Jahren gilt SVG als das nächste große Ding im Webdesign. In einer Serie soll kurz vorgestellt werden, warum so große Hoffnungen in SVG gesetzt wurden und wie Sie SVG in Ihren Projekten einsetzen können.</p> <p><!--more--></p> <p>SVG ist die Abkürzung für skalierbare Vektorgrafiken (Scalable Vector Graphics), die vom W3C 2001 als Alternative zu proprietären Entwürfen entwickelt wurde. Grundlegende Schwäche der Vergangenheit, die den schnellen Durchbruch verhinderte, war die mangelnde Browserunterstützung, die den Einsatz von externen Plugins notwendig machte. Mittlerweile kann SVG aber in allen Browsern (IE9+) problemlos eingesetzt werden.</p> <h2>Einbindung</h2> <p>SVG-Grafiken können entweder inline innerhalb eines <em>svg</em>-Elements an jeder Stelle einer HTML5-Webseite eingebunden oder auch als eigene Grafikdatei durch ein <em>img</em>- oder <em>object</em>-Element referenziert werden.</p> <pre><code><svg width="300" height="200" viewBox="0 0 3 2"> ... </svg></code></pre> <p>Durch die direkte Einbindung ist die SVG-Grafik Teil des Dokuments und kann mit CSS gestaltet werden. IDs innerhalb der Grafik können als interne Anker genutzt werden; aus der Grafik kann ebenfalls auf andere Anker verlinkt werden.</p> <pre><code><img src="Self-Logo.svg" alt="self-Logo"> <object data="Self-Logo.svg" type="image/svg+xml"> <!-- Fallback --> Ihr Browser kann leider kein SVG darstellen. Diese Grafik zeigt das Self-Logo. </object></code></pre> <p>Während die Einbindung mit dem <em>img</em>-Element möglich ist, bietet die Einbindung als Multimedia-Objekt die Möglichkeit, bei <em>:hover</em> oder <em>:focus</em> CSS-Eigenschaften zu verändern.</p> <h2> Vorteile </h2> <h3> Verlustfreie Vergrößerung</h3> <p><img src="https://blog.selfhtml.org/images/f8d36248-5e29-11eb-8aa6-b42e9947ef30.png?size=medium" alt="flagge-frankreich" width="300" height="200" class="alignright size-full wp-image-1119" /><br> SVG bietet als XML-Dialekt ein Set von Elementen, um geometrische Grundformen, Polygone und unregelmäßige Pfade mit Linien und Kurven zu zeichnen und dann mit Farben, Verläufen und frei definierbaren Mustern zu füllen. Diese Vektorgrafiken können im Unterschied zu Rastergrafiken beliebig skaliert werden und bleiben dabei immer gestochen scharf, was sie für responsives Webdesign prädestiniert.</p> <pre><code><svg width="300" height="200" viewBox="0 0 3 2"> <desc>Flagge Frankreichs</desc> <rect x="0" y="0" width="1" height="2" fill="#0055A4" /> <rect x="1" y="0" width="1" height="2" fill="white" /> <rect x="2" y="0" width="1" height="2" fill="#EF4531" /> </svg></code></pre> <p><a href="http://wiki.selfhtml.org/wiki/SVG/Tutorials/Grundformen#Rechtecke">Diese Grafik</a> ist eigentlich nur 2 Pixel hoch und 3 Pixel breit, wird durch die <code><a href="http://wiki.selfhtml.org/wiki/viewBox">viewBox</a></code> aber auf die gewünschte Größe skaliert - ohne jeden Qualitätsverlust!</p> <h3>Gestaltung durch CSS</h3> <p>Die Präsentationsattribute können bequem mit CSS festgelegt werden. Wie in <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Icons-2.html">diesem Beispiel</a> werden Icons aus verschiedenen Grundformen gebildet und mit CSS gestaltet.</p> <p><a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Icons-2.html"><img src="https://blog.selfhtml.org/images/f8d7306c-5e29-11eb-ab1c-b42e9947ef30.png?size=medium" alt="svg-icons-1" width="730" height="100" class="alignnone size-full wp-image-1177" /></a></p> <pre><code><a href="" xlink:href=""> <desc>Icon für Home-Button</desc> <rect class="background" x="1" y="1" width="59" height="59" /> <rect x="10" y="35" width="40" height="24" fill="#ccc" /> <rect x="40" y="15" width="5" height="15" fill="black"/> <path d="M8,35 l22,-20 l22,20 z" fill="#c32e04" /> <rect x="15" y="45" width="8" height="14" class="window" /> <rect x="35" y="45" width="8" height="8" class="window" /> </a> </code></pre> <h3>Animation und Hover-Effekte</h3> <p>Mit SVG sind auch Hovereffekte und kleine Animationen möglich. Während der SVG-eigene Standard SMIL (mehr darüber in Teil 3) vom IE und bald auch Chrome nicht unterstützt wird, sind aber in allen modernen Browsern CSS-Animationen möglich:</p> <p><a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Icons-2.html"><img src="https://blog.selfhtml.org/images/f8db94b8-5e29-11eb-8af1-b42e9947ef30.png?size=medium" alt="svg-icons-2" width="374" height="100" class="alignnone size-full wp-image-1178" /></a></p> <pre><code>a > .background { fill: none; } a:hover > .background, a:focus > .background { fill: #fffbf0; stroke: #e7c157; stroke-width:1; }</code></pre> <p>Bei <code>:hover</code> oder <code>:focus </code>verändert sich der Hintergrund, sodass schnell klar ist, welcher Link im Fokus ist. Um dies zu erreichen, wird der Grafik ein Rechteck mit der Klasse <em>.background</em> in den gewünschten Dimensionen untergelegt. Normalerweise ist es transparent - bei <em>:hover</em> und <em>:focus</em> erhält es eine gelbe Füllung, die als Hintergrund für das Icon wirkt.</p> <h3>Zugänglichkeit</h3> <p>Allein, dass die Grundformen sprechende Namen haben ist ein Vorteil gegenüber Rastergrafiken. Darüber hinaus können Sie aber den Code durch Angabe von zugänglichen Metaddaten innerhalb von title- und desc-Elementen (<em>description</em> - engl. für Beschreibung) für Menschen mit Seheinschränkungen zugänglich machen.</p> <pre><code><svg> <title>aussagekäftiger Titel</title> <defs> <desc>Definitionsabschnitt mit Verläufen und Mustern</desc> ... </code></pre> <h2>Einsatzbereiche</h2> <p>Die Skalierbarkeit und die Möglichkeit der Gestaltung durch CSS sind perfekt für den Einsatz als responsive Icons, die Sie mit CSS farbig gestalten gestalten können.</p> <p>Auch wenn Image-Replacement ein wenig aus der Mode gekommen ist, können Sie Ihre Überschriften durch <a href="http://wiki.selfhtml.org/wiki/SVG/Tutorials/Text">SVG-Texte</a> mit extravaganten Muster- und Filtereffekten ersetzen - die Texte sind natürlich weiterhin kopierbar und von Suchmaschinen indizierbar.</p> <p>Die Verbindung von Vektorgrafiken und Text bei SVG-Grafiken eignet sich besonders für Infografiken und Datenvisualisierungen, für die es mit d3.js (Data Driven documents) und Raphael bereits mächtige Frameworks gibt.</p> <p>Weiterhin ist die Einbindung von Rastergrafiken möglich, die dann mit Masken, Beschneidungen und Filter vielfach verändert werden können. Eine weitere Einsatzmöglichkeit bietet sich hier bei <a href="http://wiki.selfhtml.org/wiki/SVG/Tutorials/responsive_Imagemaps">responsiven Imagemaps</a>, bei denen die Rastergrafiken mit verweis-sensitiven SVG-Formen unterlegt werden, die dann auf andere Seiten verlinken.</p> <p>Im Selfhtml-Wiki finden Sie eine umfangreiche <a href="https://wiki.selfhtml.org/wiki/SVG">SVG-Dokumentation </a>mit vielen Tutorials aus Anwendung und Praxis, sowie für den schnellen Überblick aktuelle <a href="https://wiki.selfhtml.org/wiki/SVG/Elemente">Referenz-Tabellen</a> für alle Elemente und Attribute.</p> <p>Der nächste Teil der Serie setzt sich mit den <a href="https://blog.selfhtml.org/2016/11/28/svg-2-was-lange-waehrt/">Neuerungen von SVG 2</a>, das vom W3C nächstes Jahr endgültig verabschiedet werden soll, auseinander. Weitere Teile behandeln <a href="https://blog.selfhtml.org/2017/04/15/svg-animationen-zum-leben-erwecken/">Animationen in SVG</a>, Infografiken und Datenvisualisierungen.</p>
SVG - ein Format für alle Fälle bearbeitet von Matthias Scharwies 19.06.2021 06:42 <p>Seit 15 Jahren gilt SVG als das nächste große Ding im Webdesign. In einer Serie soll kurz vorgestellt werden, warum so große Hoffnungen in SVG gesetzt wurden und wie Sie SVG in Ihren Projekten einsetzen können.</p> <p><!--more--></p> <p>SVG ist die Abkürzung für skalierbare Vektorgrafiken (Scalable Vector Graphics), die vom W3C 2001 als Alternative zu proprietären Entwürfen entwickelt wurde. Grundlegende Schwäche der Vergangenheit, die den schnellen Durchbruch verhinderte, war die mangelnde Browserunterstützung, die den Einsatz von externen Plugins notwendig machte. Mittlerweile kann SVG aber in allen Browsern (IE9+) problemlos eingesetzt werden.</p> <h2>Einbindung</h2> <p>SVG-Grafiken können entweder inline innerhalb eines <em>svg</em>-Elements an jeder Stelle einer HTML5-Webseite eingebunden oder auch als eigene Grafikdatei durch ein <em>img</em>- oder <em>object</em>-Element referenziert werden.</p> <pre><code class="block">&</p> <svg width="300" height="200" viewBox="0 0 3 2"> ... </svg></code></pre> <p>Durch die direkte Einbindung ist die SVG-Grafik Teil des Dokuments und kann mit CSS gestaltet werden. IDs innerhalb der Grafik können als interne Anker genutzt werden; aus der Grafik kann ebenfalls auf andere Anker verlinkt werden.</p> <p pre><code><img src="Self-Logo.svg" alt="self-Logo"> <object data="Self-Logo.svg" type="image/svg+xml"> <!-- Fallback --> Ihr Browser kann leider kein SVG darstellen. Diese Grafik zeigt das Self-Logo. </object></code></pre> <p>Während die Einbindung mit dem <em>img</em>-Element möglich ist, bietet die Einbindung als Multimedia-Objekt die Möglichkeit, bei <em>:hover</em> oder <em>:focus</em> CSS-Eigenschaften zu verändern.</p> <h2> Vorteile </h2> <h3> Verlustfreie Vergrößerung</h3> <p><img src="https://blog.selfhtml.org/images/f8d36248-5e29-11eb-8aa6-b42e9947ef30.png?size=medium" alt="flagge-frankreich" width="300" height="200" class="alignright size-full wp-image-1119" /><br> SVG bietet als XML-Dialekt ein Set von Elementen, um geometrische Grundformen, Polygone und unregelmäßige Pfade mit Linien und Kurven zu zeichnen und dann mit Farben, Verläufen und frei definierbaren Mustern zu füllen. Diese Vektorgrafiken können im Unterschied zu Rastergrafiken beliebig skaliert werden und bleiben dabei immer gestochen scharf, was sie für responsives Webdesign prädestiniert.</p> <pre><code class="block"><</p> t;svg width="300" height="200" viewBox="0 0 3 2"> <desc>Flagge Frankreichs</desc> <rect x="0" y="0" width="1" height="2" fill="#0055A4" /> <rect x="1" y="0" width="1" height="2" fill="white" /> <rect x="2" y="0" width="1" height="2" fill="#EF4531" /> </svg></code></pre> <p><a href="http://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/Flaggen_mit_SVG_zeichnen#Rechtecke">Diese Grafik</a> ist eigentlich nur 2 Pixel hoch und 3 Pixel breit, wird durch die <code><a href="http://wiki.selfhtml.org/wiki/SVG/responsiv#inline-SVG_responsiv_darstellen">viewBox</a></code> aber auf die gewünschte Größe skaliert - ohne jeden Qualitätsverlust!</p> <h3>Gestaltung durch CSS</h3> <p>Die Präsentationsattribute können bequem mit CSS festgelegt werden. Wie in <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Icons-2.html">diesem Beispiel</a> werden Icons aus verschiedenen Grundformen gebildet und mit CSS gestaltet.</p> <p><a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Icons-2.html"><img src="https://blog.selfhtml.org/images/f8d7306c-5e29-11eb-ab1c-b42e9947ef30.png?size=medium" alt="svg-icons-1" width="730" height="100" class="alignnone size-full wp-image-1177" /></a></p> <pre><c code><a href="" xlink:href=""> <desc>Icon für Home-Button</desc> <rect class="background" x="1" y="1" width="59" height="59" /> <rect x="10" y="35" width="40" height="24" fill="#ccc" /> <rect x="40" y="15" width="5" height="15" fill="black"/> <path d="M8,35 l22,-20 l22,20 z" fill="#c32e04" /> <rect x="15" y="45" width="8" height="14" class="window" /> <rect x="35" y="45" width="8" height="8" class="window" /> </a> </code></pre> <h3>Animation und Hover-Effekte</h3> <p>Mit SVG sind auch Hovereffekte und kleine Animationen möglich. Während der SVG-eigene Standard SMIL (mehr darüber in Teil 3) vom IE und bald auch Chrome nicht unterstützt wird, sind aber in allen modernen Browsern CSS-Animationen möglich:</p> <p><a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Icons-2.html"><img src="https://blog.selfhtml.org/images/f8db94b8-5e29-11eb-8af1-b42e9947ef30.png?size=medium" alt="svg-icons-2" width="374" height="100" class="alignnone size-full wp-image-1178" /></a></p> <pre>< <code>a > .background { fill: none; } a:hover > .background, a:focus > .background { fill: #fffbf0; stroke: #e7c157; stroke-width:1; }</code></pre> <p>Bei <code>:hover</code> oder <code>:focus </code>verändert sich der Hintergrund, sodass schnell klar ist, welcher Link im Fokus ist. Um dies zu erreichen, wird der Grafik ein Rechteck mit der Klasse <em>.background</em> in den gewünschten Dimensionen untergelegt. Normalerweise ist es transparent - bei <em>:hover</em> und <em>:focus</em> erhält es eine gelbe Füllung, die als Hintergrund für das Icon wirkt.</p> <h3>Zugänglichkeit</h3> <p>Allein, dass die Grundformen sprechende Namen haben ist ein Vorteil gegenüber Rastergrafiken. Darüber hinaus können Sie aber den Code durch Angabe von zugänglichen Metaddaten innerhalb von title- und desc-Elementen (<em>description</em> - engl. für Beschreibung) für Menschen mit Seheinschränkungen zugänglich machen.</p> <pre><code class="block"><</p> ;svg> <title>aussagekäftiger Titel</title> <defs> <desc>Definitionsabschnitt mit Verläufen und Mustern</desc> ... </code></pre> <h2>Einsatzbereiche</h2> <p>Die Skalierbarkeit und die Möglichkeit der Gestaltung durch CSS sind perfekt für den Einsatz als responsive Icons, die Sie mit CSS farbig gestalten gestalten können.</p> <p>Auch wenn Image-Replacement ein wenig aus der Mode gekommen ist, können Sie Ihre Überschriften durch <a href="http://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/Texteffekte">SVG-Texte</a> mit extravaganten Muster- und Filtereffekten ersetzen - die Texte sind natürlich weiterhin kopierbar und von Suchmaschinen indizierbar.</p> <p>Die Verbindung von Vektorgrafiken und Text bei SVG-Grafiken eignet sich besonders für Infografiken und Datenvisualisierungen, für die es mit d3.js (Data Driven documents) und Raphael bereits mächtige Frameworks gibt.</p> <p>Weiterhin ist die Einbindung von Rastergrafiken möglich, die dann mit Masken, Beschneidungen und Filter vielfach verändert werden können. Eine weitere Einsatzmöglichkeit bietet sich hier bei <a href="http://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/responsive_Imagemaps">responsiven Imagemaps</a>, bei denen die Rastergrafiken mit verweis-sensitiven SVG-Formen unterlegt werden, die dann auf andere Seiten verlinken.</p> <p>Im Selfhtml-Wiki finden Sie eine umfangreiche <a href="https://wiki.selfhtml.org/wiki/SVG">SVG-Dokumentation </a>mit vielen Tutorials aus Anwendung und Praxis, sowie für den schnellen Überblick aktuelle <a href="https://wiki.selfhtml.org/wiki/Referenz:SVG">Referenz-Tabellen</a> für alle Elemente und Attribute.</p> <p>Der nächste Teil der Serie setzt sich mit den <a href="https://blog.selfhtml.org/2016/11/28/svg-2-was-lange-waehrt/">Neuerungen von SVG 2</a>, das vom W3C nächstes Jahr endgültig verabschiedet werden soll, auseinander. Weitere Teile behandeln <a href="https://blog.selfhtml.org/2017/04/15/svg-animationen-zum-leben-erwecken/">Animationen in SVG</a>, Infografiken und Datenvisualisierungen.</p>
nicht angemeldet nicht angemeldet
