Articles Tagged
svg filters

18 Articles
{
,

}
Direct link to the article Using SVG to Create a Duotone Effect on Images

Using SVG to Create a Duotone Effect on Images

Creatives everywhere welcomed the 2016 new year with the spark of a colorizing technique popularized by Spotify’s 2015 Year in Music website (here is last year’s) which introduced bold, duotone images to their brand identity.

Well, thanks to the potentially life-saving powers of SVG, we can create these Photoshop-like “adjustment layers” with SVG filters.

Avatar of Lentie Ward
Lentie Ward on (Updated on )

32: SVG Filters on SVG and HTML Elements

Perhaps you’ve heard of CSS filters? You can apply them do any element from CSS, like:

.apply-css-filter {
  -webkit-filter: grayscale(0.5);
  filter: grayscale(0.5);
}

You can even apply that to a HTML element or an SVG element.

But there is also …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

filter

CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter property provides access to effects like blur or color shifting on an element’s rendering …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Using SVG

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.…

Avatar of Chris Coyier
Chris Coyier on (Updated on )