SVG Vectorial Graphics: Illustrate and Animate with Code
Un curs de Javier Usobiaga Ferrer , Designer web
Learn to create vector illustrations for your website, from basic lines to interactive animations
If you've ever wanted to combine the technical power of web programming and the creative freedom of graphic design, this course is for you. Javier Usobiaga, web designer and cofounder of Swwweet studio, teaches you how to get the most out of scalable vector graphics (SVG), an interactive and responsive vector file format designed for web browsers as an alternative to JPG, PNG, and GIF file types. In this online course, discover the effects, filters, and animations you can use to create your own interactive illustrations with HTML, CSS, and JavaScript code.
Javier also teaches Introduction to Responsive Web Development with HTML and CSS on Domestika, a course that walks you through the fundamentals of front-end web development and helps you build the foundations you need for this course on SVG.
Ce vei învăța în acest curs online?
1 lecție & 1 descărcare
- 98% recenzii pozitive ( 273 )
- 1 elev
- 1 lecție ( 1 oră 1 metru )
- 1 resursă suplimentară (1 fișier)
- Online și în ritmul tău propriu
- Disponibil în aplicație
- Sunet: Spaniolă, Engleză, franceză, italian, Portugheză, turc
- Spaniolă · Engleză · Portugheză · italian · franceză · turc
- Nivel: Începător
- Acces nelimitat pentru totdeauna
Software și instrumente recomandate pentru acest curs
Adobe Illustrator
SketchCare este proiectul acestui curs?
Create an illustration with animated vector images. You can choose any theme you like and make your project as simple or as complex as you want; the goal is for you to apply the tools explored throughout the course.
Proiecte ale studenților cursului
Pentru cine este acest curs online?
Programmers, designers, illustrators, and anyone who's interested in design and wants to tackle new projects with HTML and CSS.
Cerințe și materiale
You need basic knowledge of HTML and CSS to take this course.
As for materials and tools, you need a computer, a code editor, and a vector-graphics editor like Illustrator, Sketch, Inkscape, or similar software.
Recenzii
Javier Usobiaga Ferrer
Un curs de Javier Usobiaga Ferrer
Javier Usobiaga este designer web și dezvoltator front-end de peste 10 ani. Este co-fondator, împreună cu Marta Armada, al studioului Swwweet, specializat în proiectarea de site-uri web responsive, de la concepția inițială până la dezvoltarea front-end...
Conţinut
-
U 1
Introduction
-
Presentation
-
Influences
-
-
U 2
SVG Basic
-
Labels and basic attributes
-
Styles in SVG
-
Line, polyline, and polygon labels
-
Stroke label (path)
-
The viewbox attribute
-
Text tags
-
-
U 3
Tools and optimization
-
Vector editors and export
-
Organization of SVG
-
SVG optimization
-
-
U 4
Incorporating SVG to the web
-
Ways to load an SVG on the web
-
Icons systems
-
SVG responsive
-
Accessibility in SVG
-
Support in browsers
-
-
U 5
Effects in SVG
-
Transformations
-
Gradients
-
Patterns
-
Masks and clipping paths
-
Filters
-
-
U 6
Animation in SVG
-
Types of animation in SVG
-
Animation with CSS
-
Sequence animation
-
Drawn animation
-
Interactive animation
-
-
U 7
Interaction and advanced animation
-
Animation with JavaScript
-
JavaScript libraries for animation
-
Animated checkbox
-
Mutation (morphing) in SVG
-
Animation along a stroke
-
Inspiration
-
-
FP
Proiect final
-
SVG vector graphics: illustrate and animate with code
-
La ce să te aștepți de la un curs Domestika
-
Învață în ritmul tău propriu
Bucură-te de învățarea de acasă, fără un program fix și cu o metodă ușor de urmat. Tu îți stabilești propriul ritm.
-
Învață de la cei mai buni profesioniști
Învață metode și tehnici valoroase explicate de experți de top din sectorul creativ.
-
Întâlnește profesori experți
Fiecare expert predă ceea ce face cel mai bine, cu îndrumări clare, pasiune adevărată și perspicacitate profesională în fiecare lecție.
-
Certificate
PlusDacă ești membru Plus, primești un certificat personalizat semnat de profesorul tău pentru fiecare curs. Distribuie-l în portofoliul tău, pe rețelele sociale sau oriunde dorești.
-
Obțineți locuri în primul rând
Videoclipuri de cea mai înaltă calitate, pentru a nu rata niciun detaliu. Cu acces nelimitat, le poți viziona de câte ori este nevoie pentru a-ți perfecționa tehnica.
-
Împărtășește cunoștințe și idei
Pune întrebări, solicită feedback sau oferă soluții. Împărtășește-ți experiența de învățare cu alți studenți din comunitate care sunt la fel de pasionați de creativitate ca și tine.
-
Conectează-te cu o comunitate creativă globală
Comunitatea găzduiește milioane de oameni din întreaga lume, curioși și pasionați de explorarea și exprimarea creativității lor.
-
Urmărește cursuri produse profesional
Domestika își gestionează lista de profesori și produce fiecare curs intern pentru a asigura o experiență de învățare online de înaltă calitate.
Întrebări frecvente
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.
Adobe Illustrator
Sketch
Muy puntual, da la clase muy bien y es entendible, con ejercicios faciles y buenos.
EXCELENTE CURSO
Gostei muito
excellent course for beginners.
excelente curso lo recomiento explica muy bien y se entiende todo