SVG Vectorial Graphics: Illustrate and Animate with Code

Overview

“Gradients are another common property in CSS, and SVG has its own way of declaring them. The interesting thing about these gradients is the possibility of combining them with other SVG elements and getting things that are not possible in normal HTML, such as applying a gradient to a text. Let's see how they work.”

In this video lesson Javier Usobiaga Ferrer addresses the topic: Gradients, which is part of the Domestika online course: SVG Vectorial Graphics: Illustrate and Animate with Code. Learn to create vector illustrations for your website, from basic lines to interactive animations.

Partial transcription of the video

“Just like in CSS. sVG can declare gradients. but what's interesting about these gradients is combining them with other SVG elements to achieve things impossible with regular HTML. Let's explore this. To make a gradient. declare it in the DEFS tag for definitions. and nest it within the Linear Gradient This setup is essential for SVG graphics. Within this tag. we will also include Stop tags for each color we desire our gradient to incorporate. In this example. we're seeing a gradient of two colors. Starting with this yellow and ending with this orange. colors are indicated by the StopColor a...”

This transcript is automatically generated, so it may contain mistakes.

Course summary for: SVG Vectorial Graphics: Illustrate and Animate with Code

• Level: Beginner
• 98% positive reviews (273)
• 9308 students
• 7 units
• 32 lessons (2h 2m)
• 6 downloads

• Category

  Web & App Design

• Software

  Adobe Illustrator, Sketch

• Areas

  Animation, Interactive Design, Web Design, Web Development