同一个SVG，页面要加载两次，很浪费时间，有什么办法只加载一次。

Question

同一个SVG，页面要加载两次，很浪费时间，有什么办法只加载一次。

<ul class="offcanvas-navigation">
                    <li><span class="icon"><img src="img/icons/profile.svg" class="injectable" alt=""></span><a href="logint.php">Login / Sign up</a></li>
                    <li><span class="icon"><img src="img/icons/profile-two.svg" class="injectable" alt=""></span><a href="profile.php">My Profile</a></li>
                    <li><span class="icon"><img src="img/icons/notification.svg" class="injectable" alt=""></span><a href="notification.php">Notification</a></li>
                    <li><span class="icon"><img src="img/icons/product.svg" class="injectable" alt=""></span><a href="shop.php">All products</a></li>
                    <li><span class="icon"><img src="img/icons/cart-two.svg" class="injectable" alt=""></span><a href="order.php">My Order</a></li>
                    <li><span class="icon"><img src="img/icons/cart-three.svg" class="injectable" alt=""></span><a href="cart.php">Cart</a></li>
                    <li><span class="icon"><img src="img/icons/gear-two.svg" class="injectable" alt=""></span><a href="edit-profile.php">Settings</a></li>
                </ul>

Answer 1

精灵图（sprite）：图片整合技术，将大量的小图标整合到一张图，从而减少服务器接收和发送请求的次数，提高页面的加载速度。
如何使用：精灵图的实质其实就是利用背景图和背景图的位置去显示同一张图上，不同位置的图片，进而，在引入一张图的前提下，显示不同的图片的技巧