SVG-Vektorgrafiken: Mit Code veranschaulichen und animieren
A course by Javier Usobiaga FerrerWebdesigner
A course by Javier Usobiaga Ferrer, Webdesigner
Erfahren Sie, wie Sie mit Vektorillustrationen auf Ihren Webseiten arbeiten, von der Linie bis zur interaktiven Animation
Javier Usobiaga - Webdesigner und Mitbegründer von Marta Armada vom Swwweet-Studio - zeigt Ihnen, wie Sie das SVG-Format (Scalable Vector Graphics) optimal nutzen können, eine Art Vektordatei zur Verwendung in Browsern, die als Alternative zu JPG, PNG und GIF und zeichnet sich durch Skalierbarkeit, Interaktivität und Reaktionsfähigkeit aus. Sie werden die Effekte, Filter und Animationen entdecken und Illustrationen und animierte Teile mit HTML-, CSS- und JavasScript-Code erstellen können.
Javier auch im Kurs erlernten Domestika „Einführung in die Responsive Web - Entwicklung mit HTML und CSS " , wo Sie die Grundlagen der Frontend-Webentwicklung erlernen können, Kenntnisse, die als Grundlage dienen, um das Beste aus diesem SVG-Vektorgrafikkurs herauszuholen.
Was lernst du in diesem Onlinekurs?
32 Lektionen & 28 Downloads
Beschriftungen und grundlegende Attribute
5 Minuten, 16 Sekunden
Stile in SVG
4 Minuten, 57 Sekunden
Linien-, Polylinien- und Polygonbeschriftungen
5 Minuten, 21 Sekunden
Strichbezeichnung (Pfad)
4 Minuten, 45 Sekunden
Das Viewbox-Attribut
4 Minuten, 6 Sekunden
Textbeschriftungen
6 Minuten, 55 Sekunden
Was ist in diesem Kurs enthalten?
Sie werden die Arbeit und die Einflüsse in der Welt von SVG von Javier Usobiaga kennenlernen.
Im Folgenden erfahren Sie, wie das SVG-Format in seiner grundlegendsten Form funktioniert, um es ändern und optimieren zu können. Zu diesem Zweck schreiben Sie zunächst eine grundlegende Grafik ohne visuelle Editoren nur mit dem Code-Editor. Sie erfahren, wie Sie Stile über Attribute und CSS anwenden. Sie wissen, wie Linien-, Polylinien- und Polygonbeschriftungen funktionieren und Strichbeschriftungen, mit denen Sie unendlich erstellen können Kurven, Linien und Punkte. Sie sehen auch die Viewbox-Attribute, die virtuelle Fenster zulassen (den sichtbaren Teil einer Grafik begrenzen und zoomen), sowie die Textbeschriftungen.
Sobald Sie die grundlegenden Tools kennen, werden Sie lernen, wie Sie andere Optimierungswerkzeuge wie Vektoreditoren und Code-Tools verwenden, mit denen Sie SVG-Elemente gruppieren, definieren und wiederverwenden können, um sich viele Codezeilen zu ersparen.
In der nächsten Phase wird SVG in das Web integriert. Dazu erklärt Javier, wie ein SVG (Inhaltsbild, Hintergrundbild, mit JavaScript ...) geladen werden kann, seine Anwendung in Bezug auf Symbolsysteme und seine Rolle im reaktionsfähigen Web , Tipps zur Verbesserung der Erfahrung in Bildschirmleseprogrammen und zur Optimierung des SVG-Formats in allen Browsern.
Als Nächstes werden Sie die Effekte in SVG (Transformationen, Verläufe, Muster, Masken und Filter) und die Arten von Animationen (mit CSS, Sequenz, gezeichnet und interaktiv) entdecken, einschließlich einiger erweiterter Animationen, z. B. mit JavasScript, die auf animierte Kontrollkästchen angewendet werden. Mutationen oder Morphings und Animationen entlang eines Schlaganfalls.
Recommended software & tools for this course
What is this course's project?
Sie erstellen eine Illustration mit animierten Vektorelementen. Das Thema ist kostenlos und Sie können ein Projekt so einfach oder komplex gestalten, wie Sie möchten, indem Sie die Werkzeuge, die Sie während des Kurses gesehen haben, in die Praxis umsetzen.
Projekte von Kursteilnehmenden
Who is this online course for?
Für Programmierer, Designer, Illustratoren und alle, die Interesse an Design und Neugier bei der Entwicklung neuer Projekte mit HTML und CSS haben.
Requirements and materials
Vorkenntnisse in HTML und CSS sind erforderlich.
In Bezug auf die Materialien und Werkzeuge, die Sie für den Abschluss des Kurses benötigen, benötigen Sie einen Computer, einen Code-Editor und einen Vektorgrafik-Editor (z. B. Illustrator, Sketch, Inkscape oder ähnliches).
Bewertungen
- vor 9 Monaten
Muy puntual, da la clase muy bien y es entendible, con ejercicios faciles y buenos.
- vor 1 Jahr
EXCELENTE CURSO
- vor 1 Jahr
Gostei muito
- vor 2 Jahren
excellent course for beginners.
- vor 2 Jahren
excelente curso lo recomiento explica muy bien y se entiende todo
Inhalt
- E1
Einführung
- Präsentation
- Einflüsse
- E2
Grundlegende SVG
- Beschriftungen und grundlegende Attribute
- Stile in SVG
- Linien-, Polylinien- und Polygonbeschriftungen
- Strichbezeichnung (Pfad)
- Das Viewbox-Attribut
- Textbeschriftungen
- E3
Werkzeuge und Optimierung
- Vektoreditoren und Export
- SVG Organisation
- SVG-Optimierung
- E4
Einbindung von SVG in das Web
- Möglichkeiten zum Hochladen eines SVG ins Web
- Icon-Sets
- Responsive svg
- Zugänglichkeit in SVG
- Unterstützung in Browsern
- E5
Effekte in SVG
- Transformationen
- Farbverläufe
- Muster
- Skins und Beschneidungspfade
- Filter
- E6
SVG-Animation
- Animationstypen in SVG
- Animation mit CSS
- Sequenzanimation
- Gezeichnete Animation
- Interaktive Animation
- E7
Erweiterte Interaktion und Animation
- Animation mit JavaScript
- JavaScript-Bibliotheken für Animationen
- Animiertes Kontrollkästchen
- SVG-Morphing
- Animation entlang eines Strichs
- Inspiration
- AP
Abschlussprojekt
- SVG-Vektorgrafiken: Mit Code veranschaulichen und animieren
Was erwartet dich in einem Domestika-Kurs?
Lerne in deinem Tempo
Lerne bequem von zuhause aus, in deinem eigenen Tempo und ohne festen Zeitplan. Du entscheidest, wann und wo.
Lerne mit den Profis
Lerne die nützlichsten Techniken und Methoden mit den Profis der Kreativbranche.
Tritt mit den erfahrendsten Experten in Kontakt
Jede Lehrperson übermittelt dir in jeder Lektion leidenschaftlich sein/ ihr Wissen mittels ausführlichen Erklärungen aus professioneller Sicht.
Certificates
PLUSIf you're a Plus member, get a personalisiertes und unterzeichnetes Zertifikat signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Sei ganz vorne mit dabei
Dank hochwertig produzierter und gestochen scharfer Videos entgeht dir kein einziges Detail. Du hast uneingeschränkten Zugriff auf deinen Kurs und kannst dir so alle Videolektionen so oft ansehen, wie du möchtest.
Teile Wissen und Ideen
Stelle deine Fragen, bitte um Meinungen und biete Lösungsansätze. Teile deine Lernerfahrung mit anderen Schüler*innen in der Community, die genauso kreativ sind wie du.
Sei Teil einer globalen kreativen Community
Die Community umfasst Millionen wissbegierige Menschen weltweit, die Freude an kreativem Ausdruck finden.
Arbeite mit von Profis produzierten Kursen
Um eine einzigartige Online-Lernerfahrung zu garantieren, zählt Domestika auf eine sorgfältige Auswahl der Lehrpersonen und produziert jeden Kurs intern.
FAQ
SVG (Scalable Vector Graphics) is an XML-based format for creating vector graphics that scale without losing quality. It’s widely used in web development for icons, illustrations, animations, and interactive graphics.
This course is designed for people with intermediate web development skills. Basic experience with HTML, CSS, and JavaScript is recommended to get the most out of the material.
You should have a basic understanding of HTML, CSS, and JavaScript, plus some familiarity with a code editor. You don’t need to be an expert, but a foundation in web technologies will help you keep up with the course.
You’ll learn how to create custom SVG graphics, animate elements using CSS and JavaScript, integrate icons, apply advanced styling, work with paths, gradients, and patterns, and optimize SVG files for the web.
The course teaches you how to animate SVGs by accessing the DOM and modifying attributes with JavaScript, as well as using CSS keyframes to create visual effects, transitions, and animation sequences.
The course explains that SVG attributes like fill and stroke allow direct styling, while CSS offers greater control, reusability, and easier maintenance—especially useful in large projects and reusable components.
You’ll learn to use the viewBox attribute, adjust preserveAspectRatio, and apply responsive design techniques so your SVGs fluidly adapt to any device or resolution.