« SVG Attribute reference home

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 <tspan>, <tref> or <altGlyph> 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.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css visibility for further information.

Usage context

Categories Presentation attribute
Value visible | hidden | collapse | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)

Example

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

span {
  vertical-align: 50%;
}
button {
  line-height: 1em;
}
.invisible {
  visibility: hidden;
}

JavaScript

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

Elements

The following elements can use the visibility attribute

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Compatibility unknown  
Compatibility unknown

See also

Document Tags and Contributors

Contributors to this page: RonRoyston, connorshea, Jeremie, Sheppy
Last updated by: RonRoyston,