Inline SVG icons not displaying in viewbox

Question

This has proven too difficult for me work out, so another pair of eyes would help immensely!

I have some SVG's inline in my HTML file, but I don't know why they are not displaying. I have tried finding them by manipulating each of their viewBox attribute, but I haven't been successful yet.

Any ideas why I cant see them?

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.7s0.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
c0.2,0.2,0.3,0.4,0.3,0.7v4.4h4.4c0.3,0,0.5,0.1,0.7,0.3C342.4,21,342.5,21.2,342.5,21.5 "/>
			</symbol>
			
			<symbol id="icon-minus " viewBox="0 0 40 40 " preserveAspectRatio="xMinYMin " aria-labelledby="title desc " role="img ">
                <title>minus</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="st15 " d="M318.6,21.3v2.4c0,0.3-0.1,0.6-0.4,0.9c-0.2,0.2-0.5,0.4-0.9,0.4h-15.5c-0.3,0-0.6-0.1-0.9-0.4 c-0.2-0.2-0.4-0.5-0.4-0.9v-2.4c0-0.3,0.1-0.6,0.4-0.9c0.2-0.2,0.5-0.4,0.9-0.4h15.5c0.3,0,0.6,0.1,0.9,0.4 C318.5,20.7,318.6,21,318.6,21.3 "/>
			</symbol>
	
        </defs>
    </svg>

    <!-- Here we display the individual icons with referencing their symbol id -->
	<p>
		<span>
			<svg>
				<use xmlns:xlink="http://www.w3.org/1999/xlink " xlink:href="#icon-plus "></use>
			</svg>
		</span>
		
		<span>
			<svg>
				<use xmlns:xlink="http://www.w3.org/1999/xlink " xlink:href="#icon-minus "></use>
			</svg>
		</span>

		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam convallis arcu eu ante vestibulum, non dictum felis pellentesque. 
		Curabitur non risus rhoncus tellus vehicula pellentesque. Pellentesque commodo enim scelerisque quam accumsan, id fermentum augue condimentum. 
		Praesent sed imperdiet quam. Cras dapibus orci maximus, aliquam turpis sed, laoreet sapien. Curabitur feugiat pulvinar orci, sit amet venenatis nibh consequat vel.
		Vivamus vehicula eget ex non semper. Donec sit amet luctus neque. 
		Vestibulum aliquam elit justo, in pretium neque efficitur ac. Proin tellus diam, finibus sit amet tristique in, commodo ac metus. 
		Mauris eget erat ut erat rutrum ultricies sed non leo. Duis in turpis magna. 
		Praesent efficitur, odio congue venenatis tempor, sem augue sollicitudin orci, eu convallis enim diam et eros. 
		Vivamus nulla odio, eleifend vitae pharetra non, lobortis at nulla. 
	</p>
    <!-- <svg>
        <use xmlns:xlink="http://www.w3.org/1999/xlink " xlink:href="#icon-fire "></use>
    </svg> -->

Answer 1

The viewBox attribute tells the browser where in the coordinate system your SVG contents are situated.

You currently have it set to "0 0 40 40" which means from (0,0) to (40,40). However look at the first coordinate of your <path>: (342.5, 21.5). So you are clearly way off with your viewBox.

There are several ways forward including, but not limited to:

1. Load your SVG into a vector editor and move and resize your path so it fits in the 40x40 viewBox.

2. Load the SVG into a vector editor and determine the dimensions using the editors dimension readouts. Use those for setting the viewBox.

3. Start with a viewBox in roughly the right area, and manually keep readjusting it till you iteratively shrink it to the right size.

4. Load it into a browser and use getBBox() to find the correct values for the viewBox.

Note also that if you choose not to use symbols positioned at or near the origin (0,0) you will probably need to also add viewBox attributes to the SVGs that have the <use> elements.