The SVG image does not display in browsers other than Internet Explorer (IE)

I am encountering an issue with adding a menu toggle image in SVG format to my HTML. Unfortunately, the image is not displaying as expected.

Here are screenshots for comparison between Explorer and Chrome:

https://i.stack.imgur.com/74sqh.png https://i.stack.imgur.com/8iQok.png

Below is the SVG code:

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="24.000000pt" height="31.000000pt" viewBox="0 0 24.000000 31.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,31.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">

Displayed below is the snippet of my HTML code:

.sidebar-toggle {
    float: left;
    background: url('menucursor.svg') no-repeat !important;
    padding: 2px 10px 0 3px;
    font-family: fontAwesome;
    position: absolute;
    font-size: 20px;
    text-decoration: none;
}
<a class="sidebar-toggle" data-toggle="offcanvas" href="#" role="button></a>

However, it seems that when trying to use the background-image attribute, the browser does not accept it.

Is there a solution or workaround to ensure that the image displays correctly?

javascripthtmlcsssvg

Answer №1

Because anchor element a does not have any child elements, it does not take up space in the DOM. To assign dimensions explicitly:

.sidebar-toggle {
  display: block;
  width: 20px; //Adjust to your needs, consider using the actual width of the svg.
  height: 20px; //Adjust to your needs, consider using the actual height of the svg.
  background-size: 100% 100%; //Alternatively, use background-size: cover; or background-size: contain;
  float: left;
  background: url(../../assets/images/icons/menucursor.svg) no-repeat !important;
  padding: 2px 10px 0 3px;
  font-family: fontAwesome;
  position: absolute;
  font-size: 20px;
  text-decoration: none;
}

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

Javascript: Anticipating a Return from an Argument

I am currently working on a function that requires an attribute to respond before proceeding with its process. The function call is structured like this : processResult(getResult()); The issue lies in the fact that the getResult function takes some time ...

javascriptjquery

The background color of the columns is overwhelming

I would like to create a TV remote control design using bootstrap, but I am encountering some issues. The background color is overflowing and I'm unsure how to fix it. Please take a look at the code and feel free to offer any suggestions! @media scre ...

htmlcsstwitter-bootstrap

Issue arises during initialization with Slick.js

I recently attempted to implement the slick.js function on my webpage by following the guidelines provided on . I copied the "center mode" function as my Jquery function, but unfortunately, the arrows/buttons and nav-docs were not generated in my slideshow ...

jqueryhtmlslick.js

"Object.entries seems to be returning only the initial object in the list

This is my object var obj = { "first_obj": { "a":1, "status": 1 }, "second_obj": { "a":2, "status": 3 } } I'm struggling to loop through this object using foreach and Object.entries, as the latter only returns the first object. How ...

javascriptnode.js

How can I access the rendered HTML element from a component in Vue 3?

This particular component is known as LayerComponent (placeholder). <script> export default { data() { return { count: 0 } } } </script> <template> <button @click="count++">You have clicked me {{ count ...

javascriptvue.jsvuejs3

Newbie: Troubleshooting Vue Errors - "Vue is not recognized"

I'm currently at the beginning stages of learning Vue and am practicing implementing it. However, I keep encountering the errors "vue was used before it was defined" and "Vue is not defined". Below are excerpts from my HTML and JS files for reference. ...

javascripthtmlvue.js

Error: The code has a syntax issue due to an unexpected "function" token while using

Recently, I decided to try out Node version 6.2.1 with some of my code. My goal was to migrate the hyper-callback oriented codes to a cleaner and potentially more efficient approach. Surprisingly, when I attempted to run the node code in the terminal, an ...

javascriptnode.jsexpressasynchronousasync-await

Event that signifies a change in the global state of the Angular 2 router

Is there a universal event that can be utilized for state change/start across all components, similar to the Component Lifecycle Hooks ? For example, in UI-router: $rootScope.$on("$stateChangeStart", function() {}) ...

javascriptangularjs

Display a DIV next to the mouse cursor when a span is hovered over

Is there a way to make a DIV element appear at the mouse cursor when a user hovers over a SPAN or another DIV? I attempted to create a function for this purpose, but unfortunately, it does not seem to be working properly even though jQuery is correctly lo ...

javascriptjqueryhtml

Align text in the middle of an image

I need some help with formatting my web page. I want to move the content of the red rectangle into the green rectangle, like in the image below: https://i.stack.imgur.com/sAved.jpg The goal is to center the text with the picture. I've tried using di ...

css

Parsing DOM data from an HTTP request in Node.js

Looking to extract data attributes from an SVG element on github.com/profile_name using a node.js HTTP request, and then parsing it into JSON format. <rect class="day" width="10" height="10" x="-36" y="10" fill="#ebedf0" data-count="0" data-date="2017- ...

javascriptjsonnode.jssvghttprequest

Guide on extracting unique identifiers from an array of objects and sorting them by the earliest date in JavaScript

I've got an array of objects and I'm looking to retrieve the items with unique IDs while also selecting the earliest date. For example: [{id:1, date: Jan 12}, {id:2, date: Feb 8}, {id:3, date: Feb 8}] var array = [{id: 1, date: Jan 12 2021 08:00 ...

javascript

tips for integrating html5 elements with django forms

I am interested in utilizing the following code: # extra.py in yourproject/app/ from django.db.models import FileField from django.forms import forms from django.template.defaultfilters import filesizeformat from django.utils.translation import ugettext_ ...

javascriptpythondjangohtmldjango-forms

Is my Socket.io application consuming excessive bandwidth? What might be causing this issue?

Upon reviewing my AWS billing report, I noticed an excessive data transfer of 495.385 GB on my socket.io application running on the EC2 instance. This amount seems too high for a small experimental website like mine. Could this be due to inefficient code i ...

javascriptexpresssocketswebsocketsocket.io

Ways to incorporate a unique debounce technique where the function is only executed every nth time

const _debounce = (num, fn) => { //implementation goes here } const originalFunction = () => { console.log('fired') } const _callFunc = () => _debounce(2, originalFunction) _callFunc() //The originalFunction does not run _callFun ...

javascriptdebouncing

Can you explain the meaning of `<%= something %>` to me?

I've been working on a javascript project and I'm curious about the purpose of surrounding a variable with this syntax? <%= variable %> I attempted to research it myself but didn't come across any helpful information, so my apologies ...

javascript

Is there a way to alter the format of a URL?

I'm utilizing the ytdl-core library to access a URL for audio content. The provided URL is: https://r2---sn-gwpa-w5py.googlevideo.com/videoplayback?expire=1612552132&ei=ZEMdYNnJDumPz7sPyrSLmAw&ip=49.36.246.217&id=o-AFQLS1cSUJ6_bXBjMOIiWk1N ...

javascriptnode.jsreact-nativeytdl

What is the best way to find an element using either 'className1' or 'className2'?

Within my project, all locators are defined as elements of an enum and follow this format: For example, if it is a CSS locator - DIV_LOCATION("css=div.location-text.text-overflow"). This method parses the string and identifies it as a CSS locator if it be ...

cssseleniumcss-selectors

Combining 2 objects in vue.js that share a common field name

Currently, I am attempting to merge two objects based on a shared key, specifically when they have two fields with the same name but differing values. var players = [{ id : 'a', name : "player1",team:1},{ id : 'b', name : &quo ...

javascriptnode.jsvue.jsjoin

What is the best way to align these divs horizontally?

I am facing an issue with my web page layout. I have a list of topics that I need to display, with four topics in each row. However, when I try to render them, they end up aligning vertically instead of horizontally like this: This is the CSS code snippet ...

cssreactjs