MDN Feature Pages for SVGAnimatedBoolean (mdn#37069)

* MDN Feature Pages for SVGAnimatedBoolean

* fix: consistency with other pages

* fix: see also section with better links

* fix: example

* Update files/en-us/web/api/svganimatedboolean/animval/index.md

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* Update files/en-us/web/api/svganimatedboolean/baseval/index.md

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* fix: lint

* fix: grammatical mistake

---------

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

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

@@ -0,0 +1,30 @@
+---
+title: "SVGAnimatedBoolean: animVal property"
+short-title: animVal
+slug: Web/API/SVGAnimatedBoolean/animVal
+page-type: web-api-instance-property
+browser-compat: api.SVGAnimatedBoolean.animVal
+---
+
+{{APIRef("SVG")}}
+
+The **`animVal`** read-only property of the {{domxref("SVGAnimatedBoolean")}} interface represents the current animated value of the associated animatable boolean SVG attribute. If the attribute is not animated, `animVal` is the same as {{domxref("SVGAnimatedBoolean.baseVal")}}.
+
+Some boolean SVG attributes, such as [`preserveAlpha`](/en-US/docs/Web/SVG/Attribute/preserveAlpha), are animatable. In such cases, `SVGAnimatedBoolean.animVal` property is `true` when the attribute value resolves to true. Otherwise, the value is `false`.
+
+## Value
+
+A boolean; the value of the animatable boolean attribute.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGElement")}}
+- {{domxref("SVGAnimationElement")}}

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

@@ -0,0 +1,30 @@
+---
+title: "SVGAnimatedBoolean: baseVal property"
+short-title: baseVal
+slug: Web/API/SVGAnimatedBoolean/baseVal
+page-type: web-api-instance-property
+browser-compat: api.SVGAnimatedBoolean.baseVal
+---
+
+{{APIRef("SVG")}}
+
+The **`baseVal`** property of the {{domxref("SVGAnimatedBoolean")}} interface is the value of the associated animatable boolean SVG attribute in its base (none-animated) state. It reflects the value of the associated animatable boolean attribute when no animations are applied.
+
+Some boolean SVG attributes, such as [`preserveAlpha`](/en-US/docs/Web/SVG/Attribute/preserveAlpha), are animatable. In such cases, `SVGAnimatedBoolean.baseVal` property is `false` when the attribute is set to `false`, is omitted and defaults to `false`, or is inheritable and inherits `false`. Otherwise, the value is `true`.
+
+## Value
+
+A boolean; the base value of the reflected attribute.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGElement")}}
+- {{domxref("SVGAnimationElement")}}

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

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