SVG not showing up [closed] - html

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 days ago.
Improve this question
I have a close button, that i want to display on the top right corner of my page.
The code of the svg is as follows
.icon {
width: 24px;
height: 24px;
/* changes to the fill do nothing */
fill: currentColor;
}
<svg class="icon">
<use xlink:href="#close" />
</svg>
<!-- some more 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 icon is not showing up on the page
The following example is with an other icon. This one works...
.icon {
width: 24px;
height: 24px;
/* changes to the fill do nothing */
fill: currentColor;
}
<svg class="icon">
<use xlink:href="#info-outline" />
</svg>
<!-- some more 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>
These examples are more or less the same and I'm clueless as to why that doesn't display the svg.
I tried changing the size of the svg, but the Dev-Tools show that the icon has a normal size.
Changes to the fill attribute also do nothing.
Other Svg's are working as expected and so should the close icon


If the icons are standard, well-known, not original, not designer, then you can use a Google character font.
The choice and connection of icons from Google can be viewed here
Material Icons are available in five styles and a range of
downloadable sizes and densities. The icons are based on the core
Material Design principles and metrics.
The desired icons are selected and added to the HTML by name: for example, click on the icon name info and copy the code.
Below is an example of using close and info icons. Added color change when hovering over icons.
.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>


I am not sure if this will help, but the way I handle svg's is by making an image instead putting the actual svg code in the html. It simplifies having to deal with the viewBox property. Instead, I import the svg into my project, then use it in either my css or html depending what type of svg it is. Then in the css I will set the desired width and height and I am done. An example is below.
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>


It is 2023
Internet Explorer is dead.
All modern browsers support native JavaScript Web Components
(and have so for the past 5 years! since Edge switched to Chromium)
No need for oldskool <symbol> mumbo jumbo
We can write semantic HTML to display SVG icons
<svg-icon></svg-icon>
<svg-icon is="info"></svg-icon>
<svg-icon is="close"></svg-icon>
to output:
All code required:
Note! It totally does not matter when you define a Custom Element, all already created (but undefined) tags will automagically upgrade.
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>


Several issues:
ID attributes are not enclosed by quotes (obviously, most Firefox and Chromium are quite forgiving)
currentColor needs to be specified either on <symbol> or <path> level – otherwise, fill colors will fall back to black.
Double check your IDs for 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 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>

Related

How to align an SVG inside another element (e.g. anchor) [duplicate]

This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Why anchor tag does not take height and width of its containing element
(7 answers)
Closed 2 years ago.
I have a simple inline SVG:
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="circle" viewBox="0 0 512 512">
<path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" />
</symbol>
</svg>
<svg class="icon"><use xlink:href="#circle" /></svg>
and some styling:
<style>
.icon{
fill: black;
height: 1.25em;
width: 1.25em;
display:inline-block;
}
a{
background:red
}
</style>
However in this example, the SVG dimensions are 19.38 x 19.38 (black circle), whereas the anchor is offset and 20 x 17.6 (red background):
Codepen.io example is here: https://codepen.io/alias51/pen/qBbBoNo.
This is the case whatever the wrapping element around the svg is (anchor, span, etc). What is going on?? How can I align the SVG and anchor so they are the same dimensions?

How to use built-in SVG as Background Image?

