SVG verwenden

SVG ist ein Bildformat für Vektorgrafiken. Es steht wörtlich für Scalable Vector Graphics (Skalierbare Vektorgrafiken). Im Grunde das, womit man in Adobe Illustrator arbeitet. Man kann SVG recht einfach im Web verwenden, aber es gibt einiges, was man wissen sollte.

Warum überhaupt SVG verwenden?

• Kleine Dateigrößen, die sich gut komprimieren lassen
• Skaliert auf jede Größe, ohne Klarheit zu verlieren (außer sehr klein)
• Sieht auf Retina-Displays großartig aus
• Designkontrolle wie Interaktivität und Filter

Einige SVG-Elemente zum Arbeiten erhalten

Etwas in Adobe Illustrator entwerfen. Hier ist ein Kiwi-Vogel, der auf einem Oval steht.

Beachten Sie, dass das Zeichenbrett direkt an den Kanten des Designs beschnitten ist. Der Canvas ist bei SVG genauso wichtig wie bei PNG oder JPG.

Sie können die Datei direkt aus Adobe Illustrator als SVG-Datei speichern.

Beim Speichern erhalten Sie ein weiteres Dialogfeld für die SVG-Optionen. Ehrlich gesagt, weiß ich nicht viel darüber. Es gibt eine vollständige Spezifikation für SVG-Profile. Ich finde SVG 1.1 funktioniert gut.

Der interessante Teil hier ist, dass Sie entweder auf OK klicken und die Datei speichern oder auf „SVG-Code…“ klicken können, und es öffnet TextEdit (zumindest auf einem Mac) mit dem SVG-Code darin.

Beides kann nützlich sein.

SVG als <img> verwenden

Wenn ich das SVG in eine Datei speichere, kann ich es direkt in einem <img>-Tag verwenden.

<img src="kiwi.svg" alt="Kiwi standing on oval">

In Illustrator war unser Zeichenbrett 612px ✕ 502px.

Das ist genau so groß wie das Bild auf der Seite sein wird, wenn es allein gelassen wird. Sie können die Größe jedoch ändern, indem Sie einfach das img auswählen und seine width oder height ändern, genauso wie Sie es bei einem PNG oder JPG tun könnten. Hier ist ein Beispiel dafür

Check out this Pen!

Browser-Unterstützung

Die Verwendung auf diese Weise hat ihre eigenen spezifischen Browserunterstützungen. Im Wesentlichen: Es funktioniert überall außer bei IE 8 und darunter und Android 2.3 und darunter.

Wenn Sie SVG verwenden möchten, aber auch diese Browser unterstützen müssen, die die Verwendung von SVG auf diese Weise nicht unterstützen, haben Sie Optionen. Ich habe verschiedene Techniken in verschiedenen Workshops behandelt, die ich gehalten habe.

Eine Möglichkeit ist, die Unterstützung mit Modernizr zu testen und die src des Bildes zu ändern

if (!Modernizr.svg) {
  $(".logo img").attr("src", "images/logo.png");
}

David Bushell hat eine wirklich einfache Alternative, wenn Sie mit JavaScript im Markup einverstanden sind

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

SVGeezy kann auch helfen. Wir werden weitere Fallback-Techniken behandeln, wenn dieser Artikel fortschreitet.

SVG als Hintergrundbild verwenden

Ähnlich einfach wie die Verwendung von SVG als Bild, können Sie es in CSS als background-image verwenden.

<a href="/" class="logo">
  Kiwi Corp
</a>

.logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

Beachten Sie, dass wir die Hintergrundgröße auf die Größe des Logo-Elements eingestellt haben. Dies müssen wir tun, sonst sehen wir nur einen kleinen Teil unseres viel größeren ursprünglichen SVG-Bildes. Diese Zahlen sind aspektverhältnisbewusst für die ursprüngliche Größe. Sie könnten jedoch background-size-Schlüsselwörter wie contain verwenden, wenn Sie sicherstellen möchten, dass das Bild passt und die Elternbild genau die richtige Größe hat.

Browser-Unterstützung

Die Verwendung von SVG als Hintergrundbild hat ihre eigenen speziellen Browserunterstützungen, aber es ist im Wesentlichen dasselbe wie die Verwendung von SVG als Bild. Das einzige Problem, das Browser haben, sind IE 8 und darunter und Android 2.3 und darunter.

