Home/ Questions/Q 8395167
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T20:13:55+00:00

I need to inject the following inline SVG filter into my HTML5 document: <svg>

  • 0

I need to inject the following inline SVG filter into my HTML5 document:

<svg>
    <defs>
        <filter id="grayscale">
            <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0">
        </filter>
    </defs>
</svg>

I tried placing it outside of the <html> tags but this did not work. It leaves a large blank space at the start or end of the displayed page depending on where I put it.

I tried placing it in the <head> or start of the <body> tag but this leaves a large blank space at the start of the displayed document as well.

Setting display: none; on the SVG object will prevent the filter from working.

I have also tried setting <svg>‘s width and height properties to zero but this only works if I set the CSS for svg objects to display: block;.

For example:

<!DOCTYPE html>
<html>
    <head>
        ...
        <svg> ... </svg>
    </head>
    ...
</html>

Currently, my temporary fix is to use css to try to hide it:

svg {
    height: 0;
    position: absolute;
}

How do I prevent the SVG object from interfering with my HTML layout (without using this css trick)?

jsFiddle example

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not positive this works, but SVG elements allow width and height attributes (like img tags). So try with: svg width="0" height="0"

    • 0