CODEWITHSUNDEEP
htmlsvg
Noldorin
Noldorin

Reputation: 147240

Embedding an SVG filter in an HTML document

Is there any way to embed an SVG filter element in an HTML document, so that it can be applied to SVG and HTML elements (via CSS) at some point? The problem with putting it inside an svg element which is itself embedded in the HTML document is that the svg element itself takes up space, which is undesirable.

Upvotes: 2

Views: 290

Answers (1)

Alexandr_TT
Alexandr_TT

Reputation: 14545

You can try it like this:

  • Wrap the svg in thediv
  • For div, assign the css propertyposition: absolute;which will output it from the general stream and will not interfere with the markup
  • hide the div

  • In CSS, apply a filter by itsid to any other HTML `markup object

    filter:url(#nameID);

Update:

I have to mention some of the nuances of using the display: none;

Here in this question the problems of applying SVG filters in various browsers are discussed in detail.

@Paul LeBeau in its answer recommends using SVG width = "0"and height = "0" instead of display: none;

Below is the code from his answer. 

<video autoplay controls muted src=" https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" style="width: 488px; height: 360px; filter: url(#temperature_filter)">
</video>

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="temperature_filter" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix" values="1 0 0 0 0 0 0.694 0 0 0 0 0 0.431 0 0 0 0 0 1 0"></feColorMatrix>
  </filter>
</svg>

As written in the comments @enxaneta is better to use: 

svg{position: absolute; width: 0; height: 0;}

Upvotes: 3

Related Questions