Как преобразовать путь SVG в файл .svg и связать динамические изображения с координатами

Question

Я проектирую веб-страницу с очень большой SVG карты мира, действительно огромной. Моя проблема в том, что я могу импортировать его в HTML напрямую, используя <path>, но это вызывает ошибки загрузки страницы на некоторых устройствах из-за его огромного размера. Затем я решил попытаться найти способ сжать это в некоторый меньший код.

Я попытался сохранить целое в виде файла file.svg и загрузить его непосредственно в мой HTML, используя <img src="{% static 'PNG/file.svg' %}" />, но он не загружает динамические изображения, которые я добавил к определенным координатам.

Итак, как мне преобразовать путь SVG в файл .svg и сохранить динамические изображения с соответствующими координатами?

Мой текущий код, который работает, но очень большой:

<svg style="fill: #142236; overflow-x: hidden;" class="Map" viewBox="0 -213 1766.961 874.341">
                    <path>Longdata......</path>
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="100" x="300" y="10" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="600" x="230" y="-70" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="300" x="900" y="-60" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="400" x="1050" y="-120" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="500"  x="1150" y="20" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="1200"  x="1250" y="-140" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="200" x="580" y="-280" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="700" x="900" y="300" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="800" x="820" y="100" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="900" x="490" y="280" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="1000" x="1420" y="330" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="1100"  x="1300" y="0" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                  </svg>

Весь код SVG: https://pastebin.com/rU3GeTvU

Answer 1

Если проблема заключается в длине пути, то вы можете просто разделить путь там, где есть команда «M».

т. изменить:

<path id="Map" d="M 895.4368896484375 152.4791412353516 C 893.6979370117188 151.6047668457031 890.8810424804688 153.2721557617188 891.3057250976563 154.4424896240234 C 891.5921020507813 155.2454223632813 892.7576293945313 156.2630462646484 896.3822021484375 157.2088317871094 C 900.0067138671875 158.1550140380859 900.4414672851563 160.6248321533203 901.9644775390625 160.7012634277344 C 903.4885864257813 160.7730712890625 903.6312866210938 159.3158416748047 903.2685546875 157.3520812988281 C 902.90576171875 155.388671875 905.0786743164063 153.1334381103516 905.2980346679688 152.7705841064453 C 905.5126953125 152.4073181152344 904.357421875 151.8244171142578 901.3822631835938 152.4791412353516 C 898.4069213867188 153.1334381103516 897.179931640625 153.35302734375 895.4368896484375 152.4791412353516 Z M 871.577880859375 143.1622314453125 C 870.9236450195313 146.0003814697266 871.9405517578125 149.5692443847656 873.6073608398438 147.892333984375 C 875.2791137695313 146.2249298095703 876.0765991210938 147.0228576660156 877.0173950195313 145.7853088378906 C 877.9577026367188 144.5480499267578 877.1605834960938 139.9660949707031 877.81494140625 137.7823944091797 C 878.4688720703125 135.5990142822266 874.9110107421875 134.576904296875 873.3161010742188 135.9573516845703 C 871.7259521484375 137.3431549072266 870.40771484375 135.7184753417969 869.7676391601563 136.8317565917969 C 868.9657592773438 138.2175750732422 872.2321166992188 140.3245391845703 871.577880859375 143.1622314453125 Z M 1351.581298828125 368.0840759277344 C...

до

<g id="Map">
  <path d="M 895.4368896484375 152.4791412353516 C 893.6979370117188 151.6047668457031 890.8810424804688 153.2721557617188 891.3057250976563 154.4424896240234 C 891.5921020507813 155.2454223632813 892.7576293945313 156.2630462646484 896.3822021484375 157.2088317871094 C 900.0067138671875 158.1550140380859 900.4414672851563 160.6248321533203 901.9644775390625 160.7012634277344 C 903.4885864257813 160.7730712890625 903.6312866210938 159.3158416748047 903.2685546875 157.3520812988281 C 902.90576171875 155.388671875 905.0786743164063 153.1334381103516 905.2980346679688 152.7705841064453 C 905.5126953125 152.4073181152344 904.357421875 151.8244171142578 901.3822631835938 152.4791412353516 C 898.4069213867188 153.1334381103516 897.179931640625 153.35302734375 895.4368896484375 152.4791412353516 Z"/>
  <path d="M 871.577880859375 143.1622314453125 C 870.9236450195313 146.0003814697266 871.9405517578125 149.5692443847656 873.6073608398438 147.892333984375 C 875.2791137695313 146.2249298095703 876.0765991210938 147.0228576660156 877.0173950195313 145.7853088378906 C 877.9577026367188 144.5480499267578 877.1605834960938 139.9660949707031 877.81494140625 137.7823944091797 C 878.4688720703125 135.5990142822266 874.9110107421875 134.576904296875 873.3161010742188 135.9573516845703 C 871.7259521484375 137.3431549072266 870.40771484375 135.7184753417969 869.7676391601563 136.8317565917969 C 868.9657592773438 138.2175750732422 872.2321166992188 140.3245391845703 871.577880859375 143.1622314453125 Z"/>
  <path d="M 1351.581298828125 368.0840759277344 C...
  ...etc...
</g>

Вам не нужно делить на каждый M. Просто сделайте каждый путь достаточно маленьким, чтобы не быть слишком длинным.

Заметьте также, что следите за тем, чтобы озера и внутренние моря находились на том же пути, что и страна, к которой они принадлежат.

Но, в конечном счете, вам может быть проще найти версию карты мира, в которой не все на одном пути. В Интернете доступно множество бесплатных карт мира SVG.