I need help figuring this out as it's been quite challenging for me. Could someone else take a look and provide some insight?
There are SVGs included in my HTML file, but they aren't showing up on the screen. I've tried adjusting the viewBox attribute for each one, but so far no luck.
Any thoughts on why they're not visible?
body {
background-color: #ddd;
}
.st1 {
fill: #FFFFFF;
}
.st15 {
fill: #000000;
}
p {
width: 600px;
}
span svg {
width: 35px;
height: 40px;
border: 1px solid red;
float: left;
padding: 0;
margin: 0;
}<!-- SVG Sprite, which is hidden, we reference the individual symbols/icons later -->
<svg style=" display: none; position: absolute;" <!-- width: 20px; height: 20px; " --> <!-- 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-plus " viewBox="0 0 40 40 " preserveAspectRatio="xMinYMin " aria-labelledby="title desc " role="img ">
<title>plus sign</title>
<!-- <path class="path1 " d="M11 1l-5 5h-3l-3 4c0 0 3.178-0.885 5.032-0.47l-5.032 6.47 6.592-5.127c0.919 2.104-0.592 5.127-0.592 5.127l4-3v-3l5-5 1-5-5 1z "></path> -->
<path class="st1 " d="M342.5,21.5v2c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.7,0.3h-4.4V29c0,0.3-0.1,0.5-0.3,0.7 c-0.2,0.2-0.4,0.3-0.7,0.3h-2c-0.3,0-0.5-0.1-0.7-0.3c-0.2-0.2-0.3-0.4-0.3-0.7v-4.4h-4.4c-0.3,0-0.5-0.1-0.7-0.3s-0.3-0.4-0.3-0.7 v-2c0-0.3,0.1-0.5,0.3-0.7s-0.4-0.3,0.7-0.3h4.4V16c0-0.3,0.1-0.5,0.3-0.7c0.2-0.2,0.4-0.3,0.7-0.3h2c0.3,0,0.5,0.1,0.7,0.3
c...