« 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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support ? ? ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? ? ? ? ? ?

See also

Document Tags and Contributors

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