Modernizr kann uns hier helfen, und zwar auf effizientere Weise als die Verwendung von Bildern. Wenn wir das background-image durch ein unterstütztes Format ersetzen, wird nur eine HTTP-Anfrage statt zwei gemacht. Modernizr fügt dem HTML-Element eine Klassenbezeichnung „no-svg“ hinzu, wenn es SVG nicht unterstützt. Wir verwenden das also.

.main-header {
  background: url(logo.svg) no-repeat top left;
  background-size: contain;
}

.no-svg .main-header {
  background-image: url(logo.png);
}

Eine weitere clevere, progressive Enhancement-orientierte Technik zur Verwendung von SVG als Hintergrundbild besteht darin, es in Verbindung mit mehreren Hintergründen zu verwenden. SVG und mehrere Hintergründe haben eine sehr ähnliche Browserunterstützung. Wenn der Browser mehrere Hintergründe unterstützt, unterstützt er SVG, und die Deklaration funktioniert (und überschreibt jede vorherige Deklaration).

body {
  background: url(fallback.png);
  background-image: url(image.svg), none;
}

Das Problem mit <img> und Hintergrundbild...

Ist, dass man die Innereien des SVG nicht mit CSS steuern kann, wie es bei den folgenden zwei Methoden der Fall ist. Lesen Sie weiter!

SVG "inline" verwenden

Erinnern Sie sich, wie Sie den SVG-Code direkt aus Illustrator erhalten können, während Sie speichern, wenn Sie möchten? (Sie können auch einfach die SVG-Datei in einem Texteditor öffnen und diesen Code kopieren.) Sie können diesen Code direkt in ein HTML-Dokument einfügen und das SVG-Bild wird genauso angezeigt, als hätten Sie es in ein img eingefügt.

<body>

   <!-- paste in SVG code, image shows up!  -->

</body>

Dies kann von Vorteil sein, da das Bild direkt im Dokument geladen wird und keine zusätzliche HTTP-Anfrage benötigt. Mit anderen Worten, es hat die gleichen Vorteile wie die Verwendung eines Data URI. Es hat auch die gleichen Nachteile. Ein potenziell „aufgeblähtes“ Dokument, ein großer Brocken Mist direkt im Dokument, das Sie erstellen möchten, und die Unfähigkeit, es zu cachen.

Wenn Sie eine Backend-Sprache verwenden, die die Datei abrufen und einfügen kann, können Sie zumindest die Autorenerfahrung bereinigen. Zum Beispiel

<?php echo file_get_contents("kiwi.svg"); ?>

Eine kleine PHP-spezifische Sache hier… mir wurde gezeigt, dass file_get_contents() die richtige Funktion hier ist, nicht include() oder include_once(), wie ich sie zuvor verwendet habe. Speziell weil SVG manchmal mit <?xml version="1.0" encoding="UTF-8"?> als erste Zeile exportiert wird, was den PHP-Parser zum Absturz bringt.

Zuerst optimieren

Wahrscheinlich keine große Überraschung, aber das SVG, das Adobe Illustrator Ihnen liefert, ist nicht besonders optimiert. Es enthält eine DOCTYPE- und Generator-Notiz und all diesen Kram. SVG ist bereits ziemlich klein, aber warum nicht alles tun, was wir können? Peter Collingridge hat ein Online-Tool SVG Optimiser. Laden Sie das alte hoch, laden Sie das neue herunter. In Kyle Fosters Video geht er sogar noch einen Schritt weiter und entfernt nach dieser Optimierung Zeilenumbrüche.

Wenn Sie noch härter eingestellt sind, hier ist ein Node JS-Tool, um es selbst zu tun.

Jetzt können Sie mit CSS steuern!

Sehen Sie, wie das SVG HTML sehr ähnlich aussieht? Das liegt daran, dass beide im Grunde XML sind (benannte Tags mit spitzen Klammern mit Dingen darin). In unserem Design haben wir zwei Elemente, die das Design ausmachen: eine <ellipse> und ein <path>. Wir können in den Code springen und ihnen Klassennamen geben, genau wie jedes andere HTML-Element.

<svg ...>
  <ellipse class="ground" .../>
  <path class="kiwi" .../>
</svg>

Jetzt können wir in jedem CSS auf dieser Seite diese einzelnen Elemente mit speziellem SVG-CSS steuern. Dies muss kein CSS sein, das in das SVG selbst eingebettet ist; es kann überall sein, sogar in unserer globalen Stylesheet, die verlinkt ist. Beachten Sie, dass SVG-Elemente einen speziellen Satz von CSS-Eigenschaften haben, die auf sie angewendet werden. Zum Beispiel ist es nicht background-color, sondern fill. Sie können jedoch normale Dinge wie :hover verwenden.

