HTML <svg> hidden Attribute

The hidden attribute on an <svg> tag hides the svg image. Althought the images is not visible, its position on the page is maintained.

Example

#

A hidden attribute on an <svg> element.
The svg image is not visible.

A hidden svg element:

<p>A hidden svg element:</p>

<svg width="100" height="100" hidden>
  <circle cx="50" cy="50" r="40" stroke="steelblue" 
          stroke-width="2" fill="lightblue" />
</svg>

Using hidden

The hidden attribute hides the <svg> element.

You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid.

A hidden <svg> element is not visible, but it maintains its position on the page.

Removing the hidden attribute makes it re-appear.


Syntax

<svg hidden>
or
<svg hidden="hidden">

Values

#

Value Description
hidden Use 'hidden' or hidden='hidden'. Both are valid.

More Examples

Clicking the button toggles the hidden attribute on the <svg> image.



<svg id="mysvg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="steelblue" 
          stroke-width="2" fill="lightblue" />
</svg>

<br /><br />
<button onclick="toggle(this)">Hide svg</button>

<script>
  let toggle = button => {
    let element = document.getElementById("mysvg");
    let hidden = element.getAttribute("hidden");

    if (hidden) {
       element.removeAttribute("hidden");
       button.innerText = "Hide svg";
    } else {
       element.setAttribute("hidden", "hidden");
       button.innerText = "Show svg";
    }
  }
</script>

Code explanation

Initially, the <svg> image is visible.

Clicking the button calls JavaScript that toggles the hidden attribute.

With the hidden attribute the svg image is invisible.


Browser support

Here is when hidden support started for each browser:

Chrome
4.0 Jan 2010
Firefox
3.0 Jun 2008
IE/Edge
9.0 Mar 2011
Opera
10.1 Jun 2010
Safari
3.2 Nov 2008

You may also like

 Back to <svg>
Guides