When attempting to view an .html file, SVG images may not appear on

I've encountered a common issue that I can't seem to solve.

After creating a website using HTML, CSS, and JS, I uploaded it to the hosting server via FileZilla. Everything is working perfectly on the live site.

However, when I downloaded the files from the server onto a different computer and opened the .html file in a web browser, the SVG images are not displaying. This has happened before, even after trying to view them in browsers like Mozilla and Edge.

<svg class="navigation__icons">
<use xlink:href='img/sprite.svg#logo-instagram'></use>
</svg>
htmlcsssvgbrowser

Answer №1

Make sure to include this line at the beginning of your .svg document

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arrangement of Divs in Mobile Design - Utilizing Bootstrap 4 Rows and Columns

I've been grappling with a layout issue while using Bootstrap 4, specifically concerning the positioning of elements on mobile devices. I was wondering if anyone could lend me a hand with this challenge. Let me illustrate the desired layout: Link to ...

htmlcssflexboxbootstrap-4responsive

Attempting to align a CSS card flip within a Bootstrap layout

I have created a card using HTML and CSS, but I am struggling to make it line up with Bootstrap. Currently, the card is only in the middle of the section and I can't seem to figure out how to get four of these cards to line up in one row, and then ano ...

htmlcsstwitter-bootstrapflipcard

Center two elements within a div container both horizontally and vertically

I am trying to vertically center a text and a button within a container. The text should be positioned in the middle of the div, while the button should be aligned to the right. What is the best way to achieve this layout where the text element is centere ...

htmlcss

jQuery seems to have difficulty selecting the text of a hyperlink's element using the text() or html() methods

I have a <a href=#>Title</a> link and it's the content in between <a href="#"> attribute that I am trying to target but haven't been successful using either the text() or html() jQuery functions. The text() method is returning ...

javascriptjqueryhtml

How can I apply and delete a css class only while scrolling in a React application?

Currently, I am designing a pretend blog layout to showcase my work. The grid of posts features cards that are precisely 400x400 in size with a hover effect that magnifies and adds a drop shadow (this is visible in the dashboard route). However, an issue ...

javascriptcssreactjsevent-handlingcss-animations

Can you guide me on how to programmatically set an option in an Angular 5 Material Select dropdown (mat-select) using typescript code?

I am currently working on implementing an Angular 5 Material Data Table with two filter options. One filter is a text input, while the other is a dropdown selection to filter based on a specific field value. The dropdown is implemented using a "mat-select" ...

javascripthtmlangulartypescript

Deactivate the connection button for accessing the database

I'm currently developing a PHP script to establish a connection with a MySQL database. My goal is to deactivate a button and display a spinner image when I click on a submit button to initiate the database connection. Below is the code snippet I have ...

phpcssbootstrap-4

Comparing CSS rules: the faster option between specifying multiple IDs or not

Recently, I have been heavily involved in working with Concrete5. It has come to my attention that the default theme contains numerous CSS rules that are defined in this manner: #page #central #sidebar p{line-height:24px} Considering that "sidebar" is an ...

cssperformancedomcss-selectors

What is the process of making circle or square shapes with text inside using React, without the use of SVG images?

Is there a way to create circle and square shapes in React with custom text inside, without relying on SVG images? Check out this example: I attempted the code below but it did not render any shapes: import React from 'react'; export default fu ...

javascripthtmlcssreactjs

Transmitting HTML5 application settings via URL

I am interested in creating an HTML5 app that utilizes the WebAudio API. This app will allow users to customize certain parameters. Users should be able to 'share' these settings by sending a share URL, which can be clicked by others to view the ...

javascripthtmlweb-audio-api

Leveraging the power of PHP variables within jQuery code

Wondering how to incorporate a PHP value into jQuery? My approach involves retrieving the VAT rate from the database using PHP and storing it in $vatrate: $sqlv = <<<SQL SELECT * FROM `vatrate` WHERE id='1' SQL; if(!$resultv = $db-&g ...

phpjqueryhtmlvariables

Begin an HTML document by loading it with xml.Load

I am looking to access an HTML document stored as a string retrieved from a StreamReader on the web and then convert it into an XMLDocument. Currently, I am using the following code: XmlDocument doc = new XmlDocument doc.Load(string containing the retrie ...

c#htmlxmldocument

Uncovering Secret Information with Beautiful Soup 4

I've hit a roadblock with my current project. I'm attempting to extract player names and projections from this website: The plan involves running a script that loops through various PID values, but that part is not causing any issues. The real c ...

pythonhtmlpandasseleniumbeautifulsoup

I am looking for guidance on how to convert a FlexDashboard file into an HTML format. Can anyone provide instructions

I recently created a FlexDashboard for someone else and they've requested it in HTML format to incorporate it into their web system like WordPress. Since I don't have access to their WordPress system, I need to provide them with an HTML file inst ...

htmlrflexdashboard

Guide on making an API call using AJAX from an HTML page in ASP.net

Starting off with ASP.net API, I am attempting to make AJAX calls from my HTML page to retrieve a list of products and search for specific products by their IDs. However, my GET request and the search by ID request do not seem to be functioning properly. ...

c#jqueryhtmlajaxapi

The color of the Angular md-switch .md-thumb is not showing up properly when switching the toggle

In Safari, the md-switch displays a yellow section on the md-thumb when toggled. However, other browsers handle the switch without any issues. The md-bar appears fine, but the md-thumb is yellow. I have tried setting everything to the blue color I am using ...

htmlcssangularjssafariless

Tips on incorporating several class names into Next.js elements

My current challenge involves an unordered list element with the following structure: <ul className={styles["projects-pd-subdetails-list"]}> {detail.subdetails.map((sub) => ( <li className={styles[ ...

javascriptcssreactjsnext.js

Custom PHP Search Form with Tailored Filter Options

Currently, I am dedicating my own time to learning the basics of HTML, PHP and SQL in order to enhance my skills for work purposes. As part of this learning journey, I have challenged myself to create a website based on a fictional Books company. I have s ...

phphtmlmysqlformssearch

How can you effectively load shared header and panel HTML onto pages located in separate directories using jQuery Mobile?

I am currently developing a multi-page application utilizing jQuery Mobile and incorporating loadPage() to retrieve various pages. The overall structure is outlined below. landing.html /app-pages/page1.html /app-pages/page2.html /app-pages/page3.html ...

javascriptjqueryhtmljquery-mobilejquery-mobile-ajax

Tips for concealing divs when hovering over them

I have designed a header for my website with the following styles: .header-cont { width:100%; position:fixed; top:0px; } .header { height:50px; background:#F0F0F0; border:1px solid #CCC; width:950px; margin:0px auto; } .hea ...

htmlcssheader