svg 缩放以适应浏览器大小

Question

I have an SVG that fits the entire screen other than the header and footer, I wish to make it responsive(scale appropriately when the browser resizes, both width and height) I am not sure how to do that, can someone help, please. picture here

 <svg height="100%" viewBox="0 0 1440 760" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg-content"> <g id="beachold 1" clip-path="url(#clip0_10:2)"> <g id="beach"> <path id="skyColor" d="M1440 0H0V760H1440V0Z" v-bind:fill="skyFill" /> <g v-if="toChange()=='sun'" id="sun"> <path id="Vector" d="M1184.2 244.644C1242.24 244.644 1289.3 199.952 1289.3 144.822C1289.3 89.6919 1242.24 45.0001 1184.2 45.0001C1126.16 45.0001 1079.1 89.6919 1079.1 144.822C1079.1 199.952 1126.16 244.644 1184.2 244.644Z" fill="url(#paint1_radial_10:2)" /> <g id="Vector_2" filter="url(#filter0_f_10:2)"> <path d="M1183.1 272.454C1241.14 272.454 1288.19 227.762 1288.19 172.632C1288.19 117.502 1241.14 72.8101 1183.1 72.8101C1125.05 72.8101 1078 117.502 1078 172.632C1078 227.762 1125.05 272.454 1183.1 272.454Z" fill="url(#paint2_radial_10:2)" /> </g> </g> <path v-if="toChange()=='moon'" id="moon" d="M1202.18 28.5699C1261.82 67.8142 1285.02 170.903 1167.84 242.506C1248.22 248.654 1382.75 94.0117 1202.18 28.5699Z" fill="url(#paint3_radial_10:2)" /> <g v-if="toChange()=='sunset'" id="sunset"> <path id="Vector_3" d="M1065.31 551.946C1166.99 551.946 1249.42 473.655 1249.42 377.078C1249.42 280.501 1166.99 202.209 1065.31 202.209C963.634 202.209 881.207 280.501 881.207 377.078C881.207 473.655 963.634 551.946 1065.31 551.946Z" fill="url(#paint4_radial_10:2)" /> <g id="Vector_2_2" filter="url(#filter1_f_10:2)"> <path id="Vector_4" d="M1063.38 600.663C1165.06 600.663 1247.49 522.372 1247.49 425.795C1247.49 329.218 1165.06 250.927 1063.38 250.927C961.7 250.927 879.272 329.218 879.272 425.795C879.272 522.372 961.7 600.663 1063.38 600.663Z" fill="url(#paint5_radial_10:2)" /> </g> </g> <path id="seaColor" d="M1440 402H0V760H1440V402Z" v-bind:fill="fill" /> <path id="cloud4" v-bind:fill="cloudFill" opacity="0.8" d="M740.621 140C727.735 140.006 715.689 148.452 708.46 162.552C703.436 161.141 698.17 160.415 692.865 160.401C673.639 160.419 656.195 169.742 648.235 184.254C647.199 184.163 646.159 184.116 645.118 184.114C634.242 184.116 624.079 188.92 617.997 196.931C610.987 196.006 603.584 195.527 596.12 195.517C560.536 195.517 520.051 217.02 532.202 232.346C544.352 247.672 560.535 242.038 596.12 242.039C607.847 242.031 619.345 240.867 629.375 238.674C639.225 243.196 663.523 243.798 670.292 239.065C681.288 243.587 711.352 243.082 719.032 239.039C730.766 246.578 755.849 244.678 762.764 237.963C776.937 247.966 794.551 248.171 810.209 241.124C820.107 245.891 836.072 244.893 851.796 244.896C880.603 244.896 894.752 247.898 906 236.657C905.995 225.417 880.599 204.192 851.796 204.192C846.302 204.2 840.846 204.548 835.63 205.221C835.884 203.462 836.018 201.689 836.033 199.913C836.033 176.896 820.434 156.782 796.145 156.784C789.443 156.793 778.742 159.709 772.727 162.511C765.502 148.448 753.482 140.019 740.62 140H740.621Z" /> <path id="cloud3" v-bind:fill="cloudFill" opacity="0.6" d="M163.163 230C171.046 230.003 178.414 233.668 182.836 239.786C185.909 239.174 189.131 238.859 192.376 238.853C204.136 238.861 214.807 242.907 219.676 249.204C220.309 249.165 220.946 249.145 221.582 249.144C228.235 249.145 234.452 251.23 238.172 254.706C242.461 254.304 246.989 254.097 251.555 254.092C273.322 254.092 298.085 263.424 290.653 270.075C283.222 276.726 273.322 274.281 251.555 274.281C244.382 274.277 237.348 273.773 231.212 272.821C225.187 274.783 210.324 275.044 206.184 272.99C199.458 274.953 181.067 274.734 176.369 272.979C169.192 276.251 153.848 275.426 149.618 272.512C140.949 276.853 130.174 276.942 120.596 273.884C114.542 275.953 104.776 275.519 95.1575 275.521C77.5361 275.521 68.8811 276.824 62 271.946C62.0032 267.068 77.5377 257.857 95.1575 257.857C98.518 257.861 101.855 258.012 105.046 258.304C104.891 257.541 104.809 256.771 104.8 256.001C104.8 246.012 114.341 237.283 129.198 237.284C133.298 237.288 139.844 238.554 143.524 239.769C147.943 233.666 155.296 230.009 163.163 230Z" /> <path id="cloud2" v-bind:fill="cloudFill" opacity="0.45" d="M807.379 165C820.265 165.006 832.311 173.452 839.54 187.552C844.564 186.141 849.83 185.415 855.135 185.401C874.361 185.419 891.805 194.742 899.765 209.254C900.801 209.163 901.841 209.116 902.882 209.114C913.758 209.116 923.921 213.92 930.003 221.931C937.013 221.006 944.416 220.527 951.88 220.517C987.464 220.517 1027.95 242.02 1015.8 257.346C1003.65 272.672 987.465 267.038 951.88 267.039C940.153 267.031 928.655 265.867 918.625 263.674C908.775 268.196 884.477 268.798 877.708 264.065C866.712 268.587 836.648 268.082 828.968 264.039C817.234 271.578 792.151 269.678 785.236 262.963C771.063 272.966 753.449 273.171 737.791 266.124C727.893 270.891 711.928 269.893 696.204 269.896C667.397 269.896 653.248 272.898 642 261.657C642.005 250.417 667.401 229.192 696.204 229.192C701.698 229.2 707.154 229.548 712.37 230.221C712.116 228.462 711.982 226.689 711.967 224.913C711.967 201.896 727.566 181.782 751.855 181.784C758.557 181.793 769.258 184.709 775.273 187.511C782.498 173.448 794.518 165.019 807.38 165H807.379Z" /> <path id="cloud1" v-bind:fill="cloudFill" opacity="0.35" d="M1287.84 226C1279.95 226.003 1272.59 229.668 1268.16 235.786C1265.09 235.174 1261.87 234.859 1258.62 234.853C1246.86 234.861 1236.19 238.907 1231.32 245.204C1230.69 245.165 1230.05 245.145 1229.42 245.144C1222.76 245.145 1216.55 247.23 1212.83 250.706C1208.54 250.304 1204.01 250.097 1199.45 250.092C1177.68 250.092 1152.91 259.424 1160.35 266.075C1167.78 272.726 1177.68 270.281 1199.45 270.281C1206.62 270.277 1213.65 269.773 1219.79 268.821C1225.81 270.783 1240.68 271.044 1244.82 268.99C1251.54 270.953 1269.93 270.734 1274.63 268.979C1281.81 272.251 1297.15 271.426 1301.38 268.512C1310.05 272.853 1320.83 272.942 1330.4 269.884C1336.46 271.953 1346.22 271.519 1355.84 271.521C1373.46 271.521 1382.12 272.824 1389 267.946C1388.99 263.068 1373.46 253.857 1355.84 253.857C1352.48 253.861 1349.14 254.012 1345.95 254.304C1346.11 253.541 1346.19 252.771 1346.2 252.001C1346.2 242.012 1336.66 233.283 1321.8 233.284C1317.7 233.288 1311.16 234.554 1307.48 235.769C1303.06 229.666 1295.7 226.009 1287.84 226Z" /> <path id="land" fill-rule="evenodd" clip-rule="evenodd" d="M14.7972 313.002C9.80493 312.999 4.81684 313.112 0 313.291V405.316C84.6683 406.232 223.648 408.465 223.648 408.465C223.648 408.465 293.413 412.749 320.593 410.179C347.773 407.608 392.168 405.037 408.475 405.893C424.784 406.75 441.092 408.465 457.401 408.465C473.709 408.465 525.354 410.178 528.976 405.037C532.6 399.895 526.258 398.182 515.386 397.325C504.514 396.468 493.642 399.895 473.709 393.04C453.776 386.184 449.246 387.041 415.721 385.327C382.197 383.614 374.103 386.213 341.426 381.043C336.222 380.22 300.502 382.669 289.781 378.473C243.053 375.631 198.985 347.553 150.801 353.127C119.09 357.412 82.4286 321.455 45.4451 315.1C36.4015 313.546 25.5956 313.006 14.7924 313L14.7972 313.002Z" fill="black" /> <path id="tree2" fill-rule="evenodd" clip-rule="evenodd" d="M308.912 246.335L303.595 254.207L304.281 256.689L302.3 254.941L302.038 257.866C302.038 257.866 301.164 260.128 292.242 265.026C291.071 265.669 289.884 266.308 288.703 266.935C289.667 260.661 289.457 254.988 287.254 251.838C283.99 247.168 282.802 246.822 282.802 246.822L281.284 248.856L282.571 245.515L281.114 247.361L280.515 244.502C280.515 244.502 275.902 243.362 274.714 243.016C273.527 242.669 278.512 248.048 279.22 252.591C279.928 257.134 280.033 256.132 280.033 256.132L283.321 256.679L281.221 256.479L282.683 257.318L280.28 258.063C280.28 258.063 279.63 260.764 279.36 262.957C279.212 264.157 279.788 267.547 280.097 271.349C280.037 271.379 279.977 271.409 279.918 271.438C278.901 268.305 277.812 265.249 276.838 263.176C275.005 259.273 274.778 258.03 274.855 257.641L270.363 261.669L272.766 256.876L270.034 259.876L271.527 256.083L268.267 259.931L269.905 255.44C269.905 255.44 266.582 253.972 259.261 252.584C251.942 251.196 246.415 251.879 246.415 251.879L255.302 255.854L257.789 254.874L256.238 256.981L259.312 256.837C259.312 256.837 261.778 257.361 268.059 265.141C269.032 266.347 270.001 267.572 270.951 268.789C266.623 263.601 261.907 259.663 257.839 259.064C252.024 258.207 250.954 258.808 250.954 258.808L251.502 261.251L249.789 258.088L250.231 260.36L247.617 258.85C247.617 258.85 243.62 261.326 242.55 261.928C241.48 262.529 249.005 262.654 252.995 265.224C256.985 267.795 256.281 267.044 256.281 267.044L258.924 265.1L257.351 266.443L258.988 265.981L257.94 268.174C257.94 268.174 259.59 270.456 261.102 272.127C261.326 272.374 261.711 272.693 262.213 273.071C255.535 272.361 249.525 272.762 246.278 274.999C241.509 278.287 241.191 279.432 241.191 279.432L243.379 280.803L239.831 279.701L241.819 281.021L238.847 281.699C238.847 281.699 237.826 286.139 237.507 287.284C237.188 288.429 242.635 283.475 247.367 282.63C252.1 281.786 251.046 281.723 251.046 281.723L251.496 278.568L251.365 280.578L252.19 279.152L253.059 281.415C253.059 281.415 255.913 281.934 258.22 282.109C260.034 282.247 266.53 280.792 272.291 280.742C272.689 281.115 273.073 281.492 273.434 281.873C272.998 281.888 272.556 281.906 272.097 281.931C262.011 282.462 251.585 284.624 247.622 288.721C243.659 292.818 243.567 293.901 243.567 293.901L245.922 294.539L242.312 294.484L244.466 295.129L241.74 296.484C241.74 296.484 241.589 300.628 241.497 301.711C241.405 302.794 245.707 297.066 250.091 295.114C254.474 293.162 253.451 293.377 253.451 293.377L253.294 290.503L253.543 292.294L254.069 290.836L255.325 292.592C255.325 292.592 258.161 292.314 260.407 291.875C262.542 291.459 270.808 287.253 277.009 286.342C255.091 324.247 250.959 370.877 231 401L258.736 390.115C261.307 340.135 265.669 319.863 284.485 286.621C288.862 290.622 293.006 296.974 294.471 298.231C296.175 299.694 298.472 301.304 298.472 301.304L300.488 300.397L300.167 301.908L301.333 300.484L299.672 302.886C299.672 302.886 298.905 302.207 301.648 306.007C304.392 309.808 305.062 316.826 305.557 315.848C306.052 314.87 308.121 311.223 308.121 311.223L306.49 308.738L308.689 309.223L305.548 307.525L307.917 308.113C307.917 308.113 308.413 307.135 307.17 301.687C305.953 296.356 298.413 289.632 290.202 284.35C291.913 284.761 294.873 285.779 299.71 288.257C308.779 292.904 318.164 298.379 319.067 299.194C319.969 300.008 322.001 299.394 322.001 299.394C322.001 299.394 312.134 287.506 306.878 283.037C304.741 281.22 303.666 280.137 303.143 279.491C305.224 279.006 307.441 278.311 307.441 278.311L307.836 276.219L308.94 277.345L308.401 275.613L309.488 278.297C309.488 278.297 308.462 278.499 313.299 278.573C318.135 278.648 324.515 282.201 323.967 281.248C323.419 280.296 321.507 276.572 321.507 276.572L318.439 276.397L320.13 274.969L316.857 276.425L318.735 274.925C318.735 274.925 318.187 273.973 312.816 271.777C309.538 270.436 304.369 270.693 298.695 271.879L295.54 267.666L300.198 270.579L297.447 267.595L301.188 269.513L297.626 265.916L302.072 268.065C302.072 268.065 304.041 265.12 306.462 258.385C308.882 251.65 308.911 246.332 308.911 246.332L308.912 246.335ZM274.855 257.641L275.041 257.475C275.041 257.475 274.899 257.42 274.855 257.641ZM289.478 274.44C288.838 274.658 288.201 274.882 287.568 275.113C287.314 275.206 287.067 275.299 286.822 275.391C286.867 275.234 286.91 275.076 286.954 274.919C287.826 274.764 288.673 274.604 289.478 274.44ZM302.297 279.672L300.323 284.192L300.436 279.805C301.226 279.779 301.863 279.74 302.297 279.672ZM274.358 273.235C274.518 273.448 274.681 273.664 274.838 273.873C274.83 273.877 274.821 273.881 274.813 273.885C274.662 273.667 274.51 273.451 274.358 273.235ZM300.164 279.813L299.254 282.684L299.068 279.839C299.449 279.832 299.828 279.823 300.164 279.813ZM298.655 279.847L297.665 283.425L297.341 279.871C297.812 279.862 298.225 279.854 298.655 279.847Z" fill="black" /> <path id="tree1" fill-rule="evenodd" clip-rule="evenodd" d="M187.491 269.723L191.894 276.15L191.326 278.177L192.966 276.75L193.183 279.138C193.183 279.138 193.907 280.984 201.294 284.983C202.264 285.508 203.246 286.03 204.224 286.542C203.426 281.42 203.6 276.788 205.424 274.216C208.127 270.403 209.11 270.12 209.11 270.12L210.367 271.781L209.301 269.053L210.508 270.561L211.004 268.227C211.004 268.227 214.823 267.296 215.806 267.013C216.79 266.73 212.662 271.121 212.075 274.83C211.489 278.539 211.403 277.721 211.403 277.721L208.68 278.168L210.419 278.004L209.208 278.69L211.198 279.298C211.198 279.298 211.736 281.503 211.96 283.294C212.082 284.273 211.606 287.042 211.35 290.146C211.399 290.17 211.449 290.194 211.498 290.218C212.34 287.66 213.242 285.165 214.048 283.473C215.565 280.286 215.753 279.271 215.69 278.954L219.409 282.242L217.419 278.329L219.682 280.778L218.446 277.681L221.145 280.823L219.789 277.156C219.789 277.156 222.54 275.958 228.601 274.825C234.661 273.691 239.238 274.249 239.238 274.249L231.879 277.494L229.82 276.694L231.104 278.414L228.559 278.297C228.559 278.297 226.517 278.725 221.317 285.077C220.511 286.061 219.708 287.062 218.922 288.056C222.505 283.819 226.41 280.605 229.778 280.115C234.593 279.416 235.479 279.907 235.479 279.907L235.025 281.901L236.444 279.319L236.077 281.174L238.242 279.941C238.242 279.941 241.551 281.962 242.437 282.454C243.323 282.945 237.093 283.047 233.789 285.145C230.485 287.244 231.068 286.631 231.068 286.631L228.88 285.044L230.182 286.14L228.827 285.763L229.694 287.554C229.694 287.554 228.329 289.416 227.076 290.781C226.891 290.982 226.572 291.243 226.157 291.552C231.686 290.972 236.662 291.299 239.35 293.126C243.299 295.81 243.563 296.745 243.563 296.745L241.751 297.865L244.688 296.964L243.042 298.042L245.503 298.596C245.503 298.596 246.349 302.221 246.612 303.156C246.876 304.091 242.366 300.046 238.448 299.356C234.53 298.667 235.402 298.616 235.402 298.616L235.03 296.04L235.138 297.681L234.455 296.517L233.736 298.364C233.736 298.364 231.373 298.788 229.463 298.931C227.96 299.044 222.582 297.855 217.812 297.814C217.483 298.119 217.165 298.427 216.866 298.738C217.226 298.751 217.593 298.765 217.973 298.785C226.324 299.219 234.956 300.984 238.237 304.329C241.519 307.674 241.595 308.558 241.595 308.558L239.645 309.079L242.634 309.035L240.85 309.561L243.107 310.667C243.107 310.667 243.233 314.051 243.309 314.935C243.385 315.819 239.823 311.142 236.194 309.548C232.565 307.954 233.411 308.13 233.411 308.13L233.541 305.784L233.335 307.246L232.9 306.056L231.859 307.489C231.859 307.489 229.512 307.262 227.652 306.904C225.884 306.564 219.04 303.13 213.906 302.387C232.053 333.334 235.475 371.404 252 396L229.036 387.113C226.907 346.307 223.295 329.755 207.716 302.615C204.092 305.881 200.661 311.067 199.448 312.094C198.037 313.288 196.135 314.603 196.135 314.603L194.466 313.862L194.732 315.096L193.767 313.933L195.142 315.895C195.142 315.895 195.777 315.34 193.506 318.443C191.234 321.546 190.679 327.276 190.269 326.477C189.859 325.679 188.146 322.701 188.146 322.701L189.497 320.672L187.676 321.068L190.277 319.682L188.315 320.162C188.315 320.162 187.905 319.364 188.934 314.916C189.941 310.563 196.184 305.073 202.983 300.761C201.567 301.096 199.116 301.927 195.111 303.951C187.603 307.745 179.831 312.215 179.085 312.88C178.337 313.545 176.655 313.044 176.655 313.044C176.655 313.044 184.825 303.337 189.177 299.689C190.946 298.205 191.836 297.321 192.269 296.793C190.546 296.398 188.711 295.83 188.711 295.83L188.383 294.122L187.469 295.041L187.916 293.627L187.016 295.819C187.016 295.819 187.865 295.984 183.861 296.045C179.856 296.105 174.574 299.006 175.027 298.228C175.481 297.451 177.064 294.41 177.064 294.41L179.604 294.268L178.204 293.102L180.914 294.291L179.359 293.066C179.359 293.066 179.813 292.288 184.26 290.495C186.974 289.401 191.254 289.611 195.952 290.579L198.563 287.139L194.707 289.517L196.984 287.081L193.887 288.647L196.837 285.71L193.155 287.465C193.155 287.465 191.525 285.06 189.521 279.562C187.517 274.063 187.492 269.721 187.492 269.721L187.491 269.723ZM215.69 278.954L215.536 278.818C215.536 278.818 215.654 278.773 215.69 278.954ZM203.582 292.67C204.112 292.848 204.64 293.031 205.164 293.219C205.374 293.295 205.579 293.371 205.782 293.446C205.744 293.318 205.709 293.189 205.672 293.061C204.95 292.934 204.249 292.803 203.582 292.67ZM192.969 296.942L194.603 300.632L194.509 297.051C193.856 297.029 193.328 296.997 192.969 296.942ZM216.102 291.686C215.969 291.86 215.834 292.036 215.704 292.207C215.711 292.21 215.719 292.214 215.725 292.217C215.85 292.039 215.976 291.862 216.102 291.686ZM194.735 297.057L195.489 299.401L195.643 297.078C195.327 297.072 195.013 297.065 194.735 297.057ZM195.984 297.084L196.804 300.006L197.072 297.104C196.682 297.097 196.34 297.09 195.984 297.084Z" fill="black"/> </g></g></svg>

Answer 1

Edit - assumed wrongly that you only wanted the initially-visible part

SVG's scale according to the aspect ratio defined by their viewBox. All of the paths and transforms inside the svg are calculated relative to those viewBox dimensions as well. Its basically an svgs local coordinate system. There are plenty of exceptions, but you generally want the viewBox to neatly frame the content. The easiest way to fix something like this is to use a vector design app or website, bc manually fiddling w/ the viewBox numbers can often be unintuitive and lead to really unexpected results.

I opened the svg up in my design software and I see that there is a lot of invisible elements in that empty space. There are some clouds, a moon, etc. I could fix it pretty easily for you, but i'm not sure what its actually supposed to look like. Do you actually want the hidden elements, like for an animation or something? or do you just want the two trees and the hills/beach?