W3cubDocs

/SVG

visibility

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The visibility attribute lets you control the visibility of graphical elements. With a value of hidden or collapse the current graphics element is invisible.

Note: If the visibility attribute is set to hidden on a text element, then the text is invisible but still takes up space in text layout calculations.

Depending on the value of attribute pointer-events, graphics elements which have their visibility attribute set to hidden still might receive events.

Note: As a presentation attribute, visibility also has a CSS property counterpart: visibility. When both are specified, the CSS property takes priority.

Elements

You can use this attribute with the following SVG elements:

Usage notes

Value	`visible` \| `hidden` \| `collapse`
Default value	`visible`
Animatable	Yes

visible: This value indicates that the element will be painted.
hidden: This value indicates that the element will not be painted. Though it is still part of the rendering tree, i.e., it may receive pointer events depending on the pointer-events attribute, may receive focus depending on the tabindex attribute, contributes to bounding box calculations and clipping paths, and does affect text layout.
collapse: This value is equal to hidden.

Examples

Example 1

<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <rect
    x="10"
    y="10"
    width="200"
    height="100"
    stroke="black"
    stroke-width="5"
    fill="transparent" />
  <g stroke="seagreen" stroke-width="5" fill="skyblue">
    <rect x="20" y="20" width="80" height="80" visibility="visible" />
    <rect x="120" y="20" width="80" height="80" visibility="hidden" />
  </g>
</svg>

Example 2

The following example toggles the CSS visibility of the SVG image path.

HTML

<button id="nav-toggle-button">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    class="button-icon">
    <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
    <path
      d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
      class="invisible" />
    <path d="M0 0h24v24H0z" fill="none" />
  </svg>
  <span> click me </span>
</button>

CSS

svg {
  display: inline !important;
}
span {
  vertical-align: 50%;
}
button {
  line-height: 1em;
}
.invisible {
  visibility: hidden;
}

JavaScript

const button = document.querySelector("button");
button.addEventListener("click", (evt) => {
  button
    .querySelector("svg > path:nth-of-type(1)")
    .classList.toggle("invisible");
  button
    .querySelector("svg > path:nth-of-type(2)")
    .classList.toggle("invisible");
});

Result

Specifications

Specification
CSS Display Module Level 3> # visibility>
Scalable Vector Graphics (SVG) 2> # VisibilityControl>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`visibility`	1	12	1	4	1	18	4	10.1	1	1.0	4.4	1