overflow

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.

See full compatibility

The overflow attribute sets what to do when an element's content is too big to fit in its block formatting context. This feature is not widely implemented yet.

This attribute has the same parameter values and meaning as the CSS overflow property, however, the following additional points apply:

If it has a value of visible, the attribute has no effect (i.e., a clipping rectangle is not created).
If the overflow property has the value hidden or scroll, a clip of the exact size of the SVG viewport is applied.
When scroll is specified on an <svg> element, a scrollbar or panner is normally shown for the SVG viewport whether or not any of its content is clipped.
Within SVG content, the value auto implies that all rendered content for child elements must be visible, either through a scrolling mechanism, or by rendering with no clip.

Note: Although the initial value for overflow is auto, it is overwritten in the User Agent style sheet for the <svg> element when it is not the root element of a stand-alone document, the <pattern> element, and the <marker> element to be hidden by default.

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

You can use this attribute with the following SVG elements:

Example

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto">
  <text y="20">
    This text is wider than the SVG, so there should be a scrollbar shown.
  </text>
</svg>

Usage notes

Value	`visible` \| `hidden` \| `scroll` \| `auto`
Default value	`visible`
Animatable	Yes

For a description of the values, please see the CSS overflow property.

Specifications

Specification
CSS Overflow Module Level 3 # propdef-overflow
Scalable Vector Graphics (SVG) 2 # OverflowAndClipProperties

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
`overflow`	Chrome – Full support Chrome 1 (Release date: 2008-12-11) footnote Full support	Edge – Full support Edge 12 (Release date: 2015-07-29) footnote Full support	Firefox – Full support Firefox 1 (Release date: 2004-11-09) footnote Full support	Opera – Full support Opera 7 (Release date: 2003-01-28) footnote Full support	Safari – Full support Safari 1 (Release date: 2003-06-23) footnote Full support	Chrome Android – Full support Chrome Android 18 (Release date: 2012-06-27) footnote Full support	Firefox for Android – Full support Firefox for Android 4 (Release date: 2011-03-29) footnote Full support	Opera Android – Full support Opera Android 14 (Release date: 2013-05-21) footnote Full support	Safari on iOS – Full support Safari on iOS 1 (Release date: 2007-06-29) footnote Full support	Samsung Internet – Full support Samsung Internet 1 (Release date: 2013-04-27) footnote Full support	WebView Android – Full support WebView Android 4.4 (Release date: 2013-12-09) footnote Full support	WebView on iOS – Full support WebView on iOS 1 (Release date: 2007-06-29) footnote Full support

Tip: you can click/tap on a cell for more information.

Full support: Full support

overflow

Example

Usage notes

Specifications

Browser compatibility

Legend

See also