I have the following svg file with three SVG images inside:
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- Circular Arrow -->
<symbol id="circular-arrow" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<g transform="matrix(-1 0 0 1 1025.9 0)">
<path transform="matrix(-1 0 0 1 1025.9 0)" d="m970.62 20.137-132.6 125.35c-88.627-77.213-202.54-120.16-320.83-120.16-129.5 0-253.78 51.476-345.35 143.05-91.573 91.573-143.05 215.85-143.05 345.36 0 129.5 51.477 253.78 143.05 345.35 91.573 91.573 215.85 143.05 345.35 143.05 129.5-1e-4 253.78-51.478 345.36-143.05 91.573-91.573 143.05-215.85 143.05-345.35 0-2.962-0.167-5.9052-0.2208-8.8613l-149.94 2.3301c0.04204 2.1787 0.16211 4.3479 0.16211 6.5312 0 89.78-35.633 175.81-99.117 239.29-63.484 63.484-149.51 99.117-239.29 99.117-89.78 0-175.81-35.633-239.29-99.117-63.484-63.484-99.117-149.51-99.117-239.29 0-89.78 35.633-175.81 99.117-239.29s149.51-99.117 239.29-99.117c77.097 0 151.43 26.279 211.09 73.904l-118.94 112.44 158.12 0.06836 158.13 0.07031 22.514-170.84 22.516-170.84z" color="#000000" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
</g>
</symbol>
<!-- Speech bubble -->
<symbol id="speech-bubble" height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="currentColor" fill-rule="evenodd" id="Icons with numbers" stroke="none" stroke-width="1"><g fill="currentColor" id="Group" transform="translate(-720.000000, -192.000000)"><path d="M728,205 C727.092687,205 726.225692,204.86437 725.430064,204.617506 C724.617765,205.250987 723.248775,206.131104 721.912598,206.131104 C722.612692,205.468456 722.810743,204.184192 722.854217,203.228743 C721.703165,202.248586 721,200.938813 721,199.5 C721,196.462434 724.134007,194 728,194 C731.865993,194 735,196.462434 735,199.5 C735,202.537566 731.865993,205 728,205 Z M728,205" id="Oval 247"/></g></g></symbol>
</symbol>
<!-- Loupe -->
<symbol id="loupe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="none" stroke-width="36" stroke-linecap="round"
d="m280,278a153,153 0 1,0-2,2l170,170m-91-117 110,110-26,26-110-110"/>
</symbol>
</svg>I can access the first 2 SVG images with help of this html code:
Example:
<svg>
<use href="img/icons.svg#speech-bubble"></use>
</svg>
But the last one doesn't work. It is independent of the image. If I move "Speech bubble" to the bottom I won't be able to access this one and "Loupe" works perfectly fine again.
Typo: you have an extra closing tag at line 12 - the one for the Speech bubble