Alles, was du über SVG wissen musst

Willkommen!…

Ich möchte zu Beginn dieses Kurses hervorheben, warum SVG so überzeugend ist. Vielleicht der überzeugendste Grund für Designer: Sie sehen fantastisch aus. Visuell sehr scharf. Vektor (das "V" in "SVG") ist immer so. …

Wir haben gerade gelernt, dass SVGs visuell scharf aussehen. SVGs sind auch flexibel. Das ist nichts wirklich Einzigartiges für Elemente im Web, aber einzigartig ist, dass sie diese perfekte Schärfe behalten, egal auf welche Größe Sie sie skalieren. …

Die Größe einer SVG-Datei hängt davon ab, wie komplex sie ist, nicht davon, wie "groß" sie ist. Denken Sie daran, dass SVG-Dateien die Größe, in der sie gerendert werden, eigentlich egal sind, sie sind flexibel und scharf, egal was passiert.

Stellen Sie sich ein 100×100 Pixel großes …

Die Verwendung von SVG kann unglaublich einfach sein

<img src="image.svg" alt="image">

Jep!

Sehen Sie den Pen 7d5d25d7a93f10035b9b19c6f4fce516 von Chris Coyier (@chriscoyier) auf CodePen. …

SVG-Bilder können auch als background-image in CSS verwendet werden, genau wie PNG, JPG oder GIF.

.element {
  background-image: url(/images/image.svg);
}

All die gleiche Großartigkeit von SVG ist mit dabei, wie Flexibilität bei gleichzeitiger Beibehaltung der Schärfe. Außerdem können Sie …

Vielleicht die beste Art, SVG zu verwenden, ist "Inline SVG" – das heißt, SVG-Code direkt in Ihr HTML einzufügen. Das funktioniert super!

Sehen Sie den Pen gpcDi von Chris Coyier (@chriscoyier) auf CodePen.

Vieles davon …

Verzeihen Sie mir, wenn ich diese Methoden etwas abwerte. Ich bin noch nie auf einen Anwendungsfall gestoßen, bei dem sie definitiv die beste Lösung waren. Es gab eine Zeit, da war <object> die einzige Möglichkeit, SVG zu verwenden, aber diese …

Wir haben "Inline SVG" behandelt – das ist das Einfügen von SVG-Syntax direkt in HTML. Sie können dieselbe Inline-SVG auch an anderen Stellen verwenden, z. B. in einem <img> oder als background-image. Es ist ziemlich seltsam.

Es ist so ähnlich wie

<img src='data:image/svg+xml;utf8,<svg 

Stockfoto-Websites haben immer eine Möglichkeit, Suchergebnisse nach "Vektor" zu filtern. Und denken Sie daran, egal in welchem Format Sie etwas herunterladen, Sie können es im Allgemeinen in Illustrator öffnen, es bearbeiten und dann speichern …

The Noun Project ist ein (sehr) fantastischer Ort, um SVG zu beziehen. Zählen wir die Wege auf:

• Buchstäblich alles in SVG und eigentlich kommt es so
• Sie sind die Art von Bildern, für die SVG am besten geeignet ist
• Viele

Denken Sie daran, dass Sie alles Vektorielle in SVG umwandeln können. Adobe-Software ist darin großartig. Es könnte Vektor-Material in einem PDF geben – öffnen Sie einfach das PDF und Sie können sich die Vektor-Teile schnappen. …

SVG hat ein sehr cooles und mächtiges Element namens <use>. Es ist im Konzept ziemlich einfach. Es findet einen anderen Teil SVG-Code, der per ID referenziert wird, und klont ihn in das <use>-Element.

Der grundlegendste Anwendungsfall wäre …

Das <use>-Element ist entscheidend für die gesamte Idee eines Inline-SVG-Icon-Systems. Wir haben gelernt, dass eine saubere Methode darin besteht, alles, was Sie später zeichnen möchten, in einen <defs>-Block zu legen, damit es nicht …

