Trying to add svg arrows to my slider gallery- but they disappear when added

[Edrol97]

Example of what I'm talking about below and all I've changed is the code of one of the images. They have the same file path, same name, just a different extension
versus how it should look below: Is there a way to resolve this?

 

[ratwolf]

Example of what I'm talking about below and all I've changed is the code of one of the images. They have the same file path, same name, just a different extensionView attachment 2995
versus how it should look below: View attachment 2996Is there a way to resolve this?

Can you share a snippet of your code?

 

[Edrol97]

Can you share a snippet of your code?

 <div class="slide-show_containers">
                <div class="slide-show_1container">
                  <div class="next_button" onclick="NextImage()">
                    <img src="img/background/right-arrow.svg" class="responsive"/>
                  </div>
                  <div class="previous_button" onclick="PreviousImage()">
                    <img src="img/background/left-arrow.png" draggable="false" class="responsive"/>
                  </div>
                  <div class="close_button" onclick="CloseLightbox(1)">
                    <img src="img/background/close-button.png" draggable="false" class="responsive"/>
                  </div>

 

[ratwolf]

 <div class="slide-show_containers">
                <div class="slide-show_1container">
                  <div class="next_button" onclick="NextImage()">
                    <img src="img/background/right-arrow.svg" class="responsive"/>
                  </div>
                  <div class="previous_button" onclick="PreviousImage()">
                    <img src="img/background/left-arrow.png" draggable="false" class="responsive"/>
                  </div>
                  <div class="close_button" onclick="CloseLightbox(1)">
                    <img src="img/background/close-button.png" draggable="false" class="responsive"/>
                  </div>

as you already confirmed with your left arrow png seems to work so it should be related to the svg itself

just some ideas:

• Incorrect SVG file path: Double-check for typos or case sensitivity in "img/background/right-arrow.svg".
• SVG file is empty or broken: Open the .svg file in a browser—if it doesn’t render, it may lack valid shapes or content.
• SVG has fill="none" or opacity="0": Inspect the SVG code for styles that make it invisible.
• SVG uses external styles: If the SVG references external CSS (e.g., via <style> tags), these won’t apply when embedded as an <img>.
• ViewBox or dimensions missing: The SVG might not scale correctly if it lacks a proper viewBox, width, or height attribute.
• CSS conflict: Your .responsive or parent styles may override size or visibility.
• Browser support quirks: Rare, but test the SVG in multiple browsers to rule out rendering issues.

 

[tomliv]

A link is the best way for us to help troubleshoot.