There is an interactive map made with the help of svg , I specify its size through the image <img src="media/back.png" alt=""> . If I clean the picture, my map is reduced to very small sizes. The image is the same size as in the viewBox .

How to fix? (I'm trying to get rid of the picture)

 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Интерактивная карта</title> <meta name="description" content=""> <meta name="keywords" content=" "> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/media.css"> <link rel="stylesheet" href="css/fonts.css"> <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </head> <body> <div class="map"> <svg viewBox="0 0 1366 662"> <a href="#"> <path class="part" d="m 666.12794,242.6834 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad" description-data="<img src='media/1.jpg'> Мощно."> </a> <a href="#"> <path class="part" d="m 666.12794,242.6834 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad"> </a> <a href="#"> <path class="part" d="m 396.85671,381.31123 17.70329,8.50142 8.37328,-16.95909 -17.95597,-8.75942 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 364.5027,269.75233 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 380.52309,354.8261 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 457.8629,407.85911 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 438.52794,447.63388 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 361.18814,458.68241 8.5976,7.21778 7.0639,-8.08786 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 380.52309,437.13775 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 393.22891,420.01251 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 368.92212,550.38533 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 379.97066,522.76397 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 399.30561,492.93291 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 635.92316,259.30512 13.52116,11.21884 11.10914,-12.57123 -13.68345,-11.4954 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 570.29179,252.37179 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 540.60429,239.87179 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 396.46366,286.74679 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 426.15116,306.66867 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 453.88554,326.59054 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 513.65116,357.44993 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 479.66679,339.48117 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 552.32303,326.98117 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 587.47928,303.54367 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 619.51054,278.15304 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 737.35191,384.86418 10.00908,3.84657 4.34309,-10.37214 -10.15451,-3.98089 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 762.42044,409.09176 10.00908,3.84657 4.34309,-10.37214 -10.15451,-3.98089 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 835.36871,399.06991 5.21735,9.36788 9.9817,-5.17779 -5.24289,-9.56418 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 801.77496,415.47616 5.21735,9.36788 9.9817,-5.17779 -5.24289,-9.56418 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 870.52496,388.91366 5.21735,9.36788 9.9817,-5.17779 -5.24289,-9.56418 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1019.5465,416.09124 8.3179,6.76687 7.3516,-8.50865 -8.4144,-6.93973 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 975.99371,413.13241 5.21735,9.36788 9.9817,-5.17779 -5.24289,-9.56418 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 936.93121,422.50741 5.21735,9.36788 9.9817,-5.17779 -5.24289,-9.56418 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 911.93121,442.81991 5.21735,9.36788 9.9817,-5.17779 -5.24289,-9.56418 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 879.89996,449.85116 5.21735,9.36788 9.9817,-5.17779 -5.24289,-9.56418 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 849.43121,456.88241 5.21735,9.36788 9.9817,-5.17779 -5.24289,-9.56418 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 825.99371,469.38241 5.21735,9.36788 9.9817,-5.17779 -5.24289,-9.56418 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 793.92242,478.74251 5.21735,9.36788 9.9817,-5.17779 -5.24289,-9.56418 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 752.32304,474.24679 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 721.07304,455.49679 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 690.60429,430.49679 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 504.66679,455.49679 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 572.63554,393.77804 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 600.76054,371.12179 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 625.76054,349.24679 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 655.44804,324.24679 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 685.13554,303.15304 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 802.32304,295.34054 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 742.16679,184.40304 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 717.94804,161.74679 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 818.59784,217.82417 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 851.74347,237.71155 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 879.91726,255.38921 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 906.98619,276.38145 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 937.92211,291.84941 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 966.64832,308.42223 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 861.13473,315.05136 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 890.9658,333.83388 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 924.6639,354.82611 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1037.359,437.13776 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1066.6377,448.73873 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1093.7065,465.86397 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1122.9852,482.43679 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1224.7151,393.76316 15.2144,9.97674 9.3518,-13.10396 -15.4178,-10.23515 z" fill="#1669ad" description-data="<img src='media/azamat1.jpg'> ул.Азамат,1"> </a> <a href="#"> <path class="part" d="m 1284.9949,443.66556 4.7932,10.1512 9.7978,-4.39428 -4.8127,-10.35602 z" fill="#1669ad" description-data="<img src='media/azamat5.jpg'> ул.Азамат,5"> </a> <a href="#"> <path class="part" d="m 1189.6159,408.49403 4.7932,10.1512 9.7978,-4.39428 -4.8127,-10.35602 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 999.00976,327.22136 8.59764,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1025.4651,345.98622 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1052.5358,361.36727 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1162.9716,437.04199 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1083.2978,383.51597 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1118.0589,405.04942 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1185.4279,365.67396 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1153.1277,348.75482 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1119.5971,324.14514 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1086.6817,304.45742 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1059.3236,291.00257 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1038.4417,274.471 8.5975,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 1006.2486,250.97876 8.5976,7.21777 7.0639,-8.08785 -8.7008,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 971.01023,232.70701 8.59753,7.21777 7.06396,-8.08785 -8.70083,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 948.82312,217.48056 8.59753,7.21777 7.06395,-8.08785 -8.70082,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 919.24029,198.77377 8.59753,7.21777 7.06396,-8.08785 -8.70083,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 892.26772,183.11227 8.59753,7.21777 7.06396,-8.08785 -8.70083,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 863.11994,158.74995 8.59753,7.21777 7.06396,-8.08785 -8.70083,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 814.83033,130.90729 8.59753,7.21777 7.06396,-8.08785 -8.70083,-7.3957 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 784.37742,107.8501 8.59753,7.21777 7.06396,-8.08785 -8.70083,-7.395715 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 754.7946,93.058683 8.59753,7.217777 7.06396,-8.08786 -8.70083,-7.395706 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 728.69211,77.397188 8.59753,7.217768 7.06396,-8.087851 -8.70083,-7.395706 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 696.93407,54.339988 8.59753,7.21777 7.06396,-8.08785 -8.70083,-7.395711 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 674.31438,42.065815 8.59753,7.21777 7.06396,-8.087853 -8.70083,-7.395706 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 484.63627,0.3018283 -14.35637,22.1871177 100.92963,61.775898 5.65554,-8.70083 -4.35041,-2.61025 6.09058,-9.570913 -45.24432,-30.452908 2.17521,-3.915374 -9.13588,-6.960664 1.74017,-4.350415 -26.10249,-17.4016617 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 436.34666,39.020525 -10.00596,17.401661 31.32299,19.141828 10.00596,-16.96662 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 427.21079,92.530633 -28.2777,43.939197 18.27174,12.18116 28.2777,-43.93919 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 360.21439,86.875093 -9.13587,15.226457 39.58878,24.79736 9.13587,-14.35637 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 394.86582,9.472205 -29.58282,50.029766 26.10249,16.53158 30.88795,-50.02978 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 232.74722,39.455566 -6.09058,19.576869 21.75208,6.960665 6.09058,-18.706786 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 190.11315,32.929943 -4.35042,23.492243 23.05721,4.785457 4.35041,-23.057201 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 161.83545,23.794071 17.40166,5.220498 -6.09058,23.927285 -17.8367,-6.090582 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 354.54093,577.40427 0.30762,10.15148 9.84386,0.30763 v -10.15149 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 328.08553,568.17564 0.30762,10.15148 9.84386,0.30763 v -10.15149 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 298.86155,571.25185 0.30762,10.15148 9.84386,0.30763 v -10.15149 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 265.02327,578.32713 0.30762,10.15148 9.84386,0.30763 v -10.15149 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 226.57067,584.47955 0.30762,10.15148 9.84386,0.30763 v -10.15149 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 184.119,576.4814 0.30762,10.15148 9.84386,0.30763 v -10.15149 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 150.89595,581.09572 0.30762,10.15148 9.84386,0.30763 v -10.15149 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 119.04926,586.01766 0.30762,10.15148 9.84386,0.30763 v -10.15149 z" fill="#1669ad">> </a> <a href="#"> <path class="part" d="m 146.60058,4.6042554 h -6.57465 V 16.304109 l -10.95773,40.54135 -2.79014,9.655026 -2.5669,9.706155 -1.5625,9.278 3.04891,3.822735 4.30192,-2.03664 1.52699,-6.59213 1.51677,-7.664099 1.72987,-8.006358 77.25208,19.862541 10.40985,1.632537 101.10559,12.215169 1.88355,-6.245694 -100.2497,-13.043804 -87.66194,-21.49508 10.95775,-39.180902 z" fill="#789A5F">> </a> <a href="#"> <path class="part" d="M 381.17475,4.0592369 C 367.21517,29.839172 351.33443,55.619106 339.4665,81.399041 c -10.65482,8.821069 -12.27478,16.943774 -19.05874,25.411649 -0.0687,3.27136 1.93385,3.87968 4.41942,3.86699 L 347.20047,80.5704 387.25145,6.2689456 c -0.52067,-2.8219703 -1.89786,-4.5061728 -6.0767,-2.2097087 z" fill="#789A5F">> </a> <a href="#"> <path class="part" d="m 462.38154,376.39515 8.28641,4.97185 -60.76699,87.83592 -43.64174,61.87184 -21.54466,26.5165 -23.75437,7.73398 -212.68446,10.49612 -1.10486,-7.73398 212.68446,-11.60097 20.43981,-7.73398 33.14563,-45.29903 z" fill="#789A5F">> </a> <a href="#"> <path class="part" d="m 1000,374.5 -18.75,13.28125 -175,73.4375 -8.59375,-2.34375 -82.03125,-50 -5.46875,5.46875 78.90625,50.78125 13.06176,1.59199 8.2864,-0.55242 17.81578,-6.35292 170.99231,-72.42103 7.81255,-7.03125 z" fill="#789A5F">> </a> <a href="#"> <path class="part" d="M 1355.6563,433.29515 680.59028,6.8213731 676.17086,11.24079 1353.4466,443.23884 Z" fill="#789A5F">> </a> <a href="#"> <path class="part" d="m 1301.5625,412.19531 7.8125,4.6875 -55.4687,38.47656 c 0,0 -38.4766,26.36719 -39.4532,26.36719 -0.9765,0 -8.789,2.92969 -8.789,2.92969 l -11.3166,1.3957 -17.9538,-0.55243 -11.8772,-5.24806 -132.5825,-87.83592 -103.58014,-64.35777 -116.83834,-73.74902 -33.42185,-21.54466 -13.81068,-3.59078 -6.62912,-1.10485 -11.87719,2.76213 -8.56262,5.52427 -15.46796,14.91554 -74.57767,70.15825 -48.33737,39.49854 -38.94612,34.25049 -14.63932,10.77233 -11.60097,3.59077 -9.94369,0.27622 -89.21699,-51.09952 -12.01071,-6.37978 -12.5723,-6.87847 -41.70825,-27.34515 -5.71587,-7.95534 7.09251,-0.82051 57.89956,33.23088 22.41019,14.25781 20.02913,10.83796 30.9609,19.84434 9.71169,5.87307 14.22499,6.35291 10.91044,0.13811 9.52937,-4.83374 55.93325,-47.23253 -29.27864,-36.18397 -24.72111,-31.35025 5.10995,-3.72888 49.16602,60.76699 5.24805,5.80048 39.08423,-32.17888 78.82201,-75.49503 -78.125,-51.95313 -25.78125,-14.84375 3.51562,-5.46875 25.39063,14.84375 25.78125,-37.89062 5.07812,2.73437 -24.60937,37.5 74.21875,49.21875 11.71875,-5.85937 10.9375,-4.29688 19.92187,2.73438 21.09375,10.9375 126.5625,80.07812 156.6406,99.21875 91.7969,59.375 19.9219,5.85938 15.625,-0.78125 z" fill="#789A5F">> </a> </svg> <div class="description"> </div> <img src="media/back.png" alt=""> </div> <!--[if lt IE 9]> <script src="libs/html5shiv/es5-shim.min.js"></script> <script src="libs/html5shiv/html5shiv.min.js"></script> <script src="libs/html5shiv/html5shiv-printshiv.min.js"></script> <script src="libs/respond/respond.min.js"></script> <![endif]--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="js/main.js"></script> </body> </html> 

  • can be explained in more detail, how do you set the size of the svg card, via the png raster image? png picture you have built in svg? - Alexandr_TT
  • inside the body of the class map is inserted inside the picture. this way I can display the map normally. otherwise it does not work. As I understand it by code, the picture is not inside svg. - Ruslan
  • svg card code, can you add it here, to the snippet? And then, as I understand it, you only gave the code for svg rombikov gave - Alexandr_TT
  • Sorry, I do not know how to add the code in the snippet. I have 371 lines of code there. it doesn't fit here. Please tell me how to add the code, I will add. - Ruslan
  • I was able to add the full code to the post. please take a look - Ruslan

2 answers 2

If I understand correctly, then the raster image is the map itself. And svg, are interactive markers on it, by clicking on which the link is followed.

In this case, in order for the raster image and markers on it not to lose their original position when changing the size of the browser window, it is necessary to include the raster image directly in the svg file

<image xlink:href="MoscowMap.png" width="100%" height="100%" />

Place the svg markers in the <defs> section and place them on the map using the <use> command

  <svg width="100%" height="100%" viewBox="0 0 1366 662" preserveAspectRatio="xMinYMin meet"> <defs> <rect id="rec" transform="rotate(45 6 6)" width="12" height="12" fill="#BF2523" /> </defs> <image xlink:href="https://i.stack.imgur.com/fUgSr.jpg" width="100%" height="100%" /> <a href="#"> <use xlink:href="#rec" x="380" y="380" /> </a> <a href="#"> <use xlink:href="#rec" x="580" y="420" /> </a> <a href="#"> <use xlink:href="#rec" x="700" y="420" /> </a> </svg> 

Markers stay in place with any zoom

  • sorry for my not understanding. regarding the picture it was originally a screenshot of the map. but now I have drawn houses and streets. and I replaced the picture with a white background. I don't want to leave a picture, I'm trying to remove it. By svg markers, do you mean this? <path class = "part" d = "m 784.37742,107.8501 8.59753,7.21777 7.06396, -8.08785 -8.70083, -7.395715 z" fill = "# 1669ad" >> When I click, I do not do anything. Just a window appears when you hover with the information. - Ruslan
  • @Ruslan Yes, that is what I called the markers - red-brown diamonds And the code to add to the snippet CTRL + M in the editor of your question, - Alexandr_TT
  • I added the code. Please take a look. If you make an html file and add code there, you can see the outlines of all map objects. You do not know how to make scaling? To be able to get closer to the houses? I tried to use svg pan zoom downloaded from github, but all my attempts failed. - Ruslan

In general, in my case, everything is solved simply. We remove three lines from the code: First, which creates a useless class

 <div class="map"> 

The second, which closes this useless class, and the third line, which puts an image on the background

 </div> <img src="media/back.png" alt=""> 

After that, everything works as it should.