Update value list for svg <image> & <foreignObject> elements (#37716

) * Update value list for svg `<image>` & `<foreignObject>` elements * update svg data * fix ci
mdn · Jan 31, 2025 · 78396d3 · 78396d3
1 parent ea83256
commit 78396d3
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 23 deletions.
diff --git a/files/en-us/web/svg/element/foreignobject/index.md b/files/en-us/web/svg/element/foreignobject/index.md
@@ -68,6 +68,10 @@ svg {
 > [!NOTE]
 > Starting with SVG2, `x`, `y`, `width`, and `height` are _Geometry Properties_, meaning those attributes can also be used as CSS properties for that element.
 
+## DOM Interface
+
+This element implements the {{domxref("SVGForeignObjectElement")}} interface.
+
 ## Usage context
 
 {{svginfo}}

diff --git a/files/en-us/web/svg/element/image/index.md b/files/en-us/web/svg/element/image/index.md
@@ -22,18 +22,37 @@ SVG files displayed with `<image>` are [treated as an image](/en-US/docs/Web/SVG
 
 ## Attributes
 
-- {{SVGAttr("x")}}: Positions the image horizontally from the origin.
-- {{SVGAttr("y")}}: Positions the image vertically from the origin.
-- {{SVGAttr("width")}}: The width the image renders at. Unlike HTML's `<img>`, this attribute is required.
-- {{SVGAttr("height")}}: The height the image renders at. Unlike HTML's `<img>`, this attribute is required.
-- {{SVGAttr("href")}} and {{SVGAttr("xlink:href")}}{{deprecated_inline}}: Points at a URL for the image file.
-- {{SVGAttr("preserveAspectRatio")}}: Controls how the image is scaled.
-- {{SVGAttr("crossorigin")}}: Defines the value of the credentials flag for CORS requests.
-- {{SVGAttr("decoding")}}: Provides a hint to the browser as to whether it should perform image decoding synchronously or asynchronously.
+- {{SVGAttr("x")}}
+  - : Positions the image horizontally from the origin.
+    _Value type_: [**\<length>**](/en-US/docs/Web/SVG/Content_type#length)|[**\<percentage>**](/en-US/docs/Web/SVG/Content_type#percentage) ; _Default value_: `0`; _Animatable_: **yes**
+- {{SVGAttr("y")}}
+  - : Positions the image vertically from the origin.
+    _Value type_: [**\<length>**](/en-US/docs/Web/SVG/Content_type#length)|[**\<percentage>**](/en-US/docs/Web/SVG/Content_type#percentage) ; _Default value_: `0`; _Animatable_: **yes**
+- {{SVGAttr("width")}}
+  - : The width the image renders at. Unlike HTML's `<img>`, this attribute is required.
+    _Value type_: [**\<length>**](/en-US/docs/Web/SVG/Content_type#length)|[**\<percentage>**](/en-US/docs/Web/SVG/Content_type#percentage) ; _Default value_: `auto`; _Animatable_: **yes**
+- {{SVGAttr("height")}}
+  - : The height the image renders at. Unlike HTML's `<img>`, this attribute is required.
+    _Value type_: [**\<length>**](/en-US/docs/Web/SVG/Content_type#length)|[**\<percentage>**](/en-US/docs/Web/SVG/Content_type#percentage) ; _Default value_: `auto`; _Animatable_: **yes**
+- {{SVGAttr("href")}}
+  - : Points at a URL for the image file.
+    _Value type_: **[\<URL>](/en-US/docs/Web/SVG/Content_type#url)** ; _Default value_: _none_; _Animatable_: **no**
+- {{SVGAttr("preserveAspectRatio")}}
+  - : Controls how the image is scaled.
+    _Value type_: (`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ; _Default value_: `xMidYMid meet`; _Animatable_: **yes**
+- {{SVGAttr("crossorigin")}}
+  - : Defines the value of the credentials flag for CORS requests.
+    _Value type_: [ anonymous | use-credentials ]? ; _Default value_: None; _Animatable_: **yes**
+- {{SVGAttr("decoding")}}
+  - : Provides a hint to the browser as to whether it should perform image decoding synchronously or asynchronously.
+    _Value type_: `async | sync | auto` ; _Default value_: `auto`; _Animatable_: **yes**
+- {{SVGAttr("xlink:href")}}{{deprecated_inline}}
+  - : Points at a URL for the image file.
+    _Value type_: **[\<URL>](/en-US/docs/Web/SVG/Content_type#url)** ; _Default value_: _none_; _Animatable_: **no**
 
 ## DOM Interface
 
-`<image>` implements the {{domxref("SVGImageElement")}} interface.
+This element implements the {{domxref("SVGImageElement")}} interface.
 
 ## Example
 

diff --git a/files/jsondata/SVGData.json b/files/jsondata/SVGData.json
@@ -803,19 +803,15 @@
       "interfaces": ["SVGFontFaceUriElement"]
     },
     "foreignObject": {
-      "categories": ["noCategory"],
+      "categories": ["graphicsElement", "renderableElement"],
       "content": {
         "description": "anyElementsOrCharacterData"
       },
       "attributes": [
+        "ariaAttributes",
         "conditionalProcessingAttributes",
         "coreAttributes",
-        "graphicalEventAttributes",
         "presentationAttributes",
-        "'class'",
-        "'style'",
-        "'externalResourcesRequired'",
-        "'transform'",
         "'x'",
         "'y'",
         "'width'",
@@ -939,26 +935,37 @@
       "interfaces": ["SVGHKernElement"]
     },
     "image": {
-      "categories": ["graphicsElement", "graphicsReferencingElement"],
+      "categories": [
+        "graphicsElement",
+        "graphicsReferencingElement",
+        "renderableElement"
+      ],
       "content": {
         "description": "anyNumberOfElementsAnyOrder",
-        "elements": ["animationElements", "descriptiveElements"]
+        "elements": [
+          "animationElements",
+          "descriptiveElements",
+          "&lt;animate&gt;",
+          "&lt;animateMotion&gt;",
+          "&lt;animateTransform&gt;",
+          "&lt;discard&gt;",
+          "&lt;script&gt;",
+          "&lt;set&gt;",
+          "&lt;style&gt;"
+        ]
       },
       "attributes": [
+        "ariaAttributes",
         "conditionalProcessingAttributes",
         "coreAttributes",
-        "graphicalEventAttributes",
         "xLinkAttributes",
         "presentationAttributes",
-        "'class'",
-        "'style'",
-        "'externalResourcesRequired'",
-        "'transform'",
         "'x'",
         "'y'",
         "'width'",
         "'height'",
-        "'xlink:href'",
+        "'crossorigin'",
+        "'href'",
         "'preserveAspectRatio'"
       ],
       "interfaces": ["SVGImageElement"]