HTML <svg> hidden Attribute

A hidden attribute on an <svg> tag hides the svg image.

Although the images is not visible, its position on the page is maintained.



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" />

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.


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



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

More Examples

Clicking the button toggles A 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" />

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

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

    if (hidden) {
       button.innerText = "Hide svg";
    } else {
       element.setAttribute("hidden", "hidden");
       button.innerText = "Show svg";

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:

4.0 Jan 2010
3.0 Jun 2008
9.0 Mar 2011
10.1 Jun 2010
3.2 Nov 2008

You may also like

 Back to <svg>

Author: Jack Poorte
Published: Jun 20 2021
Last Reviewed: Sep 30 2023

What's your favorite/least favorite part of Dofactory?