<div class="svg-background"></div>
<svg id="svg-source" viewBox="0 0 24 16" fill="none">
<path d="M23.8475 7.18155C23.6331 6.88825 18.5245 0 11.9999 0C5.4753 0 0.36647 6.88826 0.152297 7.18127C-0.0507658 7.45952 -0.0507658 7.83691 0.152297 8.11517C0.36647 8.40846 5.4753 15.2967 11.9999 15.2967C18.5245 15.2967 23.6331 8.40842 23.8475 8.1154C24.0508 7.8372 24.0508 7.45952 23.8475 7.18155ZM11.9999 13.7143C7.19383 13.7143 3.03127 9.14243 1.79907 7.64782C3.02968 6.15189 7.18352 1.58241 11.9999 1.58241C16.8057 1.58241 20.968 6.15349 22.2007 7.6489C20.9701 9.14478 16.8163 13.7143 11.9999 13.7143Z" fill="#073255"/>
</svg>
<style>
.svg-background {
height: 2em;
width: 2em;
background-image: url(#svg-source);
}
</style>
I've tried with # sign - but no result.
I want to use built-in SVG file as background pattern.
I need to achieve 2 purposes
Avoid duplication SVG element on the page
Avoid having external SVG image.
Any ideas?

svg fill not working on iconmonstr socials

i've downloaded an svg format on this site http://iconmonstr.com/ and search for pinterest.svg , when i download the file i can open the svg file on my editor and change the fill of it. however i want something that i can hover it with different color to bypass the color.
i change the fill value to black.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
/*
this is the file of svg format that was downloaded:
this is the downloaded code for pinterest svg:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="black" ><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg>
*/
/* this code right here works it resizes the image svg
img:hover{
width:100px;
}
*/
/* but this thing doesnt work */
img:hover{
fill:red;
}
/*i tried
svg:hover{fill:red;}
img svg:hover{fill:red;}
both of these two doesnt work
*/
</style>
</head>
<body>
<img src="iconmonstr-pinterest-1.svg"/>
</body>
</html>
if anyone can solve the problem with explanation i will gladly appreciate it . thank you guys .

SVG Oversized on Load

I have a simple search icon as an SVG I'm using, but for some reason, when I load my webpage, it is huge despite a 24x24 lock in the CSS and in the styling of the SVG itself.
It spreads out and takes up the whole page until everything is done loading, then it snaps to the normal 24x24 size. It looks absolutely ridiculous and I know I have to be doing something wrong. Any ideas?
SVG:
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-search" class="icon" viewBox="0 0 24 24">
<title>search</title>
<circle class="st0" cx="9.3" cy="9.2" r="8.6" />
<line class="st1" x1="15.3" y1="15.4" x2="23.3" y2="23.4" />
</symbol>
</defs>
HTML:
<div class="searchContainer">
<div class="search">
<input class="image" type="image" src="images/search.svg"><input class="text" type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" onblur="if (this.value == '') { this.value = 'Search'; }">
</div><!-- /search -->
</div><!-- /searchContainer -->
CSS:
input.image{
fill: black;
width: 24px;
height: 24px;
border: 0;
padding-top: 9px;
text-align: right;
}
Here is what I'm Seeing on Load.
Note that the other icons are also SVGs, but they are done in a single file with the method I couldn't use with the input for the search.
<svg><use xlink></use></svg>
Any help appreciated. Thank you!

You can solve this by adding the width and height attributes directly to the SVG. For example, your SVG might look something like this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 225 225" width="20" height="20">
<title>Search</title>
<path fill="#fff" d="M225 202v8c-2.7 7.3-7.6 12.4-15 15h-8c-7.3-1.2-12.4-5.7-17.3-10.9-6.6-7-13.6-13.7-20.4-20.6-11.5-11.6-22.9-23.2-34.3-34.7-18 10.2-36.7 14.6-56.6 11.2-34.8-5.9-57.9-25.9-69.3-59.2C2 105.2 1.3 99 0 93V78c.3-.8.7-1.5.8-2.3C6.1 38.8 27 15 62.1 3.4 67.2 1.7 72.7 1.1 78 0h15c3.6.7 7.1 1.3 10.7 2C140 8.7 170 44.2 171.1 81.2c.5 17.2-3.3 33.3-12.5 49.2 1.3 1 3 1.9 4.2 3.2 17.1 17 34.1 34.2 51.3 51.2 5.1 4.9 9.7 9.9 10.9 17.2zM85.1 146.9c33 .5 61.5-27.3 61.9-60.4.4-33.7-26.7-61.5-60.6-62.2-33.3-.7-61.5 26.8-62.1 60.6-.6 33.3 27 61.5 60.8 62z"/>
</svg>
Note where it says width="20" height="20" specifically. That will limit the SVG size when the image loads. Then you can adjust the height and width using CSS as needed.

Put the SVG IMG element inside a div and then size the div and the img appropriately...
<div id="logo">
<img id="logo_img" src="assets/images/logo.svg">
</div>
#logo {
display: block;
height: 50px;
}
#logo_img {
height: 50px;
width: 200px;
}

Load the SVG and style inline. If you put the tags above the tags it will remove the giant stutter on page load.

If you can load your svg inside an <img> tag then set the size of the img directly
<img src="badge.svg" width="200">

My solution is to have the opacity of the SVG element set to 0 and then set it to 1 after loading.
1. Add the opacity: 0; to the element or its parent in your CSS.
2. Optionally add a transition, like transition: 0.5s opacity;
3. Create a new class, let's say "loaded", with the opacity: 1;
4. In JavaScript add a line in the load event that adds the "loaded" class to the SVG element or its parent.