Sobald wir haben, was wir unseren "Defs-Block" von SVG nennen – dieser Teil von SVG, der all die Dinge definiert, die wir später zeichnen wollen – wo legen wir ihn hin? Bisher haben wir ihn direkt …

Das Platzieren dieses SVG-Defs-Blocks am Anfang des Dokuments funktioniert definitiv. Es hat auch einige Vorteile, wie die Tatsache, dass keine HTTP-Anfrage gestellt werden muss, alle Informationen zum Zeichnen der Grafiken sind direkt auf der …

Der Begriff "Build-Tool" mag einschüchternd klingen. Er erinnert an schicke Kommandozeilen-Tools, die Konfiguration und seltsame Systemabhängigkeiten erfordern, die kaputtgehen, wenn man sie falsch anschaut. Manchmal sind Build-Tools so, und wir werden das später noch behandeln …

Wir können mit unseren Build-Tools definitiv ein bisschen nerdiger werden. Zum Zeitpunkt der Veröffentlichung dieses Beitrags ist Grunt das Paradebeispiel für Build-Tools. Es gibt Konkurrenten, aber Grunt ist seit einiger Zeit das beliebteste. Wenn …

Wir haben gelernt, dass Build-Tools besonders großartig für Aufgaben sind wie das Umwandeln eines Ordners voller SVGs in einen SVG-Defs-Block. Wie immer in dieser schönen Web-Welt, in der wir leben, gibt es immer mehr …

Inline-SVG kann "gestylt" werden, in dem Sinne, dass es bereits Füllungen und Konturen und dergleichen hat, sobald Sie es auf die Seite stellen. Das ist großartig und eine absolut gute Möglichkeit, Inline-SVG zu verwenden. Aber Sie können auch …

Wir haben gelernt, dass eine Einschränkung bei der Verwendung von <use> zum Einfügen eines SVG-Teils darin besteht, dass Sie keine zusammengesetzten CSS-Selektoren schreiben können, die dort durchgreifen. Zum Beispiel

<svg class="parent">
  <!-- shadow DOM boundary is effectively here -->
  <use class="child">
     

Wenn Sie Inline-SVG verwenden, befindet sich der gesamte SVG-Code im HTML und somit im DOM. Sie können ihn genauso stylen wie ein <div>, <h1> oder jedes andere HTML-Element. CSS-Styling bringt …

Auch wenn die Animation von SVG mit CSS für den durchschnittlichen Frontend-Entwickler angenehmer sein mag, hat SVG eine weitere eingebaute Animationsmöglichkeit direkt in der SVG-Syntax selbst. Das ist genau das, was wir in diesem Video kurz behandeln, aber …

Dieser Tipp gilt nur, wenn Sie Adobe Illustrator CC (Creative Cloud) haben. Ich habe bestätigt, dass er darin oder in der noch neueren CC 2014 funktioniert.

Es ist so einfach wie möglich: von Illustrator kopieren, in HTML einfügen.

Was ist auf Ihrem …

Kein Video dazu, aber hier sind einige nützliche Informationen zur manuellen Optimierung von SVGs in Adobe Illustrator über das hinaus, was die Anwendung automatisch tut.

Manchmal sieht das gewünschte SVG in Illustrator perfekt aus, aber es ist nicht ganz, wie …

Das ist eine etwas esoterische Sache, ich musste es nur einmal selbst tun und fand es verwirrend, also dachte ich, ich mache ein ganzes Video dazu.

Die Sache ist, nicht alles ist ein <path> in …

JavaScript ist die letzte Methode, die wir zur Animation von SVG behandeln werden. Wir haben uns CSS angesehen, das großartig und ziemlich komfortabel ist, aber es kann eine Reihe von SVG-Eigenschaften, die Sie vielleicht animieren möchten, nicht verarbeiten. Dann haben wir uns …

