SVG failing to display properly

Question

SVG failing to display properly

I need to place a close button in the top right corner of my page.

Here is the code for the SVG:

.icon {
    width: 24px;
    height: 24px;
    /* any changes to the fill attribute have no effect */
    fill: currentColor;
}

<svg class="icon">
<use xlink:href="#close" />
</svg>

<!-- additional code -->

<!-- SVG Icon Library -->
<svg style="display: none;">
<symbol id=close viewBox="0 0 24 24">
    <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
</symbol>
</svg>

The close icon is not appearing on the page.

However, I have another example with a different icon that does work...

.icon {
    width: 24px;
    height: 24px;
    /* any changes to the fill attribute have no effect */
    fill: currentColor;
}

<svg class="icon">
<use xlink:href="#info-outline" />
</svg>

<!-- additional code -->

<!-- SVG Icon Library -->
<svg style="display: none;">
<symbol id=info-outline viewBox="0 0 24 24">
    <path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"></path>
</symbol>
</svg>

Both examples are similar, and it's puzzling why the close icon is not showing up.

I have tried adjusting the size and fill attribute of the SVG, but it seems to have no impact. The Dev-Tools confirm that the icon has a normal size. Other SVG icons work as expected, so there must be something specific to the close icon causing the issue.

html css svg

Answer 1

Answer №1

If you're looking for standard, well-known icons that are not original or designer-made, consider using a Google character font.
You can check out and choose from a variety of Google icons here.

Material Icons come in five styles with different downloadable sizes and densities, all based on the core Material Design principles.

Select the desired icons and add them to your HTML by their names - just click on the icon name info and then copy the code.
Here's an example showing how to use the close and info icons along with adding color change effects when hovering over them.

.material-symbols-outlined {
  margin: 10px;
  transition: transform 0.4s ease-in-out;
}
.material-symbols-outlined:hover {
  transform: scale(2);
  color: red;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<span class="material-symbols-outlined"> close</span>
 <span class="material-symbols-outlined">info</span>

Answer 2

If you're looking for standard, well-known icons that are not original or designer-made, consider using a Google character font.
You can check out and choose from a variety of Google icons here.

Material Icons come in five styles with different downloadable sizes and densities, all based on the core Material Design principles.

Select the desired icons and add them to your HTML by their names - just click on the icon name info and then copy the code.
Here's an example showing how to use the close and info icons along with adding color change effects when hovering over them.

.material-symbols-outlined {
  margin: 10px;
  transition: transform 0.4s ease-in-out;
}
.material-symbols-outlined:hover {
  transform: scale(2);
  color: red;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<span class="material-symbols-outlined"> close</span>
 <span class="material-symbols-outlined">info</span>

Answer 3

Answer №2

When working with SVGs, I prefer to create an image instead of directly embedding the SVG code in the HTML. This approach simplifies handling the viewBox property and allows me to easily import the SVG into my project for use in either CSS or HTML. In my CSS, I simply set the width and height as needed. Here's an example:

body {

  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

}

#MySQL {

  width: 200px;
  height: 200px;

}

<!DOCTYPE html>
<html lang="en" theme="">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Example</title>
</head>
<body>

   <img src="https://svgshare.com/i/qCH.svg" alt="MySQL" id="MySQL">

</body>
</html>

Answer 4

When working with SVGs, I prefer to create an image instead of directly embedding the SVG code in the HTML. This approach simplifies handling the viewBox property and allows me to easily import the SVG into my project for use in either CSS or HTML. In my CSS, I simply set the width and height as needed. Here's an example:

body {

  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

}

#MySQL {

  width: 200px;
  height: 200px;

}

<!DOCTYPE html>
<html lang="en" theme="">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Example</title>
</head>
<body>

   <img src="https://svgshare.com/i/qCH.svg" alt="MySQL" id="MySQL">

</body>
</html>

Answer 5

Answer №3

Welcome to the year 2023!

Say goodbye to Internet Explorer as it is officially dead.

All modern browsers now fully support native JavaScript Web Components
(and have been doing so for the past 5 years! ever since Edge made the switch to Chromium)

No more need for old-fashioned <symbol> tricks

We can now use semantic HTML to display SVG icons

   <svg-icon></svg-icon>
   <svg-icon is="info"></svg-icon>
   <svg-icon is="close"></svg-icon>

This will output:

The beauty of it all is that defining a Custom Element is no longer time-sensitive. All previously created (but undefined) tags will automatically upgrade themselves.

customElements.define("svg-icon", class extends HTMLElement{
  connectedCallback(){
    let size = "148px";
    Object.assign( this.style , {
      width         : size,
      height        : size,
      display       : "inline-block",
      cursor        : "pointer"
    });
    let dpath = {
      "close" : "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
      "info"  : "M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"
    }[ this.getAttribute("is") || "info" ];
    this.innerHTML = `<svg viewBox="0 0 24 24"><path d="${dpath}"/></svg>`;
  }
})