.kiwi {
  fill: #94d31b; 
}
.kiwi:hover {
  fill: #ace63c; 
}

Noch cooler, SVG hat all diese schicken Filter. Zum Beispiel Weichzeichnen. Fügen Sie einen Filter in Ihr <svg> ein

<svg ...>
  ...
  <filter id="pictureFilter" >
    <feGaussianBlur stdDeviation="5" />
  </filter> 
</svg>

Dann können Sie das bei Bedarf in Ihrem CSS anwenden

.ground:hover {
  filter: url(#pictureFilter);
}

Hier ist ein Beispiel für all das

Check out this Pen!

• Mehr über das Anwenden von Filtern auf SVG
• Die beste Liste, die ich über SVG-spezifische CSS-Eigenschaften finden konnte (spezifisch für Opera)
• SVG-Filtereffekte-Spielplatz (von Microsoft)

Browser-Unterstützung

Inline-SVG hat seine eigene Reihe von Browserunterstützungen, aber auch hier ist es im Wesentlichen nur ein Problem in IE 8 und darunter und Android 2.3 und darunter¹.

Eine Möglichkeit, Fallbacks für diese Art von SVG zu handhaben, ist

<svg> ... </svg>
<div class="fallback"></div>

Verwenden Sie dann Modernizr erneut

.fallback { 
  display: none;
  /* Make sure it's the same size as the SVG takes up */
}
.no-svg .fallback { 
  background-image: url(logo.png); 
}

SVG als <object> verwenden

Wenn "inline" SVG nicht Ihr Ding ist (denken Sie daran, dass es einige legitime Nachteile hat, wie z. B. schlecht zu cachen), können Sie auf eine SVG-Datei verweisen und die Möglichkeit behalten, ihre Teile mit CSS durch die Verwendung von <object> zu beeinflussen.

<object type="image/svg+xml" data="kiwi.svg" class="logo">
  Kiwi Logo <!-- fallback image in CSS -->
</object>

Für den Fallback funktioniert die Modernizr-Erkennung hier gut

.no-svg .logo {
  width: 200px;
  height: 164px;
  background-image: url(kiwi.png);
}

Dies funktioniert gut mit Caching und hat tatsächlich eine *tiefere* Unterstützung als jede andere Methode. Wenn Sie jedoch die CSS-Sachen verwenden möchten, können Sie keine externe Stylesheet oder <style> im Dokument verwenden, sondern Sie müssen ein <style>-Element innerhalb der SVG-Datei selbst verwenden.

<svg ...>
  <style>
    /* SVG specific fancy CSS styling here */
  </style>
  ...
</svg>

Externe Stylesheets für <object> SVG

SVG hat eine Möglichkeit, eine externe Stylesheet zu deklarieren, was für das Authoring und Caching usw. nützlich sein kann. Dies funktioniert nur mit der <object>-Einbettung von SVG-Dateien, soweit ich getestet habe. Sie müssen dies in der SVG-Datei über dem öffnenden <svg>-Tag einfügen.

<?xml-stylesheet type="text/css" href="svg.css" ?>

Wenn Sie das in Ihr HTML einfügen, wird die Seite abstürzen und nicht einmal versuchen, sie zu rendern. Wenn Sie eine SVG-Datei verlinken, die das enthält, als <img> oder background-image, wird sie nicht abstürzen, aber sie wird nicht funktionieren (die SVG wird trotzdem gerendert).

Data-URLs für SVG

Eine weitere Möglichkeit, SVGs zu verwenden, ist die Umwandlung in Data-URLs. Data-URLs sparen Ihnen möglicherweise keine tatsächliche Dateigröße, können aber effizienter sein, da die Daten direkt vorhanden sind. Es erfordert keine zusätzliche Netzwerkanfrage.

Mobilefish.com bietet ein Online-Konvertierungstool für die Base64-Kodierung, aber ich halte das generell für keine gute Idee für SVG. Fügen Sie einfach den Inhalt Ihrer SVG-Datei ein und füllen Sie das Formular aus, und es zeigt die Ergebnisse in einem Textfeld an, das Sie kopieren können. Denken Sie daran, Zeilenumbrüche in den Daten zu entfernen, die es Ihnen zurückgibt. Es sieht wie reines Kauderwelsch aus.

Sie können das überall verwenden, wo wir bisher gesprochen haben (außer inline <svg>, weil das einfach keinen Sinn ergibt). Fügen Sie einfach das Kauderwelsch dort ein, wo in diesen Beispielen [data] steht.

Dieser Konverter ist mein Favorit, da er das SVG als weitgehend lesbaren Text belässt.

Als <img>

<img src="data:image/svg+xml;base64,[data]">

Als CSS

.logo {
  background: url("data:image/svg+xml;base64,[data]");
}

Relevanter Hinweis: Normales CSS kümmert sich nicht darum, ob Sie Anführungszeichen um die Data-URI setzen, aber Sass tut es, also habe ich sie oben zitiert (Thx Oziel Perez).

Als <object>

<object type="image/svg+xml" data="data:image/svg+xml;base64,[data]">
  fallback
</object>

Und ja, wenn Sie ein eingebettetes <style> in Ihrem SVG haben, bevor Sie es Base64-kodieren, funktioniert es immer noch, wenn Sie es als <object> verwenden!

Format für Data-URI

Alle oben genannten Beispiele verwenden Base64 als Kodierung, aber Data-URIs müssen nicht Base64 sein. Tatsächlich ist es im Fall von SVG wahrscheinlich besser, kein Base64 zu verwenden. Hauptsächlich, weil das native Format von SVG viel repetitiver ist als Base64 und besser komprimierbar ist.

<!-- base64 -->
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL...

<!-- UTF-8, not encoded -->
data:image/svg+xml;charset=UTF-8,<svg ...> ... </svg>

<!-- UTF-8, optimized encoding for compatibility -->
data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://...'

<!-- Fully URL encoded ASCII -->
data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//...

Befehlszeilen-Tool zum Base64-Kodieren von SVG

@chriscoyier @hkfoster vielleicht könnten Sie eine Abkürzung nehmen mit >>> echo -n `cat logo.svg` | base64 | pbcopy

— Benny Schudel (@bennyschudel) 2. März 2013

Oder alternativ hat Mathias Bynens einige Techniken

Verwenden Sie openssl base64 < path/to/file.png | tr -d '\n' | pbcopy oder cat path/to/file.png | openssl base64 | tr -d '\n' | pbcopy, um das Schreiben in eine Datei zu überspringen und nur die Base64-kodierte Ausgabe ohne Zeilenumbrüche in die Zwischenablage zu kopieren.

Und ein Drag-and-Drop-Tool.

Automatisierungswerkzeuge

• grunticon:
  

  Aus Sicht der CSS ist es einfach zu verwenden, da es eine Klasse für jedes Icon generiert und keine CSS-Sprites verwendet.

  grunticon nimmt einen Ordner mit SVG/PNG-Dateien (typischerweise Icons, die Sie in einer Anwendung wie Adobe Illustrator gezeichnet haben) und gibt sie in 3 Formaten an CSS aus: SVG-Daten-URLs, PNG-Daten-URLs und eine dritte Fallback-CSS-Datei mit Verweisen auf reguläre PNG-Bilder, die ebenfalls automatisch generiert und in einem Ordner platziert werden.

• iconizr:
  

  Ein PHP-Kommandozeilen-Tool zur Konvertierung von SVG-Bildern in eine Reihe von CSS-Icons (SVG & PNG, einzelne Icons und/oder CSS-Sprites) mit Unterstützung für Bildoptimierung und Sass-Ausgabe.

Verwandte Themen

• David Bushell: Eine Einführung in Front-End-SVG-Hacking
• David Bushell: Auflösungsunabhängigkeit mit SVG
• MDN zu SVG
• Browserunterstützung für eine Vielzahl von verschiedenen SVG-bezogenen Dingen.
• Peter Gasston: Bessere SVG-Sprites mit Fragment-Identifikatoren
• simuari: SVG-Stacks
• SVG.js – „Eine leichtgewichtige Bibliothek zur Manipulation und Animation von SVG.“
• Emmet hat eine großartige Möglichkeit, eine Data-URI aus einem SVG direkt aus Ihrem Code-Editor zu erhalten.
• Compass bietet einen Helfer für Data-URIs.
• Adobe: SVG-Styling
• Andrew J. Baker: Das SVG-Monster zähmen
• Illustrator-Alternativen: Inkscape, Sketch
• Krister Kari: Umgang mit SVG-Bildern in mobilen Browsern

Kyle Fosters Ein optimierter SVG-Workflow, der einbettenswert ist

… und die Fortsetzung + Folien.

---

¹ Und was den Android 2.3-Browser angeht, dies. Aber wenn Sie den nativen Browser unbedingt unterstützen müssen, dies.