MediaSVG

Media SVG

This is a simple design component that defines a single svg file and optional svg-alt text.
If the alt-text is provided then we will add the aria-hidden attribute as well as the svg__alttext. By default the svg is centered.

The SVG can also be inlined instead of being loaded through an img tag. To do this, simply wrap the inline SVG inside of a conatainer with the class of mediasvg__img. Be sure to also include the aria-hidden attribute if their is alternative text present.

Drupal Logo
<div class="mediasvg">
  <img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
  <div class="mediasvg__alttext">Drupal Logo</div>
</div>
Drupal Logo
<div class="mediasvg mediasvg--stretch">
  <img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
  <div class="mediasvg__alttext">Drupal Logo</div>
</div>

Media SVG Left

Aligns the SVG to the left of it's container.

Drupal Logo
<div class="mediasvg mediasvg--left">
  <img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
  <div class="mediasvg__alttext">Drupal Logo</div>
</div>
Drupal Logo
<div class="mediasvg mediasvg--left--medium">
  <img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
  <div class="mediasvg__alttext">Drupal Logo</div>
</div>
Drupal Logo
<div class="mediasvg mediasvg--left--small">
  <img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
  <div class="mediasvg__alttext">Drupal Logo</div>
</div>

Media SVG Right

This is an inline SVG that can be used in any rich text area.

Drupal Logo
<div class="mediasvg mediasvg--right">
  <img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
  <div class="mediasvg__alttext">Drupal Logo</div>
</div>
Drupal Logo
<div class="mediasvg mediasvg--right--medium">
  <img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
  <div class="mediasvg__alttext">Drupal Logo</div>
</div>
Drupal Logo
<div class="mediasvg mediasvg--right--small">
  <img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
  <div class="mediasvg__alttext">Drupal Logo</div>
</div>

Media SVG Stretch

This is an inline SVG that can be used in any rich text area.

Drupal Logo
<div class="mediasvg mediasvg--stretch">
  <img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
  <div class="mediasvg__alttext">Drupal Logo</div>
</div>

Media SVG w/ Max Height

This is an inline SVG that can be used in any rich text area.

Drupal Logo
<div class="mediasvg">
  <img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg" style="max-height:100px;">
  <div class="mediasvg__alttext">Drupal Logo</div>
</div>