What is the difference between 'CSS Filter Effects' and 'CSS filter() Function'?

Asked

Viewed 47 times

3

I’m researching about browser support for the property filter of CSS and the tag <filter> of SVG.

My search link: https://caniuse.com/#search=filter

What’s the difference between CSS Filter Effects and CSS filter() Function? In the browser Chrome for Android One is compatible with the other not with version 74.

I believe it may have something to do with it:

// HTML
<filter id="idqualquer">
    // Efeito a ser aplicado
</filter>

// CSS
filter: url(#idqualquer); // Este provavelmente não deve funcionar
filter: gray;

But I still can’t be sure.

html css svg

  • I believe that the filter Function is for manipulations with SVG, correct me if I’m wrong.

1 answer

1


Filter Effects: Filter Effects is a way to process the rendering of an element before it is displayed in the document. Typically, rendering an element via CSS or SVG can be described as if the element, including its children, were drawn into a buffer (like a raster image) and then that buffer was composed in the parent of the elements. The filters apply an effect before the composition stage. Examples of such effects are blurring, color intensity change and image distortion.

Follow an example of code using Filter Effects: https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_fegaussianblur

filter() Function: CSS filters are a powerful tool that developers can use to get varied visual effects (such as Photoshop filters for the browser). The CSS filter property provides access to effects such as blur or color change in the rendering of an element before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background or an edge.

Possible filters:

  • Blur()
  • Brightness()
  • Contrast()
  • drop-shadow(
  • Grayscale()
  • Hue-Rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - for Applying SVG

Follow an example of code using the filter property: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_filter_grayscale

Notes: According to the website Can I Use (https://caniuse.com/#search=filter), filter does not have support for all browsers, and for this reason, it is interesting to use Autoprefixer CSS online (https://autoprefixer.github.io/) to add prefix vendors (-Webkit-filter) and have the necessary support to run in the browsers.

Search links:
https://www.w3.org/TR/filter-effects-1/
https://www.w3.org/TR/filter-effects/#FilterCSSImageValue
https://css-tricks.com/almanac/properties/f/filter/

Browser other questions tagged html css svg

You are not signed in. Login or sign up in order to post.