docs(health-index): swapping PNGs with SVGs

elements/rh-health-index/docs/00-overview.md

@@ -3,7 +3,7 @@
 {{ tagName | getElementDescription }}
 
 <uxdot-example width-adjustment="752px">
-  <img src="{{ './overview.png' | url }}" alt="Four health index components. One is green with letter grade A, one is yellow with letter grade C, one is orange with letter grade D, and one is red with letter grade F.">
+  <img src="{{ './overview.svg' | url }}" alt="Four health index components. One is green with letter grade A, one is yellow with letter grade C, one is orange with letter grade D, and one is red with letter grade F.">
 </uxdot-example>
 
 
@@ -32,4 +32,3 @@ View a live version of this component and see how it can be customized.
 
 
 {% repoStatusChecklist %}
-

elements/rh-health-index/docs/10-style.md

@@ -18,7 +18,7 @@ Health index is a combination of letter grades and severity colors. Severity col
 
 <figure>
   <uxdot-example width-adjustment="752px">
-    <img src="{{ '../style-anatomy.png' | url }}" alt="Anatomy of 3 health index components. Annotation #1 is pointing to the letter grade and annotation #2 is pointing to the severity level.">
+    <img src="{{ '../style-anatomy.svg' | url }}" alt="Anatomy of 3 health index components. Annotation #1 is pointing to the letter grade and annotation #2 is pointing to the severity level.">
   </uxdot-example>
   <figcaption>
     <ol>
@@ -34,7 +34,7 @@ Health index is a combination of letter grades and severity colors. Severity col
 There are four available variants: `Small`, `Default`, `Large`, and `Extra large`. The only difference between the Large and Extra large variants is the size.
 
 <uxdot-example width-adjustment="752px">
-  <img src="{{ '../style-variants.png' | url }}" alt="4 columns of health index components. Each column is a different size. Under each column, there is every letter grade and severity color.">
+  <img src="{{ '../style-variants.svg' | url }}" alt="4 columns of health index components. Each column is a different size. Under each column, there is every letter grade and severity color.">
 </uxdot-example>
 
 
@@ -45,30 +45,30 @@ Health index is available in both light and dark themes.
 ### Light theme
 
 <uxdot-example width-adjustment="752px">
-  <img src="{{ '../style-theme-light.png' | url }}" alt="Light theme health index component examples.">
+  <img src="{{ '../style-theme-light.svg' | url }}" alt="Light theme health index component examples.">
 </uxdot-example>
 
 <uxdot-example color-palette="lighter" width-adjustment="752px">
-  <img src="{{ '../style-theme-light.png' | url }}" alt="Light theme health index component examples.">
+  <img src="{{ '../style-theme-light.svg' | url }}" alt="Light theme health index component examples.">
 </uxdot-example>
 
 <uxdot-example color-palette="light" width-adjustment="752px">
-  <img src="{{ '../style-theme-light.png' | url }}" alt="Light theme health index component examples.">
+  <img src="{{ '../style-theme-light.svg' | url }}" alt="Light theme health index component examples.">
 </uxdot-example>
 
 
 ### Dark theme
 
 <uxdot-example color-palette="dark" width-adjustment="752px">
-  <img src="{{ '../style-theme-dark.png' | url }}" alt="Dark theme health index component examples.">
+  <img src="{{ '../style-theme-dark.svg' | url }}" alt="Dark theme health index component examples.">
 </uxdot-example>
 
 <uxdot-example color-palette="darker" width-adjustment="752px">
-  <img src="{{ '../style-theme-dark.png' | url }}" alt="Dark theme health index component examples.">
+  <img src="{{ '../style-theme-dark.svg' | url }}" alt="Dark theme health index component examples.">
 </uxdot-example>
 
 <uxdot-example color-palette="darkest" width-adjustment="752px">
-  <img src="{{ '../style-theme-dark.png' | url }}" alt="Dark theme health index component examples.">
+  <img src="{{ '../style-theme-dark.svg' | url }}" alt="Dark theme health index component examples.">
 </uxdot-example>
 
 
@@ -77,7 +77,7 @@ Health index is available in both light and dark themes.
 Squares in the Default, Large, and Extra large variants are aligned horizontally.
 
 <uxdot-example width-adjustment="752px">
