Reputation: 1209

SVG is not fitting to screen size - why?

i want to make a svg fitting to parent <div>-container. But the svg seems not to resize with the screen size. My plan was to control the size of the svg by percental width and height-size of the parental <div>-container. Any suggestions?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
    <div id="svgwrapper">
        <div class='content_box' id='content_box4'>
    Schield 4
    <div class='svg_schild' id='svg_schild4'>
        <svg xmlns='http://www.w3.org/2000/svg' version='1.1'
            preserveAspectRatio='xMinYMin' viewBox='-2000 -6000 10000 7000'>
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='5306,-541 5285,-871 5267,-870 5297,-395 4993,-376 4977,-641 4955,-660 4947,-660 4921,-1086 4919,-1098 4914,-1108 4902,-1116 4887,-1120 4595,-1101 4589,-1099 4588,-1096 4587,-1087 4588,-1073 4573,-1072 4574,-1058 4564,-1057 4565,-1031 4574,-1032 4600,-620 4377,-606 4376,-615 4337,-613 4338,-604 4332,-603 4334,-579 4339,-580 4339,-574 4345,-573 4346,-565 4349,-558 4371,-560 4373,-567 4373,-574 4379,-576 4379,-582 4384,-582 4389,-581 4393,-577 4394,-573 4415,-236 4406,-236 4409,-197 4418,-197 4418,-192 4442,-193 4442,-198 4448,-199 4447,-205 4456,-205 4458,-208 4463,-208 4462,-231 4456,-231 4455,-233 4446,-233 4445,-239 4445,-239 4439,-238 4439,-243 4441,-249 4442,-252 4448,-254 4596,-263 4601,-264 4608,-268 4615,-277 4619,-287 4620,-301 4619,-318 4618,-333 4600,-620 4618,-333 4629,-333 4630,-318 4632,-312 4636,-307 4645,-304 4650,-303 4930,-321 4941,-323 4954,-330 4962,-339 4964,-343 4967,-348 4947,-660 4967,-348 4969,-317 5296,-338 5297,-321 5317,-322 5316,-339 5336,-340 5324,-542 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='5349,-544 5360,-356 5401,-318 5596,-329 5596,-319 5597,-304 5753,-312 5757,-308 5758,-297 5754,-291 5697,-268 5683,-224 5699,-201 5698,-194 5690,-187 5689,-186 6661,-239 6659,-240 6651,-246 6650,-253 6662,-277 6644,-320 6585,-337 6580,-342 6580,-353 6584,-357 6729,-365 6734,-361 6734,-371 6829,-376 6847,-92 7005,-86 7003,-26 6748,-35 6749,-70 6746,-67 6607,-59 6613,-30 6504,-6 5881,28 5759,16 5762,-13 5623,-5 5619,-9 5621,29 5568,33 5569,54 5550,65 5428,71 5427,41 5324,19 5280,-6 5261,-54 5251,-244 5235,-269 5217,-278 5199,-296 5196,-313 5199,-333 5216,-352 5232,-357 5335,-364 5324,-542 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='2068,-465 2059,-473 865,-355 865,-355 825,-351 825,-351 754,-344 754,-344 753,-344 753,-347 751,-348 735,-347 733,-345 751,-166 753,-165 769,-166 771,-169 770,-172 771,-172 771,-171 842,-178 842,-179 882,-183 882,-182 2076,-299 2083,-308 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='641,-293 585,-288 584,-287 578,-286 579,-275 578,-271 575,-269 424,-254 431,-190 581,-204 585,-203 587,-200 588,-188 594,-189 595,-188 651,-194 641,-293 1785,-406 1795,-307 651,-194 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='1766,-129 601,-104 581,-108 571,-117 566,-130 563,-172 557,-185 545,-191 507,-195 493,-194 445,-182 430,-183 420,-190 414,-204 411,-241 414,-253 424,-264 438,-267 488,-265 502,-266 548,-277 557,-282 562,-291 563,-298 562,-307 560,-310 557,-311 535,-310 533,-335 447,-328 449,-303 432,-302 415,-305 401,-314 391,-330 383,-356 348,-357 336,-337 332,-83 334,-80 393,-21 432,2 3605,52 3632,60 3633,62 3735,64 3745,54 3745,30 4727,46 4743,71 5198,78 5330,56 5365,43 5392,21 5409,-8 5415,-41 5417,-151 5410,-183 5389,-212 5357,-229 5321,-230 5292,-218 5207,-161 4994,-85 4988,-82 4985,-76 4985,-49 3747,-69 3745,54 3747,-69 3748,-98 3738,-108 3695,-109 3695,-127 3640,-128 3640,-110 3636,-110 3635,-107 3608,-100 3605,52 3608,-100 3461,-103 3461,-132 3460,-133 3416,-133 3415,-132 3415,-103 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='1990,-650 2496,-1904 2496,-1907 2493,-1912 2489,-1922 2488,-1932 2490,-1942 2507,-1986 2513,-2018 2505,-2060 2487,-2089 2451,-2114 2409,-2121 2375,-2113 2340,-2088 2321,-2057 2304,-2017 2300,-2008 2291,-2002 2280,-1998 2275,-1996 2273,-1994 1767,-740 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='1921,-346 2456,-1672 2457,-1677 2456,-1678 2453,-1679 2457,-1691 2456,-1694 2156,-1815 2153,-1814 2148,-1802 2145,-1804 2143,-1803 2141,-1800 1606,-474 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='2400,-1378 2399,-1382 2398,-1384 2394,-1386 2400,-1402 1994,-1566 1987,-1550 1983,-1552 1980,-1551 1978,-1549 1486,-330 1482,-328 1479,-328 1447,-341 1443,-341 1441,-339 1425,-287 1424,-276 1427,-268 1434,-259 1473,-230 1478,-225 1482,-218 1483,-212 1499,-167 1525,-127 1558,-92 1598,-65 1620,-54 1643,-47 1690,-39 1738,-40 1785,-52 1828,-73 1866,-103 1897,-140 1917,-183 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='-765,-1382 -756,-1404 -739,-1431 -717,-1453 -691,-1470 -662,-1482 -631,-1487 -599,-1485 -576,-1480 -522,-1460 -488,-1442 -382,-1366 1033,-917 1191,-917 1234,-905 1275,-891 1302,-879 1327,-861 1343,-845 1356,-821 1367,-793 1373,-762 1374,-730 1369,-705 1359,-682 1339,-657 1317,-635 1291,-618 1261,-607 1230,-602 1214,-602 1185,-607 1143,-619 1101,-635 972,-726 -442,-1175 -573,-1174 -612,-1179 -667,-1194 -702,-1211 -727,-1230 -747,-1254 -761,-1282 -770,-1312 -772,-1344 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='-1222,-1277 -1209,-1293 -1189,-1310 -1166,-1322 -1141,-1330 -1115,-1332 -1089,-1328 -1064,-1320 -1044,-1308 -1019,-1292 -1003,-1277 -980,-1254 -927,-1188 203,-430 238,-413 332,-381 361,-366 403,-338 422,-322 439,-302 450,-278 457,-253 458,-227 454,-201 444,-177 439,-164 430,-155 411,-137 389,-123 365,-114 339,-110 313,-111 288,-118 264,-131 222,-158 198,-180 133,-255 103,-280 -1035,-1044 -1109,-1061 -1139,-1074 -1158,-1084 -1183,-1101 -1213,-1125 -1228,-1147 -1238,-1171 -1243,-1197 -1242,-1223 -1236,-1248 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='775,-1979 780,-1979 784,-1977 789,-1974 792,-1968 795,-1957 800,-1958 811,-1920 817,-1914 822,-1912 827,-1911 834,-1911 940,-1942 1011,-1942 1056,-1925 1091,-1892 1114,-1848 1119,-1801 1108,-1753 1082,-1712 1019,-1674 880,-1633 1039,-1294 1045,-1274 1047,-1255 1047,-1211 1032,-1163 990,-1134 -985,-553 -1036,-547 -1098,-565 -1148,-606 -1171,-654 -1372,-1336 -1373,-1345 -1371,-1353 -1366,-1360 -1348,-1379 -1341,-1385 -1333,-1389 506,-1929 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='2967,-253 2987,-249 2994,-241 2992,-114 2991,-85 2980,-59 2962,-37 2908,15 2885,32 2859,44 0,0 -9,-8 -9,-28 -7,-138 -3,-163 7,-185 25,-205 215,-365 226,-374 240,-382 1016,-815 1148,-888 1185,-903 1227,-909 1269,-902 1316,-880 1409,-818 1503,-761 1598,-717 1697,-683 1767,-663 1866,-641 1970,-628 2037,-626 2358,-621 2379,-617 2398,-604 2412,-585 2418,-565 2430,-396 2438,-358 2455,-323 2481,-294 2514,-272 2559,-259 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='-509,-142 -533,-151 -555,-166 -571,-186 -582,-210 -587,-238 -582,-520 -578,-541 -566,-561 -547,-574 -528,-579 453,-623 532,-630 635,-648 736,-677 833,-716 895,-748 1015,-815 239,-383 225,-374 215,-365 24,-205 6,-185 -3,-163 -7,-138 -9,-28 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='819,-2002 5349,-2675 6532,-2882 6545,-2882 6558,-2879 6569,-2872 6579,-2863 6585,-2852 6589,-2839 6589,-2826 6586,-2814 6580,-2802 6570,-2793 6559,-2786 6547,-2783 3733,-1990 3023,-1885 2970,-1869 2938,-1851 2910,-1828 2892,-1806 2819,-1731 2801,-1710 2778,-1691 2746,-1672 2719,-1660 2688,-1653 1961,-1545 1942,-1542 1918,-1534 1901,-1526 1625,-1388 1593,-1373 1552,-1358 1510,-1347 1476,-1341 1053,-1278 1009,-1281 975,-1299 956,-1320 944,-1343 797,-1756 792,-1780 790,-1805 ' /></svg>
    </div>
    </div>
    </div>
</body>
</html>

Upvotes: 0

Answers (3)

Ivan Gajic

Reputation: 486

add this in your style tags at the top of the page

body,
div, svg {
    margin: 0;
    border: 0 none;
    padding: 0;
}

html,
body,
div, svg {
   height: 99%;
   max-width: 99%;
   min-height: 90%;
}

Upvotes: 1

bashleigh

Reputation: 9314

A div is a block element with default width set to auto meaning it will be the wide of it's parent in layman's terms. The div elements in your script do not account for the padding within the body. Add this to your style block:

html,body{padding:0px;margin:0px;}
svg{width:100%}

This should solve your issue unless I've missed anything important

Upvotes: 0

Barzev

Reputation: 402

You could use CSS3 @media Rule to control the behavior, in this case size, of your HTML elements. You could resize the div element as well as your .svg_schild class.

This should produce a robust solution to your SVG scaling problem.

Upvotes: 0

SVG is not fitting to screen size - why?

Answers (3)

Related Questions