Skip to content

Commit

Permalink
updates per review
Browse files Browse the repository at this point in the history
  • Loading branch information
estelle committed Feb 6, 2025
1 parent 6844838 commit fc6779a
Show file tree
Hide file tree
Showing 3 changed files with 5 additions and 15 deletions.
10 changes: 2 additions & 8 deletions files/en-us/web/api/svgsvgelement/height/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,9 @@ browser-compat: api.SVGSVGElement.height

{{APIRef("SVG")}}

The **`height`** read-only property of the {{domxref("SVGSVGElement")}} interface describes the vertical size of element as an {{domxref("SVGAnimatedLength")}}. It reflects the {{SVGElement("svg")}} element's {{SVGAttr("height")}} attribute.
The **`height`** read-only property of the {{domxref("SVGSVGElement")}} interface describes the vertical size of element as an {{domxref("SVGAnimatedLength")}}. It reflects the {{SVGElement("svg")}} element's {{SVGAttr("height")}} attribute, which may not be the SVG's rendered height.

Several features impact the vertical dimension of an `<svg>` element, with some impacting the {{domxref("DOMRect.height")}} height but not this property when the `height` attribute is present. An SVG's size is primarily defined by CSS box model properties, overriding the `height` attribute, which the `height` property reflects. For non-nested SVGs, the vertical size may be the height component of the {{SVGAttr("viewBox")}} attribute, if set.

In an HTML document, if both the {{SVGAttr("viewBox")}} and `height` attributes are omitted, the `height` property reflects that actual height. If no {{cssxref("height")}} or logical properties define the height, the `<svg>` element will be rendered with a height of `200px`. In this case, the `height` will be `200` or less, as the `height` is the size of the viewport's content-box size (the height minus any border and padding). The value would be `200`, not `200px`, as the `height` property is a number providing a relative value in user coordinate system units, not browser pixels.

The `height` property of a nested `<svg>` is determined by it's `height` attribute, if defined, with percentage values being relative to the height of the containing SVG. If omitted, the `height` is the same as the `<svg>` in which it is contained.

As noted above, CSS {{cssxref("height")}} property takes precedence over the `<svg>` element's `height` attribute, so the value may not reflect the element's appearance. The CSS `height` property doesn't apply to nested SVG elements.
The CSS {{cssxref("height")}} property takes precedence over the `<svg>` element's `height` attribute, so the value may not reflect the element's appearance. If both the {{SVGAttr("viewBox")}} and `height` attributes are omitted, the `height` property reflects that actual height.

## Value

Expand Down
8 changes: 2 additions & 6 deletions files/en-us/web/api/svgsvgelement/width/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,9 @@ browser-compat: api.SVGSVGElement.width

{{APIRef("SVG")}}

The **`width`** read-only property of the {{domxref("SVGSVGElement")}} interface describes the horizontal size of element as an {{domxref("SVGAnimatedLength")}}. It reflects the {{SVGElement("svg")}} element's {{SVGAttr("width")}} attribute.
The **`width`** read-only property of the {{domxref("SVGSVGElement")}} interface describes the horizontal size of element as an {{domxref("SVGAnimatedLength")}}. It reflects the {{SVGElement("svg")}} element's {{SVGAttr("width")}} attribute, which may not be the SVG's rendered width.

An SVG's size is primarily defined by CSS box model properties, while the `width` property reflects the `width` attribute, if present, otherwise, the width component of the {{SVGAttr("viewBox")}} attribute, if set. The `width` property is a number providing a relative value in user coordinate system, not browser pixels. Several features impact the inline dimension of an `<svg>` element, with some impacting the {{domxref("DOMRect.width")}} width but not this property when the `width` attribute is present. In an HTML document, if both the {{SVGAttr("viewBox")}} and `width` attributes are omitted, the `width` property reflects that actual width. If no {{cssxref("width")}} or logical properties defined the width, the `<svg>` element will be rendered with a width of `300px`. In this case, the `width` will be `300` or less, as the `width` is the size of the viewport's content-box size (the width minus any border and padding).

The `width` property of a nested `<svg>` is determined by it's `width` attribute, if defined, with percentage values being relative to the containing SVG. Otherwise, the `width` is the same as the `<svg>` in which it is contained. The CSS `width` property doesn't apply to nested SVG elements.

As noted above, CSS {{cssxref("width")}} property takes precedence over the `<svg>` element's `width` attribute, so the value may not reflect the element's appearance.
The CSS {{cssxref("width")}} property takes precedence over the `<svg>` element's `width` attribute, so the value may not reflect the element's appearance. If both the {{SVGAttr("viewBox")}} and `width` attributes are omitted, the `width` property reflects that actual width.

## Value

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/svgsvgelement/y/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: "SVGSVGElement: y property"
short-title: "y"
short-title: y
slug: Web/API/SVGSVGElement/y
page-type: web-api-instance-property
browser-compat: api.SVGSVGElement.y
Expand Down

0 comments on commit fc6779a

Please sign in to comment.