MDN feature pages for SVGAnimatedInteger (#37070)

* MDN feature pages for SVGAnimatedInteger

* fix: example for animval

* fix: consistency with other pages

* explicity mentioned integer content type

* add: attribute details

* fix: queryselector for feTurbulence element

* fix: see also section with better links

* fix: example

* fix format

* fix: property's attributes

* fix: desc

---------

Co-authored-by: wbamberg <[email protected]>

files/en-us/web/api/svganimatedinteger/animval/index.md

@@ -0,0 +1,46 @@
+---
+title: "SVGAnimatedInteger: animVal property"
+short-title: animVal
+slug: Web/API/SVGAnimatedInteger/animVal
+page-type: web-api-instance-property
+browser-compat: api.SVGAnimatedInteger.animVal
+---
+
+{{APIRef("SVG")}}
+
+The **`animVal`** property of the {{domxref("SVGAnimatedInteger")}} interface represents the animated value of an [`<integer>`](/en-US/docs/Web/SVG/Content_type#integer). If no animation is applied, `animVal` equals `baseVal`.
+
+Some attributes, like the {{SVGAttr("numOctaves")}} attribute of the {{SVGElement("feTurbulence")}} element or the {{SVGAttr("order")}} attribute of the {{SVGElement("feConvolveMatrix")}} accept a `long` integer as a value. This property provides access to the current animated state of the attribute as a number.
+
+## Value
+
+A `long`; the animated value of the attribute.
+
+## Examples
+
+```js
+const feTurbulence = document.querySelector("feTurbulence");
+
+// Set the animatable 'numOctaves' attribute
+feTurbulence.setAttribute("numOctaves", "4");
+
+// Access the SVGAnimatedInteger object
+const animatedInteger = feTurbulence.numOctaves;
+
+// Get the animated value (read-only)
+console.log(animatedInteger.animVal); // Output: 4 (the current animated value)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [`<integer>`](/en-US/docs/Web/SVG/Content_type#integer)
+- {{SVGAttr("numOctaves")}}
+- {{SVGAttr("order")}}

files/en-us/web/api/svganimatedinteger/baseval/index.md

@@ -0,0 +1,52 @@
+---
+title: "SVGAnimatedInteger: baseVal property"
+short-title: baseVal
+slug: Web/API/SVGAnimatedInteger/baseVal
+page-type: web-api-instance-property
+browser-compat: api.SVGAnimatedInteger.baseVal
+---
+
+{{APIRef("SVG")}}
+
+The **`baseVal`** property of the {{domxref("SVGAnimatedInteger")}} interface represents the base (non-animated) value of an animatable [`<integer>`](/en-US/docs/Web/SVG/Content_type#integer).
+
+Some attributes, like the {{SVGAttr("numOctaves")}} attribute of the {{SVGElement("feTurbulence")}} element or the {{SVGAttr("order")}} attribute of the {{SVGElement("feConvolveMatrix")}} accept a `long` integer as a value. This property provides access to the static non-animated state of the attribute as a number.
+
+## Value
+
+A `long`; the base (non-animated) value of the reflected attribute.
+
+## Examples
+
+```js
+const feTurbulence = document.querySelector("feTurbulence");
+
+// Set the animatable 'numOctaves' attribute
+feTurbulence.setAttribute("numOctaves", "4");
+
+// Access the SVGAnimatedInteger object
+const animatedInteger = feTurbulence.numOctaves;
+
+// Get the base value
+console.log(animatedInteger.baseVal); // Output: 4
+
+// Modify the base value
+animatedInteger.baseVal = 6;
+
+// Verify the reflected attribute value
+console.log(feTurbulence.getAttribute("numOctaves")); // Output: "6"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [`<integer>`](/en-US/docs/Web/SVG/Content_type#integer)
+- {{SVGAttr("numOctaves")}}
+- {{SVGAttr("order")}}

files/en-us/web/api/svganimatedinteger/index.md

@@ -27,7 +27,7 @@ The `SVGAnimatedInteger` interface is used for attributes of basic type [\<integ
       <th scope="row">Properties</th>
       <td>
         <ul>
-          <li>readonly long <code>baseVal</code></li>
+          <li>long <code>baseVal</code></li>
           <li>readonly long <code>animVal</code></li>
         </ul>
       </td>
@@ -56,14 +56,14 @@ The `SVGAnimatedInteger` interface is used for attributes of basic type [\<integ
   </thead>
   <tbody>
     <tr>
-      <td><code>baseVal</code></td>
+      <td><code>{{domxref("SVGAnimatedInteger.baseVal", "baseVal")}}</code></td>
       <td>long</td>
       <td>
         The base value of the given attribute before applying any animations.
       </td>
     </tr>
     <tr>
-      <td><code>animVal</code></td>
+      <td><code>{{domxref("SVGAnimatedInteger.animVal", "animVal")}}</code></td>
       <td>long</td>
       <td>
         If the given attribute or property is being animated, contains the