Как реализовать декоративный элемент без использования path, с целью минимизации размера файла?
Пример фрагмета кода, который не подходит из-за размера файла прилагаю.
<path d="m586.9,510.1l-0.3,0l-100.8,-136.3c3,-12.3 4.6,-25 4.6,-37.8c0,-30.6
-8.8,-60.2 -25.5,-85.7c-9.8,-15 -22,-28.1 -36.3,-39l-9.1,-6.5c-4.7,-3.1 -9.7,-6
-14.7,-8.5c-2.1,-1.2 -9.5,-5.2 -17.2,-7.8c-0.9,-0.3 -1.9,-0.6 -2.9,-0.9c-0.9,-0.3
-2.3,-0.7 -3.3,-1c-0.1,-0.6 -0.3,-1.4 -0.5,-2.5c-1.1,-12.5 -2.5,-24.5
-4.1,-35.7c-4.2,-29.7 -10.1,-56.2999 -17.7,-79.1999c-12.3,-37.6 -29.2,-58.8
-32.1,-62.30001l0.1,-6.79999l-57.2,0l0.2,6.89999c-2.9,3.50001 -19.7,24.70001
-32,62.20001c-7.5,22.9 -13.5,49.5999 -17.7,79.1999c-1.5,10.9 -2.9,22.5 -4,34.6c-
0.2,1.6 -0.4,2.8 -0.6,3.5c-1,0.4 -2.3,0.8 -3.2,1l-0.2,0.1c-0.9,0.3 -1.8,0.5
-2.8,0.8c-8,2.7 -15.7,6.9 -17.1,7.8c-5,2.6 -10,5.4 -14.7,8.6l-9.6,6.8c-14.1,10.8
-26.1,23.8 -35.9,38.7c-16.7,25.5 -25.5,55.2 -25.5,85.7c0,8.2 0.6,16.4
1.9,24.5l1.2,7c0.3,1.6 0.7,3.3 1.1,4.9c0,0.2 0,0.4 0,0.6c-0.4,0.8 -1.2,2.2
-1.8,3l-0.1,0.2l-98.5,134.3l-0.79995,1.1l-
9,0.1l0,56.3l9.59995,0l0,0.1l0.1,-0.1l0.2,0l100.8,136.4c-3,12.3 -4.6,25
-4.6,37.8c0,30.6
Ответы (1 шт):
Если я правильно понял, то вы хотите добавить декорирующие SVG изображения без копирования кода SVG внутрь HTML.
Для этого вам необходимо сохранить код декорирующего SVG в отдельный файл, загрузить его на ваш локальный или удаленный сервер и добавить его в HTML страничку одним из способов:
1.<img>
Конечно, если вам нужно использовать SVG только, как картинку, то можно и так добавлять. Но, при таком способе вы будете лишены всеx возможностей SVG: стилизация, адаптивность, интерактивность
<img class="img" style="width:200px; height:200px" src="https://twemoji.maxcdn.com/svg/1f310.svg" />
</div> 2.<object>
Самый распространенный способ добавления SVG файлов в HTML При таком способе, как и при инлайн способе становятся возможными: адаптивность, стилизация, интерактивность
<div class="img" >
<object type="image/svg+xml" data="https://twemoji.maxcdn.com/svg/1f310.svg" style="width:200px; height:200px"></object>
</div> Другие способы добавления SVG в HTML