diff --git a/aio/content/images/guide/dependency-injection/injectors.svg b/aio/content/images/guide/dependency-injection/injectors.svg
index e2c308f09f536..b64ad452a08eb 100644
--- a/aio/content/images/guide/dependency-injection/injectors.svg
+++ b/aio/content/images/guide/dependency-injection/injectors.svg
@@ -1 +1 @@
-<svg aria-roledescription="stateDiagram" role="graphics-document document" viewBox="0 0 483.375 377" style="max-width: 100%;" class="statediagram" xmlns="http://www.w3.org/2000/svg" width="100%" id="graph-div" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><style>@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");'</style><style>#graph-div{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#000;}#graph-div .error-icon{fill:#fff;}#graph-div .error-text{fill:#000000;stroke:#000000;}#graph-div .edge-thickness-normal{stroke-width:2px;}#graph-div .edge-thickness-thick{stroke-width:3.5px;}#graph-div .edge-pattern-solid{stroke-dasharray:0;}#graph-div .edge-pattern-dashed{stroke-dasharray:3;}#graph-div .edge-pattern-dotted{stroke-dasharray:2;}#graph-div .marker{fill:#0059d3;stroke:#0059d3;}#graph-div .marker.cross{stroke:#0059d3;}#graph-div svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#graph-div defs #statediagram-barbEnd{fill:#0059d3;stroke:#0059d3;}#graph-div g.stateGroup text{fill:#0059d3;stroke:none;font-size:10px;}#graph-div g.stateGroup text{fill:#000;stroke:none;font-size:10px;}#graph-div g.stateGroup .state-title{font-weight:bolder;fill:#000;}#graph-div g.stateGroup rect{fill:#fff;stroke:#0059d3;}#graph-div g.stateGroup line{stroke:#0059d3;stroke-width:1;}#graph-div .transition{stroke:#0059d3;stroke-width:1;fill:none;}#graph-div .stateGroup .composit{fill:#fff;border-bottom:1px;}#graph-div .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#graph-div .state-note{stroke:hsl(52.6829268293, 60%, 73.9215686275%);fill:#fff5ad;}#graph-div .state-note text{fill:#333;stroke:none;font-size:10px;}#graph-div .stateLabel .box{stroke:none;stroke-width:0;fill:#fff;opacity:0.5;}#graph-div .edgeLabel .label rect{fill:#fff;opacity:0.5;}#graph-div .edgeLabel .label text{fill:#000;}#graph-div .label div .edgeLabel{color:#000;}#graph-div .stateLabel text{fill:#000;font-size:10px;font-weight:bold;}#graph-div .node circle.state-start{fill:#0059d3;stroke:#0059d3;}#graph-div .node .fork-join{fill:#0059d3;stroke:#0059d3;}#graph-div .node circle.state-end{fill:#0059d3;stroke:#fff;stroke-width:1.5;}#graph-div .end-state-inner{fill:#fff;stroke-width:1.5;}#graph-div .node rect{fill:#fff;stroke:#0059d3;stroke-width:1px;}#graph-div .node polygon{fill:#fff;stroke:#0059d3;stroke-width:1px;}#graph-div #statediagram-barbEnd{fill:#0059d3;}#graph-div .statediagram-cluster rect{fill:#fff;stroke:#0059d3;stroke-width:1px;}#graph-div .cluster-label,#graph-div .nodeLabel{color:#000;}#graph-div .statediagram-cluster rect.outer{rx:5px;ry:5px;}#graph-div .statediagram-state .divider{stroke:#0059d3;}#graph-div .statediagram-state .title-state{rx:5px;ry:5px;}#graph-div .statediagram-cluster.statediagram-cluster .inner{fill:#fff;}#graph-div .statediagram-cluster.statediagram-cluster-alt .inner{fill:#fff;}#graph-div .statediagram-cluster .inner{rx:0;ry:0;}#graph-div .statediagram-state rect.basic{rx:5px;ry:5px;}#graph-div .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#fff;}#graph-div .note-edge{stroke-dasharray:5;}#graph-div .statediagram-note rect{fill:#fff5ad;stroke:hsl(52.6829268293, 60%, 73.9215686275%);stroke-width:1px;rx:0;ry:0;}#graph-div .statediagram-note rect{fill:#fff5ad;stroke:hsl(52.6829268293, 60%, 73.9215686275%);stroke-width:1px;rx:0;ry:0;}#graph-div .statediagram-note text{fill:#333;}#graph-div .statediagram-note .nodeLabel{color:#333;}#graph-div .statediagram .edgeLabel{color:red;}#graph-div #dependencyStart,#graph-div #dependencyEnd{fill:#0059d3;stroke:#0059d3;stroke-width:1;}#graph-div .statediagramTitleText{text-anchor:middle;font-size:18px;fill:#000;}#graph-div :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><defs><marker orient="auto" markerUnits="strokeWidth" markerHeight="14" markerWidth="20" refY="7" refX="19" id="statediagram-barbEnd"><path d="M 19,7 L9,13 L14,7 L9,1 Z"></path></marker></defs><g class="root"><g class="clusters"></g><g class="edgePaths"><path marker-end="url(#statediagram-barbEnd)" style="fill:none" class="edge-thickness-normal transition" id="edge2413" d="M241.6875,282L241.6875,277.8333333333333C241.6875,273.6666666666667,241.6875,265.3333333333333,241.6875,257C241.6875,248.66666666666666,241.6875,240.33333333333334,241.6875,236.16666666666666L241.6875,232"></path><path marker-end="url(#statediagram-barbEnd)" style="fill:none" class="edge-thickness-normal transition" id="edge2414" d="M241.6875,145L241.6875,140.83333333333334C241.6875,136.66666666666666,241.6875,128.33333333333334,241.6875,120C241.6875,111.66666666666667,241.6875,103.33333333333333,241.6875,99.16666666666667L241.6875,95"></path></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><rect height="0" width="0" ry="0" rx="0"></rect><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><rect height="0" width="0" ry="0" rx="0"></rect><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(241.6875, 188.5)" id="state-elementInjector-2414" class="node  statediagram-state"><rect height="87" width="445.7437438964844" y="-43.5" x="-222.8718719482422" style="" class="basic label-container"></rect><g transform="translate(-215.3718719482422, -36)" style="" class="label"><rect></rect><foreignObject height="72" width="430.7437438964844"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">EnvironmentInjector<br/>(configured by Angular)<br/>has special things like DomSanitizer =&gt; providedIn 'platform'</span></div></foreignObject></g></g><g transform="translate(241.6875, 325.5)" id="state-rootInjector-2413" class="node  statediagram-state"><rect height="87" width="467.375" y="-43.5" x="-233.6875" style="" class="basic label-container"></rect><g transform="translate(-226.1875, -36)" style="" class="label"><rect></rect><foreignObject height="72" width="452.375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">root EnvironmentInjector<br/>(configured by AppConfig)<br/>has things for your app =&gt; bootstrapApplication(..., AppConfig)</span></div></foreignObject></g></g><g transform="translate(241.6875, 51.5)" id="state-nullInjector-2414" class="node  statediagram-state"><rect height="87" width="227.3625030517578" y="-43.5" x="-113.6812515258789" style="" class="basic label-container"></rect><g transform="translate(-106.1812515258789, -36)" style="" class="label"><rect></rect><foreignObject height="72" width="212.3625030517578"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">NullInjector<br/>always throws an error unless<br/>you use @Optional()</span></div></foreignObject></g></g></g></g></g></svg>
+<svg aria-roledescription="stateDiagram" role="graphics-document document" viewBox="0 0 483.375 377" style="max-width: 100%;" class="statediagram" xmlns="http://www.w3.org/2000/svg" width="100%" id="graph-div" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><style>@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");</style><style>#graph-div{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#000;}#graph-div .error-icon{fill:#fff;}#graph-div .error-text{fill:#000000;stroke:#000000;}#graph-div .edge-thickness-normal{stroke-width:2px;}#graph-div .edge-thickness-thick{stroke-width:3.5px;}#graph-div .edge-pattern-solid{stroke-dasharray:0;}#graph-div .edge-pattern-dashed{stroke-dasharray:3;}#graph-div .edge-pattern-dotted{stroke-dasharray:2;}#graph-div .marker{fill:#0059d3;stroke:#0059d3;}#graph-div .marker.cross{stroke:#0059d3;}#graph-div svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#graph-div defs #statediagram-barbEnd{fill:#0059d3;stroke:#0059d3;}#graph-div g.stateGroup text{fill:#0059d3;stroke:none;font-size:10px;}#graph-div g.stateGroup text{fill:#000;stroke:none;font-size:10px;}#graph-div g.stateGroup .state-title{font-weight:bolder;fill:#000;}#graph-div g.stateGroup rect{fill:#fff;stroke:#0059d3;}#graph-div g.stateGroup line{stroke:#0059d3;stroke-width:1;}#graph-div .transition{stroke:#0059d3;stroke-width:1;fill:none;}#graph-div .stateGroup .composit{fill:#fff;border-bottom:1px;}#graph-div .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#graph-div .state-note{stroke:hsl(52.6829268293, 60%, 73.9215686275%);fill:#fff5ad;}#graph-div .state-note text{fill:#333;stroke:none;font-size:10px;}#graph-div .stateLabel .box{stroke:none;stroke-width:0;fill:#fff;opacity:0.5;}#graph-div .edgeLabel .label rect{fill:#fff;opacity:0.5;}#graph-div .edgeLabel .label text{fill:#000;}#graph-div .label div .edgeLabel{color:#000;}#graph-div .stateLabel text{fill:#000;font-size:10px;font-weight:bold;}#graph-div .node circle.state-start{fill:#0059d3;stroke:#0059d3;}#graph-div .node .fork-join{fill:#0059d3;stroke:#0059d3;}#graph-div .node circle.state-end{fill:#0059d3;stroke:#fff;stroke-width:1.5;}#graph-div .end-state-inner{fill:#fff;stroke-width:1.5;}#graph-div .node rect{fill:#fff;stroke:#0059d3;stroke-width:1px;}#graph-div .node polygon{fill:#fff;stroke:#0059d3;stroke-width:1px;}#graph-div #statediagram-barbEnd{fill:#0059d3;}#graph-div .statediagram-cluster rect{fill:#fff;stroke:#0059d3;stroke-width:1px;}#graph-div .cluster-label,#graph-div .nodeLabel{color:#000;}#graph-div .statediagram-cluster rect.outer{rx:5px;ry:5px;}#graph-div .statediagram-state .divider{stroke:#0059d3;}#graph-div .statediagram-state .title-state{rx:5px;ry:5px;}#graph-div .statediagram-cluster.statediagram-cluster .inner{fill:#fff;}#graph-div .statediagram-cluster.statediagram-cluster-alt .inner{fill:#fff;}#graph-div .statediagram-cluster .inner{rx:0;ry:0;}#graph-div .statediagram-state rect.basic{rx:5px;ry:5px;}#graph-div .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#fff;}#graph-div .note-edge{stroke-dasharray:5;}#graph-div .statediagram-note rect{fill:#fff5ad;stroke:hsl(52.6829268293, 60%, 73.9215686275%);stroke-width:1px;rx:0;ry:0;}#graph-div .statediagram-note rect{fill:#fff5ad;stroke:hsl(52.6829268293, 60%, 73.9215686275%);stroke-width:1px;rx:0;ry:0;}#graph-div .statediagram-note text{fill:#333;}#graph-div .statediagram-note .nodeLabel{color:#333;}#graph-div .statediagram .edgeLabel{color:red;}#graph-div #dependencyStart,#graph-div #dependencyEnd{fill:#0059d3;stroke:#0059d3;stroke-width:1;}#graph-div .statediagramTitleText{text-anchor:middle;font-size:18px;fill:#000;}#graph-div :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><defs><marker orient="auto" markerUnits="strokeWidth" markerHeight="14" markerWidth="20" refY="7" refX="19" id="statediagram-barbEnd"><path d="M 19,7 L9,13 L14,7 L9,1 Z"></path></marker></defs><g class="root"><g class="clusters"></g><g class="edgePaths"><path marker-end="url(#statediagram-barbEnd)" style="fill:none" class="edge-thickness-normal transition" id="edge2413" d="M241.6875,282L241.6875,277.8333333333333C241.6875,273.6666666666667,241.6875,265.3333333333333,241.6875,257C241.6875,248.66666666666666,241.6875,240.33333333333334,241.6875,236.16666666666666L241.6875,232"></path><path marker-end="url(#statediagram-barbEnd)" style="fill:none" class="edge-thickness-normal transition" id="edge2414" d="M241.6875,145L241.6875,140.83333333333334C241.6875,136.66666666666666,241.6875,128.33333333333334,241.6875,120C241.6875,111.66666666666667,241.6875,103.33333333333333,241.6875,99.16666666666667L241.6875,95"></path></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><rect height="0" width="0" ry="0" rx="0"></rect><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><rect height="0" width="0" ry="0" rx="0"></rect><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(241.6875, 188.5)" id="state-elementInjector-2414" class="node  statediagram-state"><rect height="87" width="445.7437438964844" y="-43.5" x="-222.8718719482422" style="" class="basic label-container"></rect><g transform="translate(-215.3718719482422, -36)" style="" class="label"><rect></rect><foreignObject height="72" width="430.7437438964844"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">EnvironmentInjector<br/>(configured by Angular)<br/>has special things like DomSanitizer =&gt; providedIn 'platform'</span></div></foreignObject></g></g><g transform="translate(241.6875, 325.5)" id="state-rootInjector-2413" class="node  statediagram-state"><rect height="87" width="467.375" y="-43.5" x="-233.6875" style="" class="basic label-container"></rect><g transform="translate(-226.1875, -36)" style="" class="label"><rect></rect><foreignObject height="72" width="452.375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">root EnvironmentInjector<br/>(configured by AppConfig)<br/>has things for your app =&gt; bootstrapApplication(..., AppConfig)</span></div></foreignObject></g></g><g transform="translate(241.6875, 51.5)" id="state-nullInjector-2414" class="node  statediagram-state"><rect height="87" width="227.3625030517578" y="-43.5" x="-113.6812515258789" style="" class="basic label-container"></rect><g transform="translate(-106.1812515258789, -36)" style="" class="label"><rect></rect><foreignObject height="72" width="212.3625030517578"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">NullInjector<br/>always throws an error unless<br/>you use @Optional()</span></div></foreignObject></g></g></g></g></g></svg>