Replace holder.js with SVGs.

12 files changed, 130 insertions, 78 deletions

diff --git a/site/_includes/icons/placeholder.svg b/site/_includes/icons/placeholder.svg
new file mode 100644
index 0000000000..a6f835d8e8
--- /dev/null
+++ b/site/_includes/icons/placeholder.svg
@@ -0,0 +1,36 @@
+{%- if include.width -%}
+  {% assign width = include.width %}
+{%- else -%}
+  {% assign width = '100%' %}
+{%- endif -%}
+
+{%- if include.height -%}
+  {% assign height = include.height %}
+{%- else -%}
+  {% assign height = 180 %}
+{%- endif -%}
+
+{%- if include.text -%}
+  {% assign text = include.text %}
+{%- else -%}
+  {% assign text = width | append: 'x' | append: height %}
+{%- endif -%}
+
+{%- if include.class -%}
+  {% assign class = include.class| prepend: ' ' %}
+{%- endif -%}
+
+{%- if include.color -%}
+  {% assign color = include.color %}
+{%- else -%}
+  {% assign color = '#ddd' %}
+{%- endif -%}
+
+{%- if include.background -%}
+  {% assign background = include.background %}
+{%- else -%}
+  {% assign background = '#777' %}
+{%- endif -%}
+
+<svg class="bd-placeholder-img{{ class }}" width="{{ width }}" height="{{ height }}" xmlns="http://www.w3.org/2000/svg"{% if include.viewBox %} viewBox="{{ include.viewBox }}"{% endif %} preserveAspectRatio="xMidYMid slice">{% if include.title %}<title>{{ include.title }}</title>{% endif %}<rect fill="{{ background }}" width="100%" height="100%" /><text x="50%" y="50%" dy=".3em" fill="{{ color }}">{{ text }}</text></svg>
+{{- '' -}}
diff --git a/site/docs/4.1/assets/scss/_component-examples.scss b/site/docs/4.1/assets/scss/_component-examples.scss
index 5bafcc4235..1235695b2c 100644
--- a/site/docs/4.1/assets/scss/_component-examples.scss
+++ b/site/docs/4.1/assets/scss/_component-examples.scss
@@ -212,8 +212,9 @@
 }
 
 // Images
