Video-Screencasts 2025, April

Vielen Dank, dass Sie alle gesehen haben. Es bedeutet mir und dieser Seite alles. Dieser Blog-Beitrag ist eine riesige Liste von Ressourcen für alles, was wir in dieser Serie behandelt haben. "

Wenn Sie Inline verwenden, befinden sich alle Elemente im DOM, genau wie s und s und jedes andere HTML-Element. Wenn Sie SVG haben wie: und Sie tun: var rect = "

In diesem Screencast beschäftigen wir uns mit Léonie Watsons Artikel über barrierefreies SVG und gehen es im Wesentlichen Punkt für Punkt durch. Ich genieße das der erste Punkt "

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

Mit SVG können Sie ohne Software viel anfangen. Angenommen, Sie haben eine gute Quelle für SVG-Bilder online, können Sie diese direkt verwenden. Aber"

JavaScript ist die letzte Möglichkeit, SVG zu animieren. Wir haben uns CSS angesehen, das großartig und ziemlich komfortabel ist, aber eine Reihe von SVG-Funktionen nicht ausführen kann. "

Das Konzept des Abschneidens und Maskierens ist ziemlich einfach. Verstecke bestimmte Teile von Elementen und zeige andere. Der tatsächliche Unterschied zwischen ihnen ist ziemlich einfach "

Vielleicht haben Sie schon von CSS-Filtern gehört? Sie können sie auf jedes beliebige Element aus CSS anwenden, z. B.: .Apply-css-filter (-webkit-filter: Graustufen (0.5); Filter: "

Es gibt wahrscheinlich keinen enorm großen Anwendungsfall dafür, außer dem offensichtlichen: Sie benötigen unter anderem eine Rastergrafik in einem größeren SVG-Design. "

Es kann ein Tag kommen, an dem Sie sich wünschen, eine Grafik wäre SVG, aber Sie haben sie nur in Raster wie GIF, JPG.webp oder PNG. In diesem Video sehen wir uns ein Beispiel an "

Eine beliebte kleine SVG-Animationstechnik ist das Zeichnen von Pfaden. Wenn Sie es sich nicht vorstellen können, finden Sie hier eine Sammlung von zig Beispielen, die ich erstellt habe. Im Wesentlichen die "

Es gibt ein Element in SVG. Keine große Überraschung hier: Es ist für das Einfügen von Text in die SVG. Keine Umrisse von Buchstabenformen (obwohl Sie das auch können), sondern "

Das ist ein bisschen esoterisch, ich musste es nur einmal selbst machen und fand es verwirrend, also dachte ich, ich würde ein ganzes Video darauf machen. Die Sache ist,"

Das Video wurde auf diesem entfernt. Ich werde es eines Tages bald wieder drehen. Wenn Sie dies lesen und ich es noch nicht getan habe, können Sie mich gerne kontaktieren und mich nerven. "

Dieser Tipp gilt nur, wenn Sie über Adobe Illustrator CC (Creative Cloud) verfügen. Ich habe bestätigt, dass es in diesem oder dem noch neueren CC 2014 funktioniert. Es ist so einfach wie möglich. "

Obwohl das Animieren von SVG mit CSS für die durchschnittliche Front-End-Person möglicherweise komfortabler ist, bietet SVG eine andere Möglichkeit, Animationen direkt in das SVG zu integrieren. "

Wenn Sie Inline-SVG verwenden, ist der gesamte SVG-Code im HTML und damit im DOM richtig. Sie können sie so gestalten, wie Sie es mit einem oder einem anderen HTML-Code tun würden. "

Wir haben gelernt, dass eine Einschränkung beim Einfügen von SVG darin besteht, dass Sie keine zusammengesetzten CSS-Selektoren schreiben können, die sich dort auswirken. Zum Beispiel: Das "

Der Begriff "Build-Tool" könnte beängstigend sein. Es erinnert an ausgefallene Befehlszeilentools, die Konfiguration und seltsame Systemabhängigkeiten erfordern, die brechen, wenn Sie "

Inline-SVG kann in dem Sinne "gestylt" werden, dass es bereits Füllungen und Striche enthält und nicht in der Sekunde, in der Sie es auf die Seite setzen. Das ist super und total "

Stock-Fotografie-Sites haben immer eine Möglichkeit, Suchergebnisse nach "Vektor" zu filtern. Und denken Sie daran, egal welches Format Sie erhalten, wenn Sie etwas herunterladen. "

Wir haben gelernt, dass Build-Tools besonders gut für Aufgaben wie das Verwandeln eines Ordners voller SVGs in einen SVG-Defs-Block geeignet sind. Wie immer in "

Mit unseren Build-Tools können wir definitiv ein bisschen nerdiger werden. Zum Zeitpunkt der Veröffentlichung ist Grunt das Aushängeschild der Build-Tools. Es gibt Konkurrenten "

Sobald wir das haben, was wir unseren "Defs-Block" von SVG nennen - diesen Teil von SVG, der alle Dinge definiert, die wir später zeichnen möchten - wo legen wir ihn ab? So"

Das Element ist Teil dieser ganzen Idee eines Inline-SVG-Symbolsystems. Wir haben gelernt, dass eine saubere Methode darin besteht, alles, was Sie zeichnen möchten, später zu platzieren. "

Das Setzen des SVG-Defs-Blocks oben im Dokument funktioniert auf jeden Fall. Es hat auch einige Vorteile, wie die Tatsache, dass keine HTTP-Anfrage gestellt werden muss. "

SVG hat ein sehr cooles und mächtiges Element namens. Das Konzept ist ziemlich einfach. Es findet ein weiteres Stück SVG-Code, auf das durch die ID verwiesen wird, und klont es über "

Wir haben uns mit "Inline-SVG" befasst, bei dem die SVG-Syntax direkt in HTML abgelegt wird. Sie können dasselbe Inline-SVG auch an anderen Stellen verwenden, z. B. in einem oder "

Denken Sie daran, dass jeder Vektor, den Sie in SVG bekommen können. Adobe-Software ist in dieser Hinsicht großartig. Es könnte Vektormaterial in einem PDF geben - öffnen Sie einfach das PDF und Sie werden "

Das Noun-Projekt ist ein (sehr) fantastischer Ort, um SVG zu bekommen. Lassen Sie uns die Wege zählen, die buchstäblich alles in SVG sind und tatsächlich so kommen. Sie sind die "