From 084a96f4a3cc385c921be1f6d4981951445cde2f Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Tue, 24 Mar 2026 15:43:20 +0100 Subject: [PATCH] Add font-width SVG attribute --- .../reference/properties/font-width/index.md | 1 + .../reference/attribute/font-stretch/index.md | 9 ++- .../reference/attribute/font-width/index.md | 58 +++++++++++++++++++ .../web/svg/reference/attribute/index.md | 2 + 4 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 files/en-us/web/svg/reference/attribute/font-width/index.md diff --git a/files/en-us/web/css/reference/properties/font-width/index.md b/files/en-us/web/css/reference/properties/font-width/index.md index c91cd4b7202b7ec..4752acbbd201c9a 100644 --- a/files/en-us/web/css/reference/properties/font-width/index.md +++ b/files/en-us/web/css/reference/properties/font-width/index.md @@ -339,6 +339,7 @@ p { - Legacy {{cssxref("font-stretch")}} alias property with better browser support - {{cssxref("font-style")}} property - {{cssxref("font-weight")}} property +- SVG {{SVGAttr("font-width")}} attribute - SVG {{SVGAttr("font-stretch")}} attribute - [Learn: Fundamental text and font styling](/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals) - [CSS fonts](/en-US/docs/Web/CSS/Guides/Fonts) module diff --git a/files/en-us/web/svg/reference/attribute/font-stretch/index.md b/files/en-us/web/svg/reference/attribute/font-stretch/index.md index 2fc7094685c106f..63c0d50066009eb 100644 --- a/files/en-us/web/svg/reference/attribute/font-stretch/index.md +++ b/files/en-us/web/svg/reference/attribute/font-stretch/index.md @@ -13,7 +13,7 @@ sidebar: svgref The **`font-stretch`** attribute indicates the desired amount of condensing or expansion in the glyphs used to render the text. > [!NOTE] -> As a presentation attribute, `font-stretch` also has a CSS property counterpart: {{cssxref("font-stretch")}}. When both are specified, the CSS property takes priority. +> The `font-stretch` attribute was renamed to {{SVGAttr("font-width")}} following the renaming of the corresponding CSS property. The {{cssxref("font-stretch")}} CSS property is now a legacy alias for the {{cssxref("font-width")}} property. While `font-width` is the specification's preferred name, `font-stretch` currently has broader browser support. You can use this attribute with the following SVG elements: @@ -21,6 +21,9 @@ You can use this attribute with the following SVG elements: - {{SVGElement("textPath")}} - {{SVGElement("tspan")}} +> [!NOTE] +> As a presentation attribute, `font-stretch` also has a CSS property counterpart: {{cssxref("font-stretch")}}. When both are specified, the CSS property takes priority. + ## Usage notes @@ -50,4 +53,6 @@ You can use this attribute with the following SVG elements: ## See also -- CSS {{cssxref("font-stretch")}} property +- SVG {{SVGAttr("font-width")}} attribute (modern replacement) +- CSS {{cssxref("font-width")}} property +- CSS {{cssxref("font-stretch")}} property (legacy alias) diff --git a/files/en-us/web/svg/reference/attribute/font-width/index.md b/files/en-us/web/svg/reference/attribute/font-width/index.md new file mode 100644 index 000000000000000..02d1a68ad20ca07 --- /dev/null +++ b/files/en-us/web/svg/reference/attribute/font-width/index.md @@ -0,0 +1,58 @@ +--- +title: font-width +slug: Web/SVG/Reference/Attribute/font-width +page-type: svg-attribute +status: + - experimental +browser-compat: svg.global_attributes.font-width +sidebar: svgref +--- + +{{SeeCompatTable}} + +The **`font-width`** attribute selects a normal, condensed, or expanded face from a font family for the glyphs used to render the text. + +> [!NOTE] +> The `font-width` attribute is the modern replacement for the deprecated {{SVGAttr("font-stretch")}} attribute. While `font-width` is the specification's preferred name, `font-stretch` currently has broader browser support. + +You can use this attribute with the following SVG elements: + +- {{SVGElement("text")}} +- {{SVGElement("textPath")}} +- {{SVGElement("tspan")}} + +> [!NOTE] +> As a presentation attribute, `font-width` also has a CSS property counterpart: {{cssxref("font-width")}}. When both are specified, the CSS property takes priority. + +## Usage notes + +
+ + + + + + + + + + + + + + +
ValueSee {{cssxref("font-width", "", "#formal_syntax")}}
Default valuenormal
AnimatableYes
+ +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- CSS {{cssxref("font-width")}} property +- Legacy SVG {{SVGAttr("font-stretch")}} attribute +- CSS {{cssxref("font-stretch")}} property diff --git a/files/en-us/web/svg/reference/attribute/index.md b/files/en-us/web/svg/reference/attribute/index.md index 64a868ae5be1c92..f53e490252be5ef 100644 --- a/files/en-us/web/svg/reference/attribute/index.md +++ b/files/en-us/web/svg/reference/attribute/index.md @@ -86,6 +86,7 @@ Below is a list of all of the attributes available in SVG along with links to re - {{SVGAttr("font-style")}} - {{SVGAttr("font-variant")}} - {{SVGAttr("font-weight")}} +- {{SVGAttr("font-width")}} - {{SVGAttr("fr")}} - {{SVGAttr("from")}} - {{SVGAttr("fx")}} @@ -361,6 +362,7 @@ All SVG presentation attributes can be used as CSS properties. - {{SVGAttr("font-style")}} - {{SVGAttr("font-variant")}} - {{SVGAttr("font-weight")}} +- {{SVGAttr("font-width")}} - {{SVGAttr("glyph-orientation-horizontal")}} - {{SVGAttr("glyph-orientation-vertical")}} - {{SVGAttr("height")}}