Within my index.shtml, I include the following code:
<object data="icons/svg-sprite.svg" type="image/svg+xml" width="0" height="0" style="display: none;"></object>
Inside my svg-sprite.svg file, the content is as follows:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" focusable="false">
<defs>
<symbol id="html_element_group_core" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" focusable="false" x="0px" y="0px" viewBox="0 0 24 24" enable-background="new 0 0 24 24">
<path d="M12,0C5.369,0,0,5.369,0,12s5.369,12,12,12s12-5.369,12-12S18.631,0,12,0zM12,21.6c-5.298,0-9.6-4.302-9.6-9.6S6.702,2.4,12,2.4s9.6,4.302,9.6,9.6S17.298,21.6,12,21.6zM12,7.2c-2.654,0-4.8,2.146-4.8,4.8s2.146,4.8,4.8,4.8s4.8-2.146,4.8-4.8S14.654,7.2,12,7.2z" />
</symbol>
</defs>
Once again referencing my index.shtml, this time with the following snippet:
<svg class="group_icon svg_icon">
<use xlink:href="icons/svg-sprite.svg#html_element_group_core"></use>
</svg>
It's important to note that the use element directly references the icon from the svg-sprite.svg file.
I'm puzzled by the fact that even if I remove the object element, it still functions correctly. Why is this the case? Do I actually need the object tag at all, or is it due to the direct reference within
icons/svg-sprite.svg#html_element_group_core