Even better solution...
Add style="display:none;" attribute inline to img tag(s).
Use jQuery to .show() img once page is fully loaded.
$( window ).load(function() {
$('.container img').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<img src="https://www.zdmdesigns.com/images/zdm-logo.svg" style="display:none;">
</div>

You will need to identify your width and height on the html dom.
Also, try using the tags below
<object data="your_svg_path" width="57" height="57" type="image/svg+xml">
</object>

Not the answer to the original question, but maybe it helps someone.
If you are using a CMS and FontAwesome as JS you maybe need to disable FA in edit mode so it does not replace the tags. Without the FA-Script loaded the stays in the content, not the .

Using display flex on a button makes it wrap in Firefox

For some reason using display Flex like this causes the items to wrap one ontop of eachother in Mozilla. Is there a reason for this? In Chrome it works fine and they are on one line in the middle.
FireFox
Chrome
button.primary {
display: -webkit-flex;
display: -moz-flex;
display: flex;
align-items: center;
padding: 10px 20px;
}
svg {
width: 15px
}
<button class="primary add-student">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="15.6 15.6 114.7 114.7" enable-background="new 15.6 15.6 114.7 114.7" xml:space="preserve" class="plus">
<path d="M128.1 59.6c-1.5-1.5-3.4-2.3-5.5-2.3H88.6V23.5c0-2.2-0.8-4-2.3-5.5 -1.5-1.5-3.4-2.3-5.5-2.3H65.2c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v33.9H23.5c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v15.6c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h33.9v33.9c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h15.6c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V88.6h33.9c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V65.2C130.4 63 129.6 61.2 128.1 59.6z"></path>
</svg><span>Add Student</span>
</button>

[UPDATE: Firefox trunk builds have changed to match the questioner's expectations on this issue. This change will tentatively be in Firefox 52, which I believe ships in March 2017.]
So, a few things:
The display property has almost no effect on a <button> in Firefox, as described in https://bugzilla.mozilla.org/show_bug.cgi?id=984869, aside from letting you choose whether the button is block-level or inline-level. (This is also true of <table> and <fieldset>, in both Chrome and Firefox.)
The effect you're seeing (wrapping) is happening because of a quirk of flexbox -- things with display:flex force their children to be block-level. So, your <svg> and <span> elements become display:block instead of their default display:inline, and so they each get their own line (because they're each a block now). This happens even though the button doesn't actually become a flex container, because all the style system sees is style data -- so it sees "display:flex" on the parent & blockifies the children. It doesn't know that we happen to be on a <button> which is special and not-actually-a-flex-container. This might be arguably a bug in Firefox; I'm not sure, offhand.
ANYWAY - if you're trying to set dipslay:flex on a <button>, what you actually need is a wrapper-div inside your <button>, to contain the <svg> and <span>, and which you can style to be a flex container.
Here's an updated version of your code snippet (with -moz prefixed version removed, since as another answer pointed out, -moz-flex isn't recognized in any supported version of Firefox):
div.buttonContents {
display: -webkit-flex;
display: flex;
align-items: center;
}
button.primary {
padding: 10px 20px;
}
svg {
width: 15px
}
<button class="primary add-student">
<div class="buttonContents">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="15.6 15.6 114.7 114.7" enable-background="new 15.6 15.6 114.7 114.7" xml:space="preserve" class="plus">
<path d="M128.1 59.6c-1.5-1.5-3.4-2.3-5.5-2.3H88.6V23.5c0-2.2-0.8-4-2.3-5.5 -1.5-1.5-3.4-2.3-5.5-2.3H65.2c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v33.9H23.5c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v15.6c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h33.9v33.9c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h15.6c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V88.6h33.9c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V65.2C130.4 63 129.6 61.2 128.1 59.6z"></path>
</svg><span>Add Student</span>
</div>
</button>

I would use more light weight method for buttons display:inline-block:
button {
height: 40px;
padding: 0 10px;
white-space: nowrap;}
button * {
display: inline-block;
vertical-align: middle;}
button svg {
height: 15px;
margin-right: 5px;}
<button class="primary add-student">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="15.6 15.6 114.7 114.7" enable-background="new 15.6 15.6 114.7 114.7" xml:space="preserve" class="plus">
<path d="M128.1 59.6c-1.5-1.5-3.4-2.3-5.5-2.3H88.6V23.5c0-2.2-0.8-4-2.3-5.5 -1.5-1.5-3.4-2.3-5.5-2.3H65.2c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v33.9H23.5c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v15.6c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h33.9v33.9c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h15.6c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V88.6h33.9c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V65.2C130.4 63 129.6 61.2 128.1 59.6z"></path>
</svg><span>Add Student</span>
</button>