Replace data SVGs with inline SVGs

Taken from upstream v4-dev and adapted.
18smlee · Sep 20, 2020 · 149cac6 · 149cac6
1 parent ce6eeb0
commit 149cac6
Show file tree

Hide file tree

Showing 22 changed files with 88 additions and 22 deletions.
diff --git a/docs/cerulean/index.html b/docs/cerulean/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>

diff --git a/docs/cosmo/index.html b/docs/cosmo/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>

diff --git a/docs/cyborg/index.html b/docs/cyborg/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>

diff --git a/docs/darkly/index.html b/docs/darkly/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>

diff --git a/docs/default/index.html b/docs/default/index.html
@@ -1388,7 +1388,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>

diff --git a/docs/flatly/index.html b/docs/flatly/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>

diff --git a/docs/journal/index.html b/docs/journal/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>

diff --git a/docs/litera/index.html b/docs/litera/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>

diff --git a/docs/lumen/index.html b/docs/lumen/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>

diff --git a/docs/lux/index.html b/docs/lux/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>

diff --git a/docs/materia/index.html b/docs/materia/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>

diff --git a/docs/minty/index.html b/docs/minty/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>

diff --git a/docs/pulse/index.html b/docs/pulse/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>