据我所知，减少DOM是性能POV的一个好习惯。
在一个案例中，我可以列出一些SVG为div子项的项目：
<div class="listItem">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="80px" itemtype="background" no-padding="" preserveAspectRatio="xMidYMid meet" viewBox="0 0 480 480" width="80px" xmlns="http://www.w3.org/2000/svg">
<path itemtype="shape" class="draggable" id="7c6ab8e7-fc77-449d-943c-f977282a0d58" d="M11.14,21.61 Q230.00,19.29 451.32,17.92 Q459.81,242.94 452.55,460.56 Q210.29,460.43 9.91,460.56 Q8.81,249.09 11.14,21.61Z" transform="matrix(1 0 0 1 0 0)" data-index="0" style="fill: rgb(255, 255, 255); stroke: black; opacity: 1; fill-opacity: 1; stroke-width: 2; stroke-linecap: butt; stroke-opacity: 1; stroke-linejoin: miter; stroke-dasharray: none;"></path>
<path itemtype="shape" class="draggable" id="ee1d5887-d2f0-4903-857a-7ef489d10896" d="M113.72,157.88 Q245.96,160.52 335.00,155.00 Q344.84,243.08 379.16,330.20 Q249.80,286.28 86.84,332.12 Q104.84,253.64 113.72,157.88Z" transform="matrix(1 0 0 1 0 0)" data-index="1" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); opacity: 1; fill-opacity: 1; stroke-width: 11; stroke-linecap: butt; stroke-opacity: 1; stroke-linejoin: miter; stroke-dasharray: none;"></path>
<path itemtype="shape" class="draggable" id="4821b89a-e601-4752-842f-02a1a1ee6475" d="M169.25,171.82 C153.48,100.60 264.27,76.08 280.03,147.30 C295.80,218.52 185.01,243.04 169.25,171.82Z" transform="matrix(1 0 0 1 0 0)" data-index="2" style="fill: rgb(248, 254, 141); stroke: rgb(0, 0, 0); opacity: 1; fill-opacity: 1; stroke-width: 8; pointer-events: auto; stroke-linecap: butt; stroke-opacity: 1; stroke-linejoin: miter; stroke-dasharray: none;"></path>
<path itemtype="shape" class="draggable" id="4a90b5c5-cbbf-4254-ac62-415fcfdc98bd" d="M282.86,245.68 Q305.23,282.77 335.36,341.75 Q272.53,336.63 201.75,337.86 Q231.77,304.97 282.86,245.68Z" transform="matrix(1 0 0 1 0 0)" data-index="3" style="fill: rgb(246, 198, 161); stroke: black; opacity: 1; fill-opacity: 1; stroke-width: 11; stroke-linecap: butt; stroke-opacity: 1; stroke-linejoin: miter; stroke-dasharray: none;"></path>
<path itemtype="shape" class="draggable" id="b5203325-11a7-4092-a994-45edee079d15" d="M172.59,252.90 Q151.69,287.11 123.51,341.52 Q181.67,337.10 247.16,338.61 Q219.55,308.03 172.59,252.90Z" transform="matrix(1 0 0 1 0 0)" data-index="4" style="fill: rgb(170, 226, 237); stroke: black; opacity: 1; fill-opacity: 1; stroke-width: 10; stroke-linecap: butt; stroke-opacity: 1; stroke-linejoin: miter; stroke-dasharray: none;"></path>
</svg>
</div>
在另一种情况下，我可以在IMG中找到SVG为数据网址的项目列表：
<div class="listItem">
<img src="data:image/svg+xml, ...<< SVG here >>>"/>
</div>
后者是否有效地从浏览器角度减少了DOM结构，从而带来了更好的性能和实践？ 或者数据网址仍然被解释为DOM结构，因此这样做没有实际好处吗？
为什么我要学习这个 - 在我的情况下我可以有一个小图标网格（屏幕上50-60），每个可以有10-30个路径，所以我试图看看我是否应该遵循这个方法with data-url。