-  <img src="{{ '../style-configuration.png' | url }}" alt="3 examples of health index component configurations. The small size is just 1 square, so it’s horizontally and vertically centered. The default, large, and extra large sizes are rows of squares, so they’re horizontally centered only.">
+  <img src="{{ '../style-configuration.svg' | url }}" alt="3 examples of health index component configurations. The small size is just 1 square, so it’s horizontally and vertically centered. The default, large, and extra large sizes are rows of squares, so they’re horizontally centered only.">
 </uxdot-example>
 
 
@@ -86,7 +86,7 @@ Squares in the Default, Large, and Extra large variants are aligned horizontally
 The spacer in the Default variant is the same for all viewport sizes.
 
 <uxdot-example width-adjustment="240px">
-  <img src="{{ '../style-space.png' | url }}" alt="Health index component with a 16px spacer box in between a C letter grade and a row of severity squares. The active severity square is yellow.">
+  <img src="{{ '../style-space.svg' | url }}" alt="Health index component with a 16px spacer box in between a C letter grade and a row of severity squares. The active severity square is yellow.">
 </uxdot-example>
 
 
@@ -97,7 +97,7 @@ The spacer in the Default variant is the same for all viewport sizes.
 Depending on the theme and chosen variant, each severity level can have different colors and font styling.
 
 <uxdot-example width-adjustment="752px">
-  <img src="{{ '../style-severity-level-light.png' | url }}" alt="Multiple light theme health index components at different sizes. Annotations 1 through 4 are pointing to various styling details as well as letter grades that have been enlarged.">
+  <img src="{{ '../style-severity-level-light.svg' | url }}" alt="Multiple light theme health index components at different sizes. Annotations 1 through 4 are pointing to various styling details as well as letter grades that have been enlarged.">
 </uxdot-example>
 
 <rh-table>
@@ -162,7 +162,7 @@ Depending on the theme and chosen variant, each severity level can have differen
 
 
 <uxdot-example color-palette="darkest" width-adjustment="752px">
-  <img src="{{ '../style-severity-level-dark.png' | url }}" alt="Multiple dark theme health index components at different sizes. Annotations 1 through 4 are pointing to various styling details as well as letter grades that have been enlarged..">
+  <img src="{{ '../style-severity-level-dark.svg' | url }}" alt="Multiple dark theme health index components at different sizes. Annotations 1 through 4 are pointing to various styling details as well as letter grades that have been enlarged..">
 </uxdot-example>
 
 <rh-table>
@@ -228,4 +228,4 @@ Depending on the theme and chosen variant, each severity level can have differen
 
 ## Interactive
 
-Health index includes only text and is not interactive.
+Health index includes only text and is not interactive.

elements/rh-health-index/docs/20-guidelines.md

