mdn · hamishwillee · Jul 2, 2024 · Jul 1, 2024
@@ -302,7 +302,7 @@ The methods for sniffing them out is not a casual exercise. You may be intereste
 - **JPG (Raster)**
 - **MNG (Raster)**: Multiple-image Network Graphics is a graphics file format for animated images. Also considered by some to be a video format.
 - **PNG, APNG (Raster)**: Portable Network Graphics and Animated Portable Network Graphics may both be animated.
-- **SVGs (Vector)**: The MDN document, ["SVG: Scalable Vector Graphics"](/en-US/docs/Web/SVG), notes that _"SVG is a text-based open Web standard. It is explicitly designed to work with other web standards such as [CSS](/en-US/docs/Web/CSS), [DOM](/en-US/docs/Web/API/Document_Object_Model), and [SMIL](/en-US/docs/Web/SVG/SVG_animation_with_SMIL)."_ SVGs can be used as an image like in this example: `<img src="example.svg" alt="This is an image using a svg as a source">`. This means that SVG appearance and animation can be controlled through CSS keyframes and animations. For interaction with JavaScript, see the MDN documents on [SVG Interfaces](/en-US/docs/Web/API/Document_Object_Model#svg_interfaces) and [Applying SVG effects to HTML content](/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content).
+- **SVGs (Vector)**: The MDN document, ["SVG: Scalable Vector Graphics"](/en-US/docs/Web/SVG), notes that _"SVG is a text-based open Web standard. It is explicitly designed to work with other web standards such as [CSS](/en-US/docs/Web/CSS), [DOM](/en-US/docs/Web/API/Document_Object_Model), and [SMIL](/en-US/docs/Web/SVG/SVG_animation_with_SMIL)."_ SVGs can be used as an image like in this example: `<img src="example.svg" alt="This is an image using a svg as a source">`. This means that SVG appearance and animation can be controlled through CSS keyframes and animations. For interaction with JavaScript, see the MDN documents on [SVG Interfaces](/en-US/docs/Web/API/Document_Object_Model#svg_dom) and [Applying SVG effects to HTML content](/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content).
 - **Voxel (Raster)**: Three-dimensional [voxel](https://en.wikipedia.org/wiki/Voxel) raster graphics are employed in video games, as well as in medical imaging.
 
 #### Text can also be animated

@@ -232,7 +232,7 @@ pre.target:hover {
 
 ### Example: Blurred Text
 
-In order to blur text, Webkit based browsers have a (prefixed) CSS filter called blur (see also [CSS filter](/en-US/docs/Web/CSS/filter#blur%28%29_2)). You can achieve the same effect using SVG filters.
+In order to blur text, there is a CSS filter function called [`blur()`](/en-US/docs/Web/CSS/filter-function/blur). You can achieve the same effect using SVG filters.
 
 ```html
 <p class="blur">Time to clean my glasses</p>

@@ -92,7 +92,7 @@ As a presentation attribute, it also can be used as a property directly inside a
 
 The following elements can use the `clip-rule` attribute, but only if they are inside a {{ SVGElement("clipPath") }} element.
 
-- [Graphical elements](/en-US/docs/Web/SVG/Element#graphical) »
+- [Graphics elements](/en-US/docs/Web/SVG/Element#graphics_elements)
 
 ## Browser compatibility
 

@@ -17,7 +17,7 @@ This table shows possible keywords and their meaning:
 | `use-credentials` | Client CORS requests for this element will have the credentials flag set to 'include'.                            |
 | `""`              | Setting the attribute name to an empty value, like `crossorigin` or `crossorigin=""`, is the same as `anonymous`. |
 
-It follows the same processing rules as the HTML attribute [`crossorigin`](/en-US/docs/Web/HTML/Global_attributes#crossorigin).
+It follows the same processing rules as the HTML attribute [`crossorigin`](/en-US/docs/Web/HTML/Attributes/crossorigin).
 
 ## Example
 

@@ -50,7 +50,7 @@ For {{SVGElement('path')}}, `d` is a string containing a series of path commands
     <tr>
       <th scope="row">Value</th>
       <td>
-        <strong><a href="/en-US/docs/Web/SVG/Content_type#string">&#x3C;string></a></strong>
+        <strong><a href="/en-US/docs/Web/CSS/string">&#x3C;string></a></strong>
       </td>
     </tr>
     <tr>
@@ -75,7 +75,7 @@ For {{SVGElement('glyph')}}, `d` is a string containing a series of path command
     <tr>
       <th scope="row">Value</th>
       <td>
-        <strong><a href="/en-US/docs/Web/SVG/Content_type#string">&#x3C;string></a></strong>
+        <strong><a href="/en-US/docs/Web/CSS/string">&#x3C;string></a></strong>
       </td>
     </tr>
     <tr>
@@ -102,7 +102,7 @@ For {{SVGElement('missing-glyph')}}, `d` is a string containing a series of path
     <tr>
       <th scope="row">Value</th>
       <td>
-        <strong><a href="/en-US/docs/Web/SVG/Content_type#string">&#x3C;string></a></strong>
+        <strong><a href="/en-US/docs/Web/CSS/string">&#x3C;string></a></strong>
       </td>
     </tr>
     <tr>

@@ -32,7 +32,7 @@ You can use this attribute with the following SVG elements:
         <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar">|</a>
         <code>&#x3C;urange></code>
         <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets">]</a
-        ><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark_()"
+        ><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark)"
           >#</a
         >
       </td>

@@ -32,7 +32,7 @@ You can use this attribute with the following SVG elements:
         <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar">|</a>
         <code>&#x3C;urange></code>
         <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets">]</a
-        ><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark_()"
+        ><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark"
           >#</a
         >
       </td>

@@ -24,7 +24,7 @@ You can use this attribute with the following SVG elements:
       <td>
         <code
           >&#x3C;urange><a
-            href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark_()"
+            href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark"
             title="The hash mark multiplier indicates that the entity may be repeated one or more times (for example, the plus multiplier), but each occurrence is separated by a comma (&#x27;,&#x27;)."
             >#</a
           ></code

@@ -68,7 +68,7 @@ svg {
   - : {{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}
 - [Other Animation attributes](/en-US/docs/Web/SVG/Attribute#animation_attributes)
   - : Most notably: {{SVGAttr("attributeName")}}, {{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}
-- [Animation event attributes](/en-US/docs/Web/SVG/Attribute#animation_event_attributes)
+- [Animation event attributes](/en-US/docs/Web/SVG/Attribute#event_attributes)
   - : Most notably: {{SVGAttr("onbegin")}}, {{SVGAttr("onend")}}, {{SVGAttr("onrepeat")}}
 
 ## Usage notes

@@ -238,6 +238,6 @@ SVG drawings and images are created using a wide array of elements which are ded
 
 - [SVG attribute reference](/en-US/docs/Web/SVG/Attribute)
 - [SVG Tutorial](/en-US/docs/Web/SVG/Tutorial)
-- [SVG interface reference](/en-US/docs/Web/API/Document_Object_Model#svg_interfaces)
+- [SVG interface reference](/en-US/docs/Web/API/Document_Object_Model#svg_dom)
 
 {{SVGRef}}
@@ -54,13 +54,13 @@ Click the circle to change colors.
 
 - [`crossorigin`](/en-US/docs/Web/HTML/Element/script#crossorigin)
   - : This attribute defines [CORS settings](/en-US/docs/Web/HTML/Attributes/crossorigin) as define for the HTML {{HTMLElement('script')}} element.
-    _Value type_: [**\<string>**](/en-US/docs/Web/SVG/Content_type#string); _Default value_: `?`; _Animatable_: **yes**
+    _Value type_: [**\<string>**](/en-US/docs/Web/CSS/string); _Default value_: `?`; _Animatable_: **yes**
 - {{SVGAttr("href")}}
   - : The {{Glossary("URL")}} to the script to load.
     _Value type_: **[\<URL>](/en-US/docs/Web/SVG/Content_type#url)** ; _Default value_: _none_; _Animatable_: **no**
 - {{SVGAttr("type")}}
   - : This attribute defines type of the script language to use.
-    _Value type_: [**\<string>**](/en-US/docs/Web/SVG/Content_type#string); _Default value_: `application/ecmascript`; _Animatable_: **no**
+    _Value type_: [**\<string>**](/en-US/docs/Web/CSS/string); _Default value_: `application/ecmascript`; _Animatable_: **no**
 - {{SVGAttr("xlink:href")}} {{deprecated_inline}}
   - : The {{Glossary("URL")}} to the script to load.
     _Value type_: **[\<URL>](/en-US/docs/Web/SVG/Content_type#url)** ; _Default value_: _none_; _Animatable_: **no**

@@ -41,13 +41,13 @@ svg {
 
 - {{SVGAttr("type")}}
   - : This attribute defines type of the style sheet language to use as a media type string.
-    _Value type_: [**\<string>**](/en-US/docs/Web/SVG/Content_type#string); _Default value_: `text/css`; _Animatable_: **no**
+    _Value type_: [**\<string>**](/en-US/docs/Web/CSS/string); _Default value_: `text/css`; _Animatable_: **no**
 - {{SVGAttr("media")}}
   - : This attribute defines to which {{cssxref('@media', 'media')}} the style applies.
-    _Value type_: [**`<string>`**](/en-US/docs/Web/SVG/Content_type#string); _Default value_: `all`; _Animatable_: **no**
+    _Value type_: [**`<string>`**](/en-US/docs/Web/CSS/string); _Default value_: `all`; _Animatable_: **no**
 - {{SVGAttr("title")}}
   - : This attribute is the title of the style sheet which can be used to switch between [alternate style sheets](/en-US/docs/Web/CSS/Alternative_style_sheets).
-    _Value type_: [**`<string>`**](/en-US/docs/Web/SVG/Content_type#string); _Default value_: _none_; _Animatable_: **no**
+    _Value type_: [**`<string>`**](/en-US/docs/Web/CSS/string); _Default value_: _none_; _Animatable_: **no**
 
 ## Usage context
 

@@ -27,7 +27,7 @@ See also, [SVG Tutorial](/en-US/docs/Web/SVG/Tutorial).
   - : Details about each SVG element.
 - [SVG attribute reference](/en-US/docs/Web/SVG/Attribute)
   - : Details about each SVG attribute.
-- [SVG DOM interface reference](/en-US/docs/Web/API/Document_Object_Model#svg_interfaces)
+- [SVG DOM interface reference](/en-US/docs/Web/API/Document_Object_Model#svg_dom)
   - : Details about the SVG DOM API, for interaction with JavaScript.
 - [Applying SVG effects to HTML content](/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
   - : SVG works together with {{Glossary("HTML")}}, {{Glossary("CSS")}} and {{Glossary("JavaScript")}}.

@@ -86,7 +86,7 @@ All the above transformations can be expressed by a 2x3 transformation matrix. T
 
 <math display="block"><semantics><mrow><mo>{</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>newCoordSys</mi></mrow></mstyle></msub><mo>=</mo><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prevCoordSys</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prevCoordSys</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>newCoordSys</mi></mrow></mstyle></msub><mo>=</mo><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prevCoordSys</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prevCoordSys</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr></mtable></mrow><annotation encoding="TeX">\left\{ \begin{matrix} x*{\mathrm{prevCoordSys}} = a x*{\mathrm{newCoordSys}} + c y*{\mathrm{newCoordSys}} + e \\ y*{\mathrm{prevCoordSys}} = b x*{\mathrm{newCoordSys}} + d y*{\mathrm{newCoordSys}} + f \end{matrix} \right.</annotation></semantics></math>
 
-See a [concrete example on the SVG transform documentation](/en-US/docs/Web/SVG/Attribute/transform#general_transformation). Detailed information about this property can be found in the [SVG Recommendation](https://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined).
+See a [concrete example on the SVG transform documentation](/en-US/docs/Web/SVG/Attribute/transform#matrix). Detailed information about this property can be found in the [SVG Recommendation](https://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined).
 
 ## Effects on Coordinate Systems
 

@@ -31,7 +31,7 @@ Before starting you should have a basic understanding of XML or another markup l
 - SVG elements and attributes should all be entered in the case shown here since XML is case-sensitive (unlike HTML).
 - Attribute values in SVG must be placed inside quotes, even if they are numbers.
 
-SVG is a huge specification. This tutorial attempts to cover the basics. Once you are familiar, you should be able to use the [Element Reference](/en-US/docs/Web/SVG/Element) and the [Interface Reference](/en-US/docs/Web/API/Document_Object_Model#svg_interfaces) to find out anything else you need to know.
+SVG is a huge specification. This tutorial attempts to cover the basics. Once you are familiar, you should be able to use the [Element Reference](/en-US/docs/Web/SVG/Element) and the [Interface Reference](/en-US/docs/Web/API/Document_Object_Model#svg_dom) to find out anything else you need to know.
 
 ## Flavors of SVG