From the course: Learning SVG
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Gradients for fills and strokes - SVG Tutorial
From the course: Learning SVG
Gradients for fills and strokes
- [Instructor] Markers are not the only SVG objects we can define inside devs elements and use in our shapes. Let's say you want to add a gradient to the fill or stroke of a shape. In that case you can define that gradient in the devs element and use it either as a stroke or a fill in any of your SVG shapes. There are two types of gradients available for SVG, linear and radial and they are marked up using linear gradient and radial gradient elements inside a devs element. The color stops of a gradient are marked up using stop elements for each stop you can either set a stop color and offset attribute or apply a class and use CSS properties to control the stop color and offset. Here just like with markers I recommend declaring the attribute in the SVG so it's clear to anyone accessing the code exactly what's going on. It works well with CSS too but CSS properties are harder to connect to the SVGs when you're just looking at the code. To see how gradients work and how to use them, I…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.