Gradient fills for SVG icons
It’s definitely possible! But it’s not as easy as using linear-gradient in CSS. We explore a few techniques for using gradient fills on SVG icons in a web page.
Printing background colors with CSS and SVG
Web browsers do not print background colors by default. Here’s a trick for printing a flat color, e.g. if you have a white logo or graphic.
Using CSS variables in SVG icons
Pass several colors and styles to a SVG symbol instance, using CSS Custom Properties. This requires preparing SVG icons to accept specific names.
How to work with SVG icons
A complete guide to SVG icons in HTML pages, with the symbol sprites technique.
Browser support for SVG symbol sprites
All modern browsers support using SVG symbols from a different SVG element in the same page, or from a remote SVG document on the same domain.