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