docs(menu, select, app launcher, dropdown): Updates images for v6.

packages/documentation-site/patternfly-docs/content/design-guidelines/components/application-launcher/application-launcher.md

@@ -3,10 +3,15 @@ id: Application launcher
 section: components
 subsection: menus
 ---
+
+import '../components.css';
+
 ## Elements
 An application launcher has two main elements.
 
-<img src="./img/elements.png" alt="Elements of the application launcher component" width="692"/>
+<div class="ws-docs-content-img">
+![Elements of the application launcher component.](./img/app-launcher-elements.svg)
+</div>
 
 1. **Icon:** used to open and close the menu.
 2. **Menu:** contains a list of links.
@@ -21,10 +26,14 @@ For longer lists, you can optionally add the ability to search the list and favo
 
 ## Examples
 **Application launcher with external links**
-<img src="./img/example1.png" alt="Example of the application launcher component" width="1680"/>
+<div class="ws-docs-content-img">
+![Example of an application launcher with external links.](./img/app-launcher-ext-links.svg)
+</div>
 
 **Application launcher with favorites and search**
-<img src="./img/example2.png" alt="Example of the application launcher component with favorites and search" width="1680"/>
+<div class="ws-docs-content-img">
+![Example of an application launcher with favorites and search.](./img/app-launcher-fave-search.svg)
+</div>
 
 ## Accessibility
 For information regarding accessibility, visit the [application launcher accessibility](/components/menus/application-launcher/accessibility) tab. 

packages/documentation-site/patternfly-docs/content/design-guidelines/components/dropdown/dropdown.md

@@ -4,11 +4,14 @@ section: components
 subsection: menus
 ---
 
+import '../components.css';
+
 ## Elements
 A basic dropdown consists of a toggle control to open and close a menu of actions or links.
 
-<img src="./img/basic-dropdown.png" alt="basic dropdown" width="303"/>
-
+<div class="ws-docs-content-img">
+![Elements of a basic dropdown.](./img/dropdown-elements.svg)
+</div>
 
 1. **Toggle:** The toggle is used to open and close the menu. It takes on all of the behaviors of a button. The toggle label is used to name the menu and should be descriptive of the actions that it contains. If no more descriptive name makes sense, use “Actions” as a default name.
 
@@ -17,16 +20,16 @@ A basic dropdown consists of a toggle control to open and close a menu of action
 ## Variations
 In addition to the basic dropdown shown above, you may apply the following variants to the dropdown toggle element.
 
-<img src="./img/dropdown-variants.png" alt="Image showing dropdown variations" width="999"/>
+<div class="ws-docs-content-img">
+![Example of different dropdown variations.](./img/dropdown-variations.svg)
+</div>
 
 ### Primary toggle
 The primary toggle should be used in the same way as you would use a primary button. If you want to draw the user’s attention to a dropdown menu as the primary place to take action on a page, consider using a dropdown with primary styling.
 
 ### Secondary toggle
 The secondary toggle is a variation of the primary toggle. It has less visual prominence than the primary toggle, but more visual prominence than the basic toggle and other toggle variations. Use a secondary toggle when the actions in the dropdown are the secondary actions you’d want a user to take.
 
-<img src="./img/secondary-toggle.png" alt="Image showing usage of secondary toggle" width="1440"/>
-
 Use a secondary toggle when other toggle variations would appear visually inconsistent, or lack the sufficient prominence needed to create a visual hierarchy.
 
 ### Plain toggle
@@ -44,20 +47,26 @@ There are two types of split buttons: split buttons with checkboxes and split bu
 
 A split button with a checkbox can be used in bulk selection use cases for a list, table, or card grid. Here, the checkbox provides immediate access to bulk selection, and the user can also open the dropdown menu to expose other actions. Text can also be added within the toggle to reflect current state.
 
-<img src="./img/split-buttons.png" alt="split button" width="772"/>
+<div class="ws-docs-content-img">
+![Example of a dropdown with a checkbox.](./img/dropdown-checkbox.svg)
+</div>
 
 #### Split button with actions
 
 A split button with actions is useful when you want to expose a default action with a single click, but also allow access to other actions via the dropdown menu. This can be thought of as providing a shortcut to the most recent or frequently used item in the menu. A split button with actions can contain a labeled action or an icon in place of the label for use when there is limited space.
 
-<img src="./img/split-toggles.png" alt="split button" width="772"/>
+<div class="ws-docs-content-img">
+![Example of split button actions.](./img/split-button-actions.svg)
+</div>
 
 **Behavior**
 
 In this case, the user can either click on the primary button, or on the caret to open/view the rest of the related options. When a user clicks on an action whether the surfaced one, or one from inside the menu, the action will be selected and applied immediately. 
 
 **Example**
 
-<img src="./img/split-toggle-example.png" alt="example of split button used inside of a modal" width="655"/>
+<div class="ws-docs-content-img">
+![Example of a split button used in a modal.](./img/split-button-behavior.svg)
+</div>
 
 A split action button is used in a modal where there are different possible submit variations. Here, all the buttons are related in that they are different ways to submit the modal, but the surfaced option is the most likely to be used, while the ones housed in the toggle are other less likely options.