-.bd-example > img {
-  + img {
+.bd-example {
+  > svg + svg,
+  > img + img {
     margin-left: .5rem;
   }
 }
diff --git a/site/docs/4.1/assets/scss/_placeholder-img.scss b/site/docs/4.1/assets/scss/_placeholder-img.scss
new file mode 100644
index 0000000000..c1ac5fee82
--- /dev/null
+++ b/site/docs/4.1/assets/scss/_placeholder-img.scss
@@ -0,0 +1,14 @@
+//
+// Placeholder svg used in the docs.
+//
+
+.bd-placeholder-img {
+  font-size: 1.125rem;
+  text-anchor: middle;
+}
+
+.bd-placeholder-img-lg {
+  @include media-breakpoint-up(md) {
+    font-size: 3.5rem;
+  }
+}
diff --git a/site/docs/4.1/assets/scss/docs.scss b/site/docs/4.1/assets/scss/docs.scss
index 046521f7f2..4b6674ad02 100644
--- a/site/docs/4.1/assets/scss/docs.scss
+++ b/site/docs/4.1/assets/scss/docs.scss
@@ -44,6 +44,7 @@
 @import "brand";
 @import "colors";
 @import "clipboard-js";
+@import "placeholder-img";
 
 // Load docs dependencies
 @import "syntax";
diff --git a/site/docs/4.1/components/card.md b/site/docs/4.1/components/card.md
index dfebf22973..3a090c6578 100644
--- a/site/docs/4.1/components/card.md
+++ b/site/docs/4.1/components/card.md
@@ -18,7 +18,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
 
 {% capture example %}
 <div class="card" style="width: 18rem;">
-  <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+  {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -70,7 +70,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
 
 {% capture example %}
 <div class="card" style="width: 18rem;">
-  <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
+  {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
   <div class="card-body">
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
@@ -113,7 +113,7 @@ Mix and match multiple content types to create the card you need, or throw every
 
 {% capture example %}
 <div class="card" style="width: 18rem;">
-  <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
+  {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -358,7 +358,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
 
 {% capture example %}
 <div class="card mb-3">
-  <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+  {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -371,7 +371,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
   </div>
-  <img class="card-img-bottom" data-src="holder.js/100px180/" alt="Card image cap">
+  {% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" title="Card image cap" %}
 </div>
 {% endcapture %}
 {% include example.html content=example %}
@@ -382,7 +382,7 @@ Turn an image into a card background and overlay your card's text. Depending on
 
 {% capture example %}
 <div class="card bg-dark text-white">
-  <img class="card-img" data-src="holder.js/100px270?text=Card image" alt="Card image">
+  {% include icons/placeholder.svg width="100%" height="270" class="bd-placeholder-img-lg card-img" text="Card image" title="Card image" %}
   <div class="card-img-overlay">
     <h5 class="card-title">Card title</h5>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -462,7 +462,7 @@ Use card groups to render cards as a single, attached element with equal width a
 {% capture example %}
 <div class="card-group">
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -470,7 +470,7 @@ Use card groups to render cards as a single, attached element with equal width a
     </div>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -478,7 +478,7 @@ Use card groups to render cards as a single, attached element with equal width a
     </div>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
@@ -494,7 +494,7 @@ When using card groups with footers, their content will automatically line up.
 {% capture example %}
 <div class="card-group">
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -504,7 +504,7 @@ When using card groups with footers, their content will automatically line up.
     </div>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -514,7 +514,7 @@ When using card groups with footers, their content will automatically line up.
     </div>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
@@ -534,7 +534,7 @@ Need a set of equal width and height cards that aren't attached to one another?
 {% capture example %}
 <div class="card-deck">
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
+    {% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" title="Card image cap" %}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -542,7 +542,7 @@ Need a set of equal width and height cards that aren't attached to one another?
     </div>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
+    {% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" title="Card image cap" %}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -550,7 +550,7 @@ Need a set of equal width and height cards that aren't attached to one another?
     </div>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
+    {% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" title="Card image cap" %}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
@@ -566,7 +566,7 @@ Just like with card groups, card footers in decks will automatically line up.
 {% capture example %}
 <div class="card-deck">
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -576,7 +576,7 @@ Just like with card groups, card footers in decks will automatically line up.
     </div>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -586,7 +586,7 @@ Just like with card groups, card footers in decks will automatically line up.
     </div>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
@@ -608,7 +608,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
 {% capture example %}
 <div class="card-columns">
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
+    {% include icons/placeholder.svg width="100%" height="160" class="card-img-top" text="Image cap" title="Card image cap" %}
     <div class="card-body">
       <h5 class="card-title">Card title that wraps to a new line</h5>
       <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -625,7 +625,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
     </blockquote>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
+    {% include icons/placeholder.svg width="100%" height="160" class="card-img-top" text="Image cap" title="Card image cap" %}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -650,7 +650,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
     </div>
   </div>
   <div class="card">
-    <img class="card-img" data-src="holder.js/100px260/" alt="Card image">
+    {% include icons/placeholder.svg width="100%" height="260" class="card-img" text="Card image" title="Card image" %}
   </div>
   <div class="card p-3 text-right">
     <blockquote class="blockquote mb-0">
diff --git a/site/docs/4.1/components/carousel.md b/site/docs/4.1/components/carousel.md
index 8ba5c07eaf..ce46c9078e 100644
--- a/site/docs/4.1/components/carousel.md
+++ b/site/docs/4.1/components/carousel.md
@@ -32,13 +32,13 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-
 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
     <div class="carousel-item active">
-      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+        {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
     </div>
     <div class="carousel-item">
-      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+      {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
     </div>
     <div class="carousel-item">
-      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+      {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
     </div>
   </div>
 </div>
@@ -53,13 +53,13 @@ Adding in the previous and next controls:
 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
     <div class="carousel-item active">
-      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+      {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
     </div>
     <div class="carousel-item">
-      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+      {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
     </div>
     <div class="carousel-item">
-      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+      {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
     </div>
   </div>
   <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
@@ -87,13 +87,13 @@ You can also add the indicators to the carousel, alongside the controls, too.
   </ol>
   <div class="carousel-inner">
     <div class="carousel-item active">
-      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+      {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
     </div>
     <div class="carousel-item">
-      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+      {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
     </div>
     <div class="carousel-item">
-      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+      {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
     </div>
   </div>
   <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
@@ -121,21 +121,21 @@ Add captions to your slides easily with the `.carousel-caption` element within a
     </ol>
     <div class="carousel-inner">
       <div class="carousel-item active">
-        <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+        {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
         <div class="carousel-caption d-none d-md-block">
           <h5>First slide label</h5>
           <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
         </div>
       </div>
       <div class="carousel-item">
-        <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+        {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
         <div class="carousel-caption d-none d-md-block">
           <h5>Second slide label</h5>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         </div>
       </div>
       <div class="carousel-item">
-        <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+        {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
         <div class="carousel-caption d-none d-md-block">
           <h5>Third slide label</h5>
           <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
@@ -171,13 +171,13 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
 <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
   <div class="carousel-inner">
     <div class="carousel-item active">
-      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+      {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
     </div>
     <div class="carousel-item">
-      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+      {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
     </div>
     <div class="carousel-item">
-      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+      {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
     </div>
   </div>
   <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
@@ -200,13 +200,13 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
 <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
     <div class="carousel-item active" data-interval="10000">
-      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+      {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
     </div>
-    <div class="carousel-item" data-interval="20000">
-      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+    <div class="carousel-item" data-interval="2000">
+      {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
     </div>
     <div class="carousel-item">
-      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+      {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
     </div>
   </div>
   <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
diff --git a/site/docs/4.1/components/media-object.md b/site/docs/4.1/components/media-object.md
index d846386b70..eb22911faf 100644
--- a/site/docs/4.1/components/media-object.md
+++ b/site/docs/4.1/components/media-object.md
@@ -14,7 +14,7 @@ Below is an example of a single media object. Only two classes are required—th
 
 {% capture example %}
 <div class="media">
-  <img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
+  {% include icons/placeholder.svg width="64" height="64" class="mr-3" title="Generic placeholder image" %}
   <div class="media-body">
     <h5 class="mt-0">Media heading</h5>
     Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
@@ -38,14 +38,14 @@ Media objects can be infinitely nested, though we suggest you stop at some point
 
 {% capture example %}
 <div class="media">
-  <img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
+  {% include icons/placeholder.svg width="64" height="64" class="mr-3" title="Generic placeholder image" %}
   <div class="media-body">
     <h5 class="mt-0">Media heading</h5>
     Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
 
     <div class="media mt-3">
       <a class="mr-3" href="#">
-        <img data-src="holder.js/64x64" alt="Generic placeholder image">
+        {% include icons/placeholder.svg width="64" height="64" title="Generic placeholder image" %}
       </a>
       <div class="media-body">
         <h5 class="mt-0">Media heading</h5>
@@ -63,7 +63,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
 
 {% capture example %}
 <div class="media">
-  <img class="align-self-start mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
+  {% include icons/placeholder.svg width="64" height="64" class="align-self-start mr-3" title="Generic placeholder image" %}
   <div class="media-body">
     <h5 class="mt-0">Top-aligned media</h5>
     <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
@@ -75,7 +75,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
 
 {% capture example %}
 <div class="media">
-  <img class="align-self-center mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
+  {% include icons/placeholder.svg width="64" height="64" class="align-self-center mr-3" title="Generic placeholder image" %}
   <div class="media-body">
     <h5 class="mt-0">Center-aligned media</h5>
     <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
@@ -87,7 +87,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
 
 {% capture example %}
 <div class="media">
-  <img class="align-self-end mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
+  {% include icons/placeholder.svg width="64" height="64" class="align-self-end mr-3" title="Generic placeholder image" %}
   <div class="media-body">
     <h5 class="mt-0">Bottom-aligned media</h5>
     <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
@@ -107,7 +107,7 @@ Change the order of content in media objects by modifying the HTML itself, or by
     <h5 class="mt-0 mb-1">Media object</h5>
     Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
   </div>
-  <img class="ml-3" data-src="holder.js/64x64" alt="Generic placeholder image">
+  {% include icons/placeholder.svg width="64" height="64" class="ml-3" title="Generic placeholder image" %}
 </div>
 {% endcapture %}
 {% include example.html content=example %}
@@ -119,21 +119,21 @@ Because the media object has so few structural requirements, you can also use th
 {% capture example %}
 <ul class="list-unstyled">
   <li class="media">
-    <img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
+    {% include icons/placeholder.svg width="64" height="64" class="mr-3" title="Generic placeholder image" %}
     <div class="media-body">
       <h5 class="mt-0 mb-1">List-based media object</h5>
       Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
     </div>
   </li>
   <li class="media my-4">
-    <img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
+    {% include icons/placeholder.svg width="64" height="64" class="mr-3" title="Generic placeholder image" %}
     <div class="media-body">
       <h5 class="mt-0 mb-1">List-based media object</h5>
       Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
     </div>
   </li>
   <li class="media">
-    <img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
+    {% include icons/placeholder.svg width="64" height="64" class="mr-3" title="Generic placeholder image" %}
     <div class="media-body">
       <h5 class="mt-0 mb-1">List-based media object</h5>
       Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
diff --git a/site/docs/4.1/components/toasts.md b/site/docs/4.1/components/toasts.md
index 6493cf520d..f9d0d7e4ce 100644
--- a/site/docs/4.1/components/toasts.md
+++ b/site/docs/4.1/components/toasts.md
@@ -28,7 +28,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi
 {% capture example %}
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
-    <img class="rounded mr-2" data-src="holder.js/20x20?size=1&text=.&bg=#007aff" alt="">
+    {% include icons/placeholder.svg width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " %}
     <strong class="mr-auto">Bootstrap</strong>
     <small>11 mins ago</small>
     <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
@@ -51,7 +51,7 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
 {% capture example %}
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
-    <img class="rounded mr-2" data-src="holder.js/20x20?size=1&text=.&bg=#007aff" alt="">
+    {% include icons/placeholder.svg width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " %}
     <strong class="mr-auto">Bootstrap</strong>
     <small class="text-muted">11 mins ago</small>
     <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
@@ -74,7 +74,7 @@ When you have multiple toasts, we default to vertiaclly stacking them in a reada
 {% capture example %}
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
-    <img class="rounded mr-2" data-src="holder.js/20x20?size=1&text=.&bg=#007aff" alt="">
+    {% include icons/placeholder.svg width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " %}
     <strong class="mr-auto">Bootstrap</strong>
     <small class="text-muted">just now</small>
     <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
@@ -88,7 +88,7 @@ When you have multiple toasts, we default to vertiaclly stacking them in a reada
 
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
-    <img class="rounded mr-2" data-src="holder.js/20x20?size=1&text=.&bg=#007aff" alt="">
+    {% include icons/placeholder.svg width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " %}
     <strong class="mr-auto">Bootstrap</strong>
     <small class="text-muted">2 seconds ago</small>
     <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
@@ -112,7 +112,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
 <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
   <div class="toast" style="position: absolute; top: 0; right: 0;">
     <div class="toast-header">
-      <img class="rounded mr-2" data-src="holder.js/20x20?size=1&text=.&bg=#007aff" alt="">
+      {% include icons/placeholder.svg width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " %}
       <strong class="mr-auto">Bootstrap</strong>
       <small>11 mins ago</small>
       <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
@@ -139,7 +139,7 @@ For systems that generate more notifications, consider using a wrapping element
     <!-- Then put toasts within -->
     <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
       <div class="toast-header">
-        <img class="rounded mr-2" data-src="holder.js/20x20?size=1&text=.&bg=#007aff" alt="">
+        {% include icons/placeholder.svg width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " %}
         <strong class="mr-auto">Bootstrap</strong>
         <small class="text-muted">just now</small>
         <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
@@ -153,7 +153,7 @@ For systems that generate more notifications, consider using a wrapping element
 
     <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
       <div class="toast-header">
-        <img class="rounded mr-2" data-src="holder.js/20x20?size=1&text=.&bg=#007aff" alt="">
+        {% include icons/placeholder.svg width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " %}
         <strong class="mr-auto">Bootstrap</strong>
         <small class="text-muted">2 seconds ago</small>
         <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
@@ -180,7 +180,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
   <!-- Then put toasts within -->
   <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
-      <img class="rounded mr-2" data-src="holder.js/20x20?size=1&text=.&bg=#007aff" alt="">
+      {% include icons/placeholder.svg width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " %}
       <strong class="mr-auto">Bootstrap</strong>
       <small>11 mins ago</small>
       <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
@@ -218,7 +218,7 @@ When using `autohide: false`, you must add a close button to allow users to dism
 {% capture example %}
 <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
   <div class="toast-header">
-    <img class="rounded mr-2" data-src="holder.js/20x20?size=1&text=.&bg=#007aff" alt="">
+    {% include icons/placeholder.svg width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " %}
     <strong class="mr-auto">Bootstrap</strong>
     <small>11 mins ago</small>
     <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
diff --git a/site/docs/4.1/content/figures.md b/site/docs/4.1/content/figures.md
index 7041997ba9..a574a7693b 100644
--- a/site/docs/4.1/content/figures.md
+++ b/site/docs/4.1/content/figures.md
@@ -11,7 +11,7 @@ Use the included `.figure` , `.figure-img` and `.figure-caption` classes to prov
 
 {% capture example %}
 <figure class="figure">
-  <img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
+  {% include icons/placeholder.svg width="400" height="300" class="figure-img img-fluid rounded" title="A generic square placeholder image with rounded corners in a figure." %}
   <figcaption class="figure-caption">A caption for the above image.</figcaption>
 </figure>
 {% endcapture %}
@@ -21,7 +21,7 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl
 
 {% capture example %}
 <figure class="figure">
-  <img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
+  {% include icons/placeholder.svg width="400" height="300" class="figure-img img-fluid rounded" title="A generic square placeholder image with rounded corners in a figure." %}
   <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
 </figure>
 {% endcapture %}
diff --git a/site/docs/4.1/content/images.md b/site/docs/4.1/content/images.md
index cb56139bd1..b86f4f5f34 100644
--- a/site/docs/4.1/content/images.md
+++ b/site/docs/4.1/content/images.md
@@ -11,7 +11,7 @@ toc: true
 Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
 
 <div class="bd-example">
-  <img data-src="holder.js/100px250" class="img-fluid" alt="Generic responsive image">
+  {% include icons/placeholder.svg width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" title="Generic responsive image" %}
 </div>
 
 {% highlight html %}
@@ -30,7 +30,7 @@ In Internet Explorer 10, SVG images with `.img-fluid` are disproportionately siz
 In addition to our [border-radius utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/borders/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
 
 <div class="bd-example bd-example-images">
-  <img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
+  {% include icons/placeholder.svg width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" %}
 </div>
 
 {% highlight html %}
@@ -42,8 +42,8 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/docs/{{ site.doc
 Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/float/) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering).
 
 <div class="bd-example bd-example-images">
-  <img data-src="holder.js/200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners">
-  <img data-src="holder.js/200x200" class="rounded float-right" alt="A generic square placeholder image with rounded corners">
+  {% include icons/placeholder.svg width="200" height="200" class="rounded float-left" title="A generic square placeholder image with rounded corners" %}
+  {% include icons/placeholder.svg width="200" height="200" class="rounded float-right" title="A generic square placeholder image with rounded corners" %}
 </div>
 
 {% highlight html %}
@@ -52,7 +52,7 @@ Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.doc
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">
-  <img data-src="holder.js/200x200" class="rounded mx-auto d-block" alt="A generic square placeholder image with rounded corners">
+  {% include icons/placeholder.svg width="200" height="200" class="rounded mx-auto d-block" title="A generic square placeholder image with rounded corners" %}
 </div>
 
 {% highlight html %}
@@ -61,7 +61,7 @@ Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.doc
 
 <div class="bd-example bd-example-images">
   <div class="text-center">
-    <img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners">
+    {% include icons/placeholder.svg width="200" height="200" class="rounded" title="A generic square placeholder image with rounded corners" %}
   </div>
 </div>
 
diff --git a/site/docs/4.1/utilities/borders.md b/site/docs/4.1/utilities/borders.md
index c0f68eb582..83d4e64305 100644
--- a/site/docs/4.1/utilities/borders.md
+++ b/site/docs/4.1/utilities/borders.md
@@ -55,14 +55,14 @@ Change the border color using utilities built on our theme colors.
 Add classes to an element to easily round its corners.
 
 <div class="bd-example bd-example-images">
-  <img data-src="holder.js/75x75" class="rounded" alt="Example rounded image">
-  <img data-src="holder.js/75x75" class="rounded-top" alt="Example top rounded image">
-  <img data-src="holder.js/75x75" class="rounded-right" alt="Example right rounded image">
-  <img data-src="holder.js/75x75" class="rounded-bottom" alt="Example bottom rounded image">
-  <img data-src="holder.js/75x75" class="rounded-left" alt="Example left rounded image">
-  <img data-src="holder.js/75x75" class="rounded-circle" alt="Completely round image">
-  <img data-src="holder.js/150x75" class="rounded-pill" alt="Rounded pill image">
-  <img data-src="holder.js/75x75" class="rounded-0" alt="Example non-rounded image (overrides rounding applied elsewhere)">
+  {%- include icons/placeholder.svg width="75" height="75" class="rounded" title="Example rounded image" -%}
+  {%- include icons/placeholder.svg width="75" height="75" class="rounded-top" title="Example top rounded image" -%}
+  {%- include icons/placeholder.svg width="75" height="75" class="rounded-right" title="Example right rounded image" -%}
+  {%- include icons/placeholder.svg width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" -%}
+  {%- include icons/placeholder.svg width="75" height="75" class="rounded-left" title="Example left rounded image" -%}
+  {%- include icons/placeholder.svg width="75" height="75" class="rounded-circle" title="Completely round image" -%}
+  {%- include icons/placeholder.svg width="150" height="75" class="rounded-pill" title="Rounded pill image" -%}
+  {%- include icons/placeholder.svg width="75" height="75" class="rounded-0" title="Example non-rounded image (overrides rounding applied elsewhere)" -%}
 </div>
 
 {% highlight html %}
diff --git a/site/docs/4.1/utilities/sizing.md b/site/docs/4.1/utilities/sizing.md
index 5baeb3b0f3..d95b13516d 100644
--- a/site/docs/4.1/utilities/sizing.md
+++ b/site/docs/4.1/utilities/sizing.md
@@ -33,7 +33,7 @@ Width and height utilities are generated from the `$sizes` Sass map in `_variabl
 You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
 
 {% capture example %}
-<img class="mw-100" data-src="holder.js/100px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">
+{% include icons/placeholder.svg width="100%" height="100" class="mw-100" text="Max-width 100%" title="Max-width 100%" %}
 {% endcapture %}
 {% include example.html content=example %}