deploy: cd1f6f8

cheatsheets/web/svg.html

@@ -221,6 +221,11 @@ <h3 id="object-tag">Object Tag</h3>
 <ul>
   <li><strong>How to Use</strong>:
     <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;object</span> <span class="na">type=</span><span class="s">"image/svg+xml"</span> <span class="na">data=</span><span class="s">"image.svg"</span> <span class="na">alt=</span><span class="s">"Description of SVG"</span><span class="nt">&gt;&lt;/object&gt;</span>
+</code></pre></div>    </div>
+    <p>With image fallback:</p>
+    <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;object</span> <span class="na">type=</span><span class="s">"image/svg+xml"</span> <span class="na">data=</span><span class="s">"image.svg"</span> <span class="na">alt=</span><span class="s">"Description of SVG"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"yourfallback.jpg"</span> <span class="nt">/&gt;</span>
+<span class="nt">&lt;/object&gt;</span>
 </code></pre></div>    </div>
   </li>
   <li><strong>Pros</strong>:
@@ -241,6 +246,8 @@ <h3 id="object-tag">Object Tag</h3>
   </li>
 </ul>
 
+<p>For more on fallbacks, see this <a href="https://css-tricks.com/svg-fallbacks/">article</a> and <a href="https://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files#4482962">SO thread</a>.</p>
+
 <h3 id="svg-as-a-background-image">SVG as a Background Image</h3>
 
 <ul>

cheatsheets/web/svg.md

@@ -47,6 +47,12 @@ Choose the method that best fits your project needs based on control, complexity
   ```html
   <object type="image/svg+xml" data="image.svg" alt="Description of SVG"></object>
   ```
+  With image fallback:
+  ```html
+  <object type="image/svg+xml" data="image.svg" alt="Description of SVG">
+      <img src="yourfallback.jpg" />
+  </object>
+  ```
 - **Pros**:
   - Allows for fallback content if SVG fails to load.
   - Can be styled with CSS.
@@ -58,6 +64,8 @@ Choose the method that best fits your project needs based on control, complexity
   - **Browser Compatibility**: Different browsers may handle `<object>` elements inconsistently.
   - **Accessibility**: `<object>` may not be as accessible as other methods for screen readers.
 
+For more on fallbacks, see this [article](https://css-tricks.com/svg-fallbacks/) and [SO thread](https://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files#4482962).
+
 ### SVG as a Background Image
 
 - **How to Use**:

feed.xml

@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.3">Jekyll</generator><link href="https://michaelcurrin.github.io/dev-cheatsheets/feed.xml" rel="self" type="application/atom+xml" /><link href="https://michaelcurrin.github.io/dev-cheatsheets/" rel="alternate" type="text/html" /><updated>2024-08-28T14:14:08+00:00</updated><id>https://michaelcurrin.github.io/dev-cheatsheets/feed.xml</id><title type="html">Dev Cheatsheets</title><subtitle>A collection of code snippets and CLI guides for quick and easy reference while coding</subtitle><author><name>Michael Currin</name></author></feed>
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.3">Jekyll</generator><link href="https://michaelcurrin.github.io/dev-cheatsheets/feed.xml" rel="self" type="application/atom+xml" /><link href="https://michaelcurrin.github.io/dev-cheatsheets/" rel="alternate" type="text/html" /><updated>2024-08-29T12:22:57+00:00</updated><id>https://michaelcurrin.github.io/dev-cheatsheets/feed.xml</id><title type="html">Dev Cheatsheets</title><subtitle>A collection of code snippets and CLI guides for quick and easy reference while coding</subtitle><author><name>Michael Currin</name></author></feed>