Eine beliebte kleine SVG-Animationstechnik ist das Pfadzeichnen. Wenn Sie sich das nicht vorstellen können, hier ist eine Sammlung von einer Zillion Beispielen, die ich erstellt habe. Im Wesentlichen zeichnet sich der Strich um SVG-Formen im Laufe der Zeit selbst.

Ich hörte zum ersten Mal davon von Jake …

Es gibt ein <text>-Element in SVG. Keine große Überraschung hier: es dient dazu, Text in das SVG einzufügen. Nicht Umrisse von Buchstabenformen (obwohl Sie das auch tun können), sondern tatsächlicher normaler Webtext. Auswählbar, SEO-freundlich, zugänglich, normaler alter …

Es mag der Tag kommen, an dem Sie sich wünschen, eine Grafik, die Sie haben, wäre SVG, aber Sie haben sie nur als Raster, wie GIF, JPG oder PNG.

In diesem Video sehen wir uns ein Beispiel dafür an. Wir haben diesen Pfeil …

Es gibt wahrscheinlich keinen enormen Anwendungsfall dafür, außer dem Offensichtlichen: Sie benötigen eine Rastergrafik unter anderem in einem größeren SVG-Design. Auf diese Weise bewegt und skaliert sie sich mit den übrigen Elementen.

Die Syntax …

Vielleicht haben Sie von CSS-Filtern gehört? Sie können diese mit CSS auf jedes Element anwenden, wie z. B.

.apply-css-filter {
  -webkit-filter: grayscale(0.5);
  filter: grayscale(0.5);
}

Sie können das sogar auf ein HTML-Element oder ein SVG-Element anwenden.

Aber es gibt auch …

Das Konzept von Clipping und Maskierung ist ziemlich einfach. Verbergen Sie bestimmte Teile von Elementen und zeigen Sie andere. Der tatsächliche Unterschied zwischen ihnen ist ebenfalls ziemlich einfach. Clipping ist immer ein Vektorpfad, bei dem innerhalb des Pfads sichtbar ist und außerhalb …

Es gibt vieles, was Sie mit SVG tun können, ohne überhaupt Software zu benötigen. Wenn Sie eine gute Online-Quelle für SVG-Bilder haben, könnten Sie sie direkt verwenden. Aber es ist ziemlich üblich, dass wir sie ein wenig anpassen müssen. …

Wir haben bereits darüber gesprochen, SVG von Hand zu optimieren. Manuelle Entscheidungen über Details und welche Dinge kombiniert oder entfernt werden können. In diesem Screencast sehen wir uns die Optimierung von SVG mit Tools an. Tools, die die Datei reduzieren können …

Wir haben viel Zeit damit verbracht, über die Verwendung von Inline-<svg> und dem <use>-Element zu sprechen. Sie können damit ein Icon-System aufbauen, das viele Vorteile bietet.

Sie können jedoch auch ein SVG-Icon-System auf andere Weise erstellen. Sie …

Wenn Sie Inline-<svg> verwenden, befinden sich alle Elemente im DOM, genau wie <div>s und <span>s und jedes andere HTML-Element.

Wenn Sie SVG wie

<svg>
  <rect id="foo" x="10" y="10" width="100" height="100" />
</svg>

und …

In diesem Screencast tauchen wir tief in Léonie Watsons Artikel über zugängliches SVG ein und gehen ihn Punkt für Punkt durch. Ich finde gut, dass der erste Punkt ist, dass die Verwendung von SVG überhaupt eine gute Idee ist, wegen der …

In diesem Video versuchen wir, einen Teil dessen, was wir gelernt haben, zusammenzubringen, indem wir eine Website erstellen, die SVG auf verschiedene Weise nutzt. Wir erstellen eine Seite für die fiktive …

Danke fürs Zuschauen allerseits, es bedeutet mir und dieser Seite alles.

Dieser Blogbeitrag ist eine riesige Liste von Ressourcen für alles, was wir in dieser Serie behandelt haben, und vieles mehr über SVG. …