@@ -20,7 +20,7 @@ There are four available variants: `Small`, `Default`, `Large`, and `Extra large
 
 
 <uxdot-example width-adjustment="752px">
-  <img src="{{ '../guidelines-variants.png' | url }}" alt="A row of health index components with emphasis descriptions under each size. Small is low, default is medium, large is high, and extra large is highest.">
+  <img src="{{ '../guidelines-variants.svg' | url }}" alt="A row of health index components with emphasis descriptions under each size. Small is low, default is medium, large is high, and extra large is highest.">
 </uxdot-example>
 
 <rh-table>
@@ -70,7 +70,7 @@ When health index shows a grade of “A” and the severity level color is green
 
 
 <uxdot-example width-adjustment="640px">
-  <img src="{{ '../guidelines-severity-levels.png' | url }}" alt="A 3 by 3 grid of small size health index components. Each row has letter grades A, C, and F. Under each letter grade is text that describes a safe, at risk, or vulnerable state.">
+  <img src="{{ '../guidelines-severity-levels.svg' | url }}" alt="A 3 by 3 grid of small size health index components. Each row has letter grades A, C, and F. Under each letter grade is text that describes a safe, at risk, or vulnerable state.">
 </uxdot-example>
 
 
@@ -89,7 +89,7 @@ Health index should always be placed near helpful text or other content that exp
 Health index can be stacked with other content. In such cases, we recommend using the Small variant, as it does not take focus away from surrounding information.
 
 <uxdot-example width-adjustment="120px">
-  <img src="{{ '../guidelines-layout-stacked.png' | url }}" alt="A small size health index component with a letter grade A at the bottom of a stack of text.">
+  <img src="{{ '../guidelines-layout-stacked.svg' | url }}" alt="A small size health index component with a letter grade A at the bottom of a stack of text.">
 </uxdot-example>
 
 
@@ -98,7 +98,7 @@ Health index can be stacked with other content. In such cases, we recommend usin
 Health index can also be inserted inline with text and components. In such cases, we recommend using the Large or Extra large variants to maintain equal hierarchy among elements.
 
 <uxdot-example width-adjustment="752px">
-  <img src="{{ '../guidelines-layout-inline.png' | url }}" alt="An extra large size health index component with a letter grade F in between a heading, body text, and a call to action.">
+  <img src="{{ '../guidelines-layout-inline.svg' | url }}" alt="An extra large size health index component with a letter grade F in between a heading, body text, and a call to action.">
 </uxdot-example>
 
 
@@ -111,14 +111,14 @@ Letter grades and severity level colors are designed to work together. Mixing th
 <div class="grid sm-two-columns">
   <uxdot-best-practice do>
     <uxdot-example color-palette="lightest" width-adjustment="176px" slot="image">
-      <img src="{{ '../guidelines-best-practice-1-do.png' | url }}" alt="Small, default, and large size health index components displaying correct letter grades and severity colors.">
+      <img src="{{ '../guidelines-best-practice-1-do.svg' | url }}" alt="Small, default, and large size health index components displaying correct letter grades and severity colors.">
     </uxdot-example>
     <p>Keep letter grades and severity level colors consistent.</p>
   </uxdot-best-practice>
 
   <uxdot-best-practice dont>
     <uxdot-example color-palette="lightest" width-adjustment="176px" slot="image">
-      <img src="{{ '../guidelines-best-practice-1-dont.png' | url }}" alt="Small, default, and large size health index components displaying incorrect letter grades and severity colors.">
+      <img src="{{ '../guidelines-best-practice-1-dont.svg' | url }}" alt="Small, default, and large size health index components displaying incorrect letter grades and severity colors.">
     </uxdot-example>
     <p>Do not mix up letter grades and severity level colors.</p>
   </uxdot-best-practice>
@@ -132,14 +132,14 @@ Light theme components are designed only to work in the light theme, and dark th
 <div class="grid sm-two-columns">
   <uxdot-best-practice do>
     <uxdot-example color-palette="darkest" width-adjustment="176px" slot="image">
-      <img src="{{ '../guidelines-best-practice-2-do.png' | url }}" alt="Dark theme small, default, and large size health index components.">
+      <img src="{{ '../guidelines-best-practice-2-do.svg' | url }}" alt="Dark theme small, default, and large size health index components.">
     </uxdot-example>
     <p>Use the correct components in the correct theme.</p>
   </uxdot-best-practice>
 
   <uxdot-best-practice dont>
     <uxdot-example color-palette="darkest" width-adjustment="176px" slot="image">
-      <img src="{{ '../guidelines-best-practice-2-dont.png' | url }}" alt="Light theme small, default, and large size health index components used incorrectly in the dark theme.">
+      <img src="{{ '../guidelines-best-practice-2-dont.svg' | url }}" alt="Light theme small, default, and large size health index components used incorrectly in the dark theme.">
     </uxdot-example>
     <p>Do not use components from one theme in another theme.</p>
   </uxdot-best-practice>
@@ -153,15 +153,15 @@ Each variant is unique and designed to meet a specific user need.
 <div class="grid sm-two-columns">
   <uxdot-best-practice do>
     <uxdot-example color-palette="lightest" width-adjustment="176px" slot="image">
-      <img src="{{ '../guidelines-best-practice-3-do.png' | url }}" alt="Small, default, and large size health index components displaying correct letter grades and severity colors.">
+      <img src="{{ '../guidelines-best-practice-3-do.svg' | url }}" alt="Small, default, and large size health index components displaying correct letter grades and severity colors.">
     </uxdot-example>
     <p>Use the available variants as intended.</p>
   </uxdot-best-practice>
 
   <uxdot-best-practice dont>
     <uxdot-example color-palette="lightest" width-adjustment="278px" slot="image">
-      <img src="{{ '../guidelines-best-practice-3-dont.png' | url }}" alt="Large size health index component displaying extra text and an incorrect combination of styles.">
+      <img src="{{ '../guidelines-best-practice-3-dont.svg' | url }}" alt="Large size health index component displaying extra text and an incorrect combination of styles.">
     </uxdot-example>
     <p>Do not combine variants or add other elements like text.</p>
   </uxdot-best-practice>
-</div>
+</div>