svg-icon[is="close"] {
    fill: red;
}
svg-icon:hover {
    fill: green;
}

<svg-icon></svg-icon>
<svg-icon is="info"></svg-icon>
<svg-icon is="close"></svg-icon>

Answer 6

Welcome to the year 2023!

Say goodbye to Internet Explorer as it is officially dead.

All modern browsers now fully support native JavaScript Web Components
(and have been doing so for the past 5 years! ever since Edge made the switch to Chromium)

No more need for old-fashioned <symbol> tricks

We can now use semantic HTML to display SVG icons

   <svg-icon></svg-icon>
   <svg-icon is="info"></svg-icon>
   <svg-icon is="close"></svg-icon>

This will output:

The beauty of it all is that defining a Custom Element is no longer time-sensitive. All previously created (but undefined) tags will automatically upgrade themselves.

customElements.define("svg-icon", class extends HTMLElement{
  connectedCallback(){
    let size = "148px";
    Object.assign( this.style , {
      width         : size,
      height        : size,
      display       : "inline-block",
      cursor        : "pointer"
    });
    let dpath = {
      "close" : "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
      "info"  : "M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"
    }[ this.getAttribute("is") || "info" ];
    this.innerHTML = `<svg viewBox="0 0 24 24"><path d="${dpath}"/></svg>`;
  }
})

svg-icon[is="close"] {
    fill: red;
}
svg-icon:hover {
    fill: green;
}

<svg-icon></svg-icon>
<svg-icon is="info"></svg-icon>
<svg-icon is="close"></svg-icon>

Answer 7

Answer №4

There are a number of issues that need attention:

The ID attributes should not be enclosed in quotes (though most Firefox and Chromium browsers are forgiving).
currentColor must be specified either on the <symbol> or <path> level to avoid fill colors defaulting to black.
It's important to double check IDs for any duplicates.

.icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}


p{
  color:red
}

.green{
  color:green
}

<p><svg class="icon">
    <use href="#close" />
  </svg>
</p>
<p class="green">
  <svg class="icon">
    <use href="#info-outline" />
  </svg>
</p>


<!-- SVG Icon Library -->
<svg style="width:0; height:0;">
  <symbol id="close" viewBox="0 0 24 24" fill="currentColor">
    <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 17.59 13.41 12z" />
  </symbol>
  <symbol id="info-outline" viewBox="0 0 24 24" fill="currentColor">
    <path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z" />
  </symbol>
</svg>

Answer 8

There are a number of issues that need attention:

The ID attributes should not be enclosed in quotes (though most Firefox and Chromium browsers are forgiving).
currentColor must be specified either on the <symbol> or <path> level to avoid fill colors defaulting to black.
It's important to double check IDs for any duplicates.

.icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}


p{
  color:red
}

.green{
  color:green
}

<p><svg class="icon">
    <use href="#close" />
  </svg>
</p>
<p class="green">
  <svg class="icon">
    <use href="#info-outline" />
  </svg>
</p>


<!-- SVG Icon Library -->
<svg style="width:0; height:0;">
  <symbol id="close" viewBox="0 0 24 24" fill="currentColor">
    <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 17.59 13.41 12z" />
  </symbol>
  <symbol id="info-outline" viewBox="0 0 24 24" fill="currentColor">
    <path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z" />
  </symbol>
</svg>

SVG failing to display properly

Answer №1

Answer №2

Answer №3

Welcome to the year 2023!

Answer №4

Similar questions

Tips on using CSS to hide elements on a webpage with display:none

The sass compiler has produced two separate CSS files, but I am only able to link one of them to the index.html file

Utilizing Bootstrap 4: The Use of an anchor tag in a button element

Leveraging Selenium to extract text from a dynamically populated DIV using JavaScript

How can we modify this function to interpret multiple selections at once?

Failure to highlight items when using the multiple select function

Screen readers are unable to "read" text that is identified through aria-describedby

Issue with border-color in CSS on Chrome tables

The text within my div is spilling over the edges despite my attempts to use text align and overflow properties

Utilizing ng-repeat to loop through a div element that consists of various nested tags

Can anyone explain why my navbar text is not aligning in the center?

What is the best method to showcase an array representing a key-value pair enclosed in {} as a list item within VueJS?

execute numerous Jssor Caption instances simultaneously

Restrict HTML Elements Based on Their Size

Prevent the onClick function of the outer div from being triggered by clicking on the inner div

Efficiently Organizing Data Using Coldfusion Loops in Columns and Rows

Is there a way to share the Username and Password without the need to manually input it?

Updating style in Javascript can sometimes be a bit tricky

How can I customize the appearance of a checkbox button in JavaFX?

Different methods for dynamically altering the style attribute