SVG within CSS

CSS Inline SVG Filter: A Powerful Image Processing Tips

A "I Learned Today" (TIL) article by Stefan Judis explains how to inline SVG filters in CSS. filter attribute of CSS supports some built-in functions, such as grayscale(100%) , etc. But it can also point to filters defined by SVG. You can use filter: url(#my-custom-filter) where the filter is defined inline<svg></svg> In the element, as<filter></filter> Part of the element. This method requires reference to HTML, which is a bit clumsy. Filters are visual effects that are more logical to integrate into CSS. Examples are as follows:

 img {
  filter: url('data:image/svg xml,\
    <svg xmlns="http://www.w3.org/2000/svg">\
      <filter color-interpolation-filters="linearRGB" filterunits="objectBoundingBox" height="140%" primitiveunits="userSpaceOnUse" width="140%" x="-20%" y="-20%"> \
        <feturbulence basefrequency="0.01 0.01" numoctaves="1" result="turbulence" seed="1" stitchtiles="noStitch" type="turbulence"></feturbulence> \
        <fedisplacementmap in="SourceGraphic" in2="turbulence" result="displacementMap" scale="20" xchannelselector="G" ychannelselector="A"></fedisplacementmap> \
      </filter>\
    </svg>#waves')
  ;
}

This is Stefan's turbulence filter example, which is not possible with CSS alone.

Please note the large number of backslashes ( \ ). This makes one hope that CSS can also support template literals. At the same time, it also concerns whether the code formatting tools or compression tools will handle these backslashes, but in reality, this may not cause any problem.

Thankfully, the SVG code maintains good readability and editability. Therefore, you can edit the SVG filters directly in CSS and experiment.

The same applies to Yoksel's tools. Its editor for two- and three-color images is very cool. You can also apply these filters directly to CSS.

However, SVGs inlined into CSS are not limited to filters. You can also embed SVG drawings directly into CSS.

This method works fine in modern browsers (except Safari). But in the near future, we need to encode special characters in SVG more to make them work (although base64 encoding is not required). Yoskel's URL encoder is designed for this, but I don't know if it's still necessary now.

The above is the detailed content of SVG within CSS. For more information, please follow other related articles on the PHP Chinese website!