问题
I'm looking for a way to make responsive a SVG image and a text above it, that are centered in the page. The solution posted here doesn't work in my case.
Here is my code:
body {
background: white;
font-family: "Lucida Console", Monaco, monospace;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-line {
text-align: center;
color: #2a2f33;
position: relative;
white-space: nowrap;
overflow: hidden;
}<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512px" height="118px" viewBox="0 0 512 118" version="1.1" preserveAspectRatio="xMidYMid">
<defs>
<linearGradient x1="63.809892%" y1="70.3374666%" x2="32.3301087%" y2="22.2678268%" id="linearGradient-1">
<stop stop-color="#FCD08F" offset="0%"/>
<stop stop-color="#F79673" offset="100%"/>
</linearGradient>
<linearGradient x1="87.2564115%" y1="28.4536279%" x2="13.5510427%" y2="89.1540742%" id="linearGradient-2">
<stop stop-color="#E74047" offset="0%"/>
<stop stop-color="#7F50A0" offset="100%"/>
</linearGradient>
<linearGradient x1="87.6749398%" y1="70.707777%" x2="12.8241649%" y2="11.4981431%" id="linearGradient-3">
<stop stop-color="#E6FFAB" offset="0%"/>
<stop stop-color="#47BEBC" offset="100%"/>
</linearGradient>
<linearGradient x1="50.0011435%" y1="99.9998449%" x2="50.0011435%" y2="0.000388913438%" id="linearGradient-4">
<stop stop-color="#84E9DB" offset="0%"/>
<stop stop-color="#197491" offset="100%"/>
</linearGradient>
</defs>
<g>
<g transform="translate(0.000000, -0.000009)" fill-rule="nonzero">
<path d="M427.167431,30.8014194 L431.494833,30.8014194 L431.494833,83.527398 L427.167431,83.527398 L427.167431,30.8014194 Z M469.758178,77.2640501 C469.758178,80.2822992 471.238605,83.5273953 471.238605,83.5273953 L466.227929,83.5273953 C466.227929,83.5273953 464.861381,80.6804202 464.861381,78.0612031 C464.861381,78.0612031 459.79331,84.4384273 450.740384,84.4384273 C441.687459,84.4384273 437.985936,79.7119931 437.985936,73.0505269 C437.985936,66.3890608 444.078007,61.6626266 456.434335,61.6626266 L465.089139,61.6480501 L465.089139,56.5380714 C465.089139,56.5380714 465.203018,47.9971462 454.61227,47.9971462 C444.021523,47.9971462 444.249281,55.3847049 444.249281,55.3847049 L439.580242,55.3992814 C439.580242,55.3992814 439.997495,44.5771319 454.726149,44.5771319 C469.454804,44.5771319 469.758178,56.0825554 469.758178,56.0825554 L469.758178,77.2640501 Z M465.089139,69.6915519 L465.089139,64.9077227 L456.092698,64.9077227 C448.690562,64.9077227 442.59758,68.2676088 442.59758,73.392164 C442.59758,78.5167191 446.469466,80.7378152 451.138505,80.7378152 C455.807544,80.7378152 465.089139,77.3788401 465.089139,69.6915519 Z M474.237722,45.4918081 L478.792883,45.4918081 L492.913879,77.9099718 L506.655886,45.4918081 L511.817794,45.4918081 C511.817794,45.4918081 493.825822,87.8165341 492.154989,91.802301 C490.484157,95.7880661 486.498391,99.4704576 481.602505,99.4704576 C479.39963,99.4704576 477.198577,98.1795252 477.198577,98.1795252 L478.413893,94.7631551 C478.413893,94.7631551 479.515331,95.3708135 481.678121,95.3708135 C483.840911,95.3708135 487.599829,90.3601355 487.599829,90.3601355 L490.332925,83.8307689 L474.237722,45.4918081 Z M404.438093,44.5771319 C412.637381,44.5771319 421.519943,50.1180287 421.519943,64.2034949 C421.519943,78.2889611 414.117808,84.4384273 404.551972,84.4384273 C395.15832,84.4384273 390.935687,77.5346266 390.787189,77.2868259 L390.787189,98.1039096 L390.772612,98.1039096 L386.459786,98.1039096 L386.459786,45.4918081 L390.772612,45.4918081 L390.787189,45.4918081 L390.787189,51.3952956 C390.937509,51.2094451 396.353594,44.5771319 404.438093,44.5771319 Z M403.754819,80.9081782 C411.726349,80.9081782 417.078662,73.7292458 417.078662,64.5068686 C417.078662,55.2844914 411.270833,48.2239931 404.324214,48.2239931 C396.683388,48.2239931 390.93842,55.9714095 390.787189,56.1763917 L390.787189,72.6177867 C390.937509,72.8646764 395.905367,80.9081782 403.754819,80.9081782 Z M183.251359,34.5238935 L176.929708,40.482954 L174.005295,41.2664415 L175.823715,38.2864558 C175.823715,38.2864558 170.21358,30.9162067 160.256,30.9162067 C150.300242,30.9162067 138.842192,37.6988401 138.842192,53.7311818 C138.842192,66.8637084 149.469381,81.2498152 165.867957,81.2498152 C171.536399,81.2498152 175.270719,79.1334878 175.270719,79.1334878 L175.270719,67.3738864 C175.270719,67.3738864 166.835473,67.2754949 163.654149,68.0790252 L169.581324,64.7856444 L186.412641,64.7856444 C186.412641,64.7856444 183.251359,66.3945269 183.251359,71.0580999 C183.251359,75.724406 183.251359,80.5464985 183.251359,80.5464985 C183.251359,80.5464985 171.04353,84.544107 160.177651,84.544107 C139.157409,84.544107 130.702121,69.09847 130.702121,56.866954 C130.702121,42.872591 141.884128,28.0947405 161.126036,28.0947405 C176.930619,28.0947405 183.251359,34.5238935 183.251359,34.5238935 Z M210.001993,44.7283632 C221.282391,44.7283632 229.638377,52.5823704 229.638377,64.1133027 C229.638377,75.6442351 221.030947,83.8307689 208.748413,83.8307689 C196.467701,83.8307689 189.532925,73.4705127 189.532925,64.8649042 C189.532925,52.9158081 198.723416,44.7283632 210.001993,44.7283632 Z M210.837409,81.3236088 C220.146335,81.3236088 221.44911,71.7987689 221.448199,67.9560358 C221.448199,56.7977156 215.849907,47.2346124 207.745367,47.2346124 C202.065082,47.2346124 197.134577,52.4147405 197.134577,59.683865 C197.134577,66.9539006 201.529395,81.3236088 210.837409,81.3236088 Z M253.891872,44.748406 C265.166804,44.748406 273.517324,52.5987689 273.517324,64.1242351 C273.517324,75.6497013 264.91627,83.83168 252.639203,83.83168 C240.363046,83.83168 233.431915,73.4759789 233.431915,64.8749255 C233.431915,52.9322067 242.617851,44.748406 253.891872,44.748406 Z M254.726377,81.3254309 C264.031658,81.3254309 265.333523,71.8051462 265.333523,67.9633241 C265.333523,56.8122921 259.738875,47.253744 251.637068,47.253744 C245.959516,47.253744 241.030833,52.431139 241.030833,59.6957084 C241.030833,66.9611889 245.423829,81.3254309 254.726377,81.3254309 Z M305.905423,81.0594095 C309.933096,83.8407903 312.710833,87.8037796 312.712655,93.0103295 C312.712655,103.926315 299.143744,108.199055 291.216854,108.199055 C283.290875,108.199055 273.622093,104.98129 273.622093,96.4139451 C273.622093,82.2428401 295.740128,82.2227974 295.740128,82.2227974 C295.740128,82.2227974 293.376,79.7748544 293.376,77.035381 C293.376,75.355438 293.956327,74.0881924 293.956327,74.0881924 C293.956327,74.0881924 293.292185,74.2959077 292.296427,74.2959077 C282.709637,74.2959077 277.854747,67.449502 277.854747,61.7236657 C277.854747,53.5899718 285.241395,46.0366052 295.034989,46.0366052 C304.826762,46.0366052 314.122021,46.0366052 314.122021,46.0366052 L309.226135,48.9418864 L304.330249,49.1067832 C304.330249,49.1067832 309.475758,52.5094878 309.475758,60.1457583 C309.475758,65.2921782 306.859274,68.1345981 303.996811,70.8531177 C301.134349,73.5707262 301.09153,74.5455305 301.09153,75.7480928 C301.09153,76.9515661 301.879573,78.2807618 305.905423,81.0594095 Z M295.40669,71.8060572 C301.19721,71.8060572 302.315046,67.2627405 302.315046,63.9010323 C302.315046,54.2532031 296.839744,48.9619291 292.231744,48.9619291 C287.625566,48.9619291 285.011815,52.6971604 285.011815,57.9264842 C285.011815,63.1548971 289.617993,71.8060572 295.40669,71.8060572 Z M294.972128,104.671539 C297.646918,104.671539 306.922135,103.926315 306.922135,95.8946569 C306.922135,90.2945412 302.44168,88.5198508 298.393964,84.941317 C298.393964,84.941317 297.088456,84.7226693 295.561566,84.7226693 C294.036498,84.7226693 280.904883,85.5644629 280.904883,94.589148 C280.904883,103.613831 292.295516,104.671539 294.972128,104.671539 Z M313.144484,28.2459718 L318.604299,25.2668971 L330.582548,25.2668971 C327.791146,26.7564344 326.745281,27.9362209 326.67331,34.8864842 C326.601338,41.8349255 326.237836,77.233075 326.237836,77.233075 C326.237836,79.8823561 328.541836,80.6002494 330.618078,80.6002494 C332.507559,80.6002494 333.37395,80.9673953 333.37395,80.9673953 L330.83126,82.7357084 L316.307587,82.7357084 C316.307587,82.7357084 318.39294,80.8717369 318.418448,79.0123205 L319.163673,28.2605483 L313.144484,28.2459718 Z M366.114619,54.8927476 L347.07405,62.526285 L340.615744,62.8624558 C340.615744,62.8624558 356.762875,56.2775163 357.392399,55.1451035 C358.019189,54.0136017 356.720968,47.5962921 349.591231,47.5962921 C346.037295,47.5962921 340.363388,50.8668971 340.363388,59.0042351 C340.363388,71.0808757 349.423601,79.3020287 357.222036,79.3020287 C362.423117,79.3020287 367.120399,76.5334024 367.120399,76.5334024 C367.120399,76.5334024 362.674562,83.8307689 352.860925,83.8307689 C338.853808,83.8307689 333.233651,73.1771604 333.233651,63.7006052 C333.233651,54.223139 339.609964,44.5771319 351.855146,44.5771319 C364.100327,44.5771319 366.114619,54.8927476 366.114619,54.8927476 Z" fill="#808285"/>
<g>
<path d="M81.2440142,77.0025839 C95.1709609,69.3799789 105.80726,63.5575732 106.774776,63.0273526 C109.660925,61.447623 112.684641,57.4163063 106.774776,54.193986 C104.875274,53.1563205 94.5250391,47.5124771 81.2276157,40.2579291 L62.9386477,58.687196 L81.2440142,77.0025839 Z" fill="url(#linearGradient-1)"/>
<path d="M62.9377367,58.687196 L4.44219217,117.629148 C5.76318861,117.796778 7.35202847,117.446942 9.17955872,116.446628 C12.9630747,114.375853 53.5951032,92.1348277 81.2440142,77.0007618 L62.9377367,58.687196 Z" fill="url(#linearGradient-2)"/>
<path d="M62.9377367,58.687196 L81.2267046,40.2579291 C81.2267046,40.2579291 13.2491388,3.1707266 9.17955872,0.950541548 C7.61531673,0.0969045651 5.90986477,-0.201002908 4.4002847,0.13516791 L62.9377367,58.687196 Z" fill="url(#linearGradient-3)"/>
<path d="M62.9377367,58.687196 L4.39937367,0.136078942 C1.98149466,0.675409903 0,2.76805045 0,6.97428532 C0,13.8070252 0,104.867411 0,110.60418 C0,114.565347 1.5587758,117.351283 4.44128114,117.629148 L62.9377367,58.687196 Z" fill="url(#linearGradient-4)"/>
</g>
</g>
</g>
</svg>
<div class="text-line">Some text under the SVG image</div>
</div>- Link to JsFiddle
As you can see I set white-space: nowrap; to avoid text going to new line in case of small displays.
Now, how can I edit my code to make both SVG image and text to scale according to different device resolution and keeping to being centered in the page?
回答1:
Consider using viewport-related sizing units, in this case vw:
body {
background: white;
font-family: "Lucida Console", Monaco, monospace;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 25em;
font-size:2vw;
}
.text-line {
text-align: center;
color: #2a2f33;
position: relative;
white-space: nowrap;
overflow: hidden;
}<div class="container">
<svg viewBox="0 0 512 118">
<defs>
<linearGradient x1="63.809892%" y1="70.3374666%" x2="32.3301087%" y2="22.2678268%" id="linearGradient-1">
<stop stop-color="#FCD08F" offset="0%"/>
<stop stop-color="#F79673" offset="100%"/>
</linearGradient>
<linearGradient x1="87.2564115%" y1="28.4536279%" x2="13.5510427%" y2="89.1540742%" id="linearGradient-2">
<stop stop-color="#E74047" offset="0%"/>
<stop stop-color="#7F50A0" offset="100%"/>
</linearGradient>
<linearGradient x1="87.6749398%" y1="70.707777%" x2="12.8241649%" y2="11.4981431%" id="linearGradient-3">
<stop stop-color="#E6FFAB" offset="0%"/>
<stop stop-color="#47BEBC" offset="100%"/>
</linearGradient>
<linearGradient x1="50.0011435%" y1="99.9998449%" x2="50.0011435%" y2="0.000388913438%" id="linearGradient-4">
<stop stop-color="#84E9DB" offset="0%"/>
<stop stop-color="#197491" offset="100%"/>
</linearGradient>
</defs>
<g>
<g transform="translate(0.000000, -0.000009)" fill-rule="nonzero">
<path d="M427.167431,30.8014194 L431.494833,30.8014194 L431.494833,83.527398 L427.167431,83.527398 L427.167431,30.8014194 Z M469.758178,77.2640501 C469.758178,80.2822992 471.238605,83.5273953 471.238605,83.5273953 L466.227929,83.5273953 C466.227929,83.5273953 464.861381,80.6804202 464.861381,78.0612031 C464.861381,78.0612031 459.79331,84.4384273 450.740384,84.4384273 C441.687459,84.4384273 437.985936,79.7119931 437.985936,73.0505269 C437.985936,66.3890608 444.078007,61.6626266 456.434335,61.6626266 L465.089139,61.6480501 L465.089139,56.5380714 C465.089139,56.5380714 465.203018,47.9971462 454.61227,47.9971462 C444.021523,47.9971462 444.249281,55.3847049 444.249281,55.3847049 L439.580242,55.3992814 C439.580242,55.3992814 439.997495,44.5771319 454.726149,44.5771319 C469.454804,44.5771319 469.758178,56.0825554 469.758178,56.0825554 L469.758178,77.2640501 Z M465.089139,69.6915519 L465.089139,64.9077227 L456.092698,64.9077227 C448.690562,64.9077227 442.59758,68.2676088 442.59758,73.392164 C442.59758,78.5167191 446.469466,80.7378152 451.138505,80.7378152 C455.807544,80.7378152 465.089139,77.3788401 465.089139,69.6915519 Z M474.237722,45.4918081 L478.792883,45.4918081 L492.913879,77.9099718 L506.655886,45.4918081 L511.817794,45.4918081 C511.817794,45.4918081 493.825822,87.8165341 492.154989,91.802301 C490.484157,95.7880661 486.498391,99.4704576 481.602505,99.4704576 C479.39963,99.4704576 477.198577,98.1795252 477.198577,98.1795252 L478.413893,94.7631551 C478.413893,94.7631551 479.515331,95.3708135 481.678121,95.3708135 C483.840911,95.3708135 487.599829,90.3601355 487.599829,90.3601355 L490.332925,83.8307689 L474.237722,45.4918081 Z M404.438093,44.5771319 C412.637381,44.5771319 421.519943,50.1180287 421.519943,64.2034949 C421.519943,78.2889611 414.117808,84.4384273 404.551972,84.4384273 C395.15832,84.4384273 390.935687,77.5346266 390.787189,77.2868259 L390.787189,98.1039096 L390.772612,98.1039096 L386.459786,98.1039096 L386.459786,45.4918081 L390.772612,45.4918081 L390.787189,45.4918081 L390.787189,51.3952956 C390.937509,51.2094451 396.353594,44.5771319 404.438093,44.5771319 Z M403.754819,80.9081782 C411.726349,80.9081782 417.078662,73.7292458 417.078662,64.5068686 C417.078662,55.2844914 411.270833,48.2239931 404.324214,48.2239931 C396.683388,48.2239931 390.93842,55.9714095 390.787189,56.1763917 L390.787189,72.6177867 C390.937509,72.8646764 395.905367,80.9081782 403.754819,80.9081782 Z M183.251359,34.5238935 L176.929708,40.482954 L174.005295,41.2664415 L175.823715,38.2864558 C175.823715,38.2864558 170.21358,30.9162067 160.256,30.9162067 C150.300242,30.9162067 138.842192,37.6988401 138.842192,53.7311818 C138.842192,66.8637084 149.469381,81.2498152 165.867957,81.2498152 C171.536399,81.2498152 175.270719,79.1334878 175.270719,79.1334878 L175.270719,67.3738864 C175.270719,67.3738864 166.835473,67.2754949 163.654149,68.0790252 L169.581324,64.7856444 L186.412641,64.7856444 C186.412641,64.7856444 183.251359,66.3945269 183.251359,71.0580999 C183.251359,75.724406 183.251359,80.5464985 183.251359,80.5464985 C183.251359,80.5464985 171.04353,84.544107 160.177651,84.544107 C139.157409,84.544107 130.702121,69.09847 130.702121,56.866954 C130.702121,42.872591 141.884128,28.0947405 161.126036,28.0947405 C176.930619,28.0947405 183.251359,34.5238935 183.251359,34.5238935 Z M210.001993,44.7283632 C221.282391,44.7283632 229.638377,52.5823704 229.638377,64.1133027 C229.638377,75.6442351 221.030947,83.8307689 208.748413,83.8307689 C196.467701,83.8307689 189.532925,73.4705127 189.532925,64.8649042 C189.532925,52.9158081 198.723416,44.7283632 210.001993,44.7283632 Z M210.837409,81.3236088 C220.146335,81.3236088 221.44911,71.7987689 221.448199,67.9560358 C221.448199,56.7977156 215.849907,47.2346124 207.745367,47.2346124 C202.065082,47.2346124 197.134577,52.4147405 197.134577,59.683865 C197.134577,66.9539006 201.529395,81.3236088 210.837409,81.3236088 Z M253.891872,44.748406 C265.166804,44.748406 273.517324,52.5987689 273.517324,64.1242351 C273.517324,75.6497013 264.91627,83.83168 252.639203,83.83168 C240.363046,83.83168 233.431915,73.4759789 233.431915,64.8749255 C233.431915,52.9322067 242.617851,44.748406 253.891872,44.748406 Z M254.726377,81.3254309 C264.031658,81.3254309 265.333523,71.8051462 265.333523,67.9633241 C265.333523,56.8122921 259.738875,47.253744 251.637068,47.253744 C245.959516,47.253744 241.030833,52.431139 241.030833,59.6957084 C241.030833,66.9611889 245.423829,81.3254309 254.726377,81.3254309 Z M305.905423,81.0594095 C309.933096,83.8407903 312.710833,87.8037796 312.712655,93.0103295 C312.712655,103.926315 299.143744,108.199055 291.216854,108.199055 C283.290875,108.199055 273.622093,104.98129 273.622093,96.4139451 C273.622093,82.2428401 295.740128,82.2227974 295.740128,82.2227974 C295.740128,82.2227974 293.376,79.7748544 293.376,77.035381 C293.376,75.355438 293.956327,74.0881924 293.956327,74.0881924 C293.956327,74.0881924 293.292185,74.2959077 292.296427,74.2959077 C282.709637,74.2959077 277.854747,67.449502 277.854747,61.7236657 C277.854747,53.5899718 285.241395,46.0366052 295.034989,46.0366052 C304.826762,46.0366052 314.122021,46.0366052 314.122021,46.0366052 L309.226135,48.9418864 L304.330249,49.1067832 C304.330249,49.1067832 309.475758,52.5094878 309.475758,60.1457583 C309.475758,65.2921782 306.859274,68.1345981 303.996811,70.8531177 C301.134349,73.5707262 301.09153,74.5455305 301.09153,75.7480928 C301.09153,76.9515661 301.879573,78.2807618 305.905423,81.0594095 Z M295.40669,71.8060572 C301.19721,71.8060572 302.315046,67.2627405 302.315046,63.9010323 C302.315046,54.2532031 296.839744,48.9619291 292.231744,48.9619291 C287.625566,48.9619291 285.011815,52.6971604 285.011815,57.9264842 C285.011815,63.1548971 289.617993,71.8060572 295.40669,71.8060572 Z M294.972128,104.671539 C297.646918,104.671539 306.922135,103.926315 306.922135,95.8946569 C306.922135,90.2945412 302.44168,88.5198508 298.393964,84.941317 C298.393964,84.941317 297.088456,84.7226693 295.561566,84.7226693 C294.036498,84.7226693 280.904883,85.5644629 280.904883,94.589148 C280.904883,103.613831 292.295516,104.671539 294.972128,104.671539 Z M313.144484,28.2459718 L318.604299,25.2668971 L330.582548,25.2668971 C327.791146,26.7564344 326.745281,27.9362209 326.67331,34.8864842 C326.601338,41.8349255 326.237836,77.233075 326.237836,77.233075 C326.237836,79.8823561 328.541836,80.6002494 330.618078,80.6002494 C332.507559,80.6002494 333.37395,80.9673953 333.37395,80.9673953 L330.83126,82.7357084 L316.307587,82.7357084 C316.307587,82.7357084 318.39294,80.8717369 318.418448,79.0123205 L319.163673,28.2605483 L313.144484,28.2459718 Z M366.114619,54.8927476 L347.07405,62.526285 L340.615744,62.8624558 C340.615744,62.8624558 356.762875,56.2775163 357.392399,55.1451035 C358.019189,54.0136017 356.720968,47.5962921 349.591231,47.5962921 C346.037295,47.5962921 340.363388,50.8668971 340.363388,59.0042351 C340.363388,71.0808757 349.423601,79.3020287 357.222036,79.3020287 C362.423117,79.3020287 367.120399,76.5334024 367.120399,76.5334024 C367.120399,76.5334024 362.674562,83.8307689 352.860925,83.8307689 C338.853808,83.8307689 333.233651,73.1771604 333.233651,63.7006052 C333.233651,54.223139 339.609964,44.5771319 351.855146,44.5771319 C364.100327,44.5771319 366.114619,54.8927476 366.114619,54.8927476 Z" fill="#808285"/>
<g>
<path d="M81.2440142,77.0025839 C95.1709609,69.3799789 105.80726,63.5575732 106.774776,63.0273526 C109.660925,61.447623 112.684641,57.4163063 106.774776,54.193986 C104.875274,53.1563205 94.5250391,47.5124771 81.2276157,40.2579291 L62.9386477,58.687196 L81.2440142,77.0025839 Z" fill="url(#linearGradient-1)"/>
<path d="M62.9377367,58.687196 L4.44219217,117.629148 C5.76318861,117.796778 7.35202847,117.446942 9.17955872,116.446628 C12.9630747,114.375853 53.5951032,92.1348277 81.2440142,77.0007618 L62.9377367,58.687196 Z" fill="url(#linearGradient-2)"/>
<path d="M62.9377367,58.687196 L81.2267046,40.2579291 C81.2267046,40.2579291 13.2491388,3.1707266 9.17955872,0.950541548 C7.61531673,0.0969045651 5.90986477,-0.201002908 4.4002847,0.13516791 L62.9377367,58.687196 Z" fill="url(#linearGradient-3)"/>
<path d="M62.9377367,58.687196 L4.39937367,0.136078942 C1.98149466,0.675409903 0,2.76805045 0,6.97428532 C0,13.8070252 0,104.867411 0,110.60418 C0,114.565347 1.5587758,117.351283 4.44128114,117.629148 L62.9377367,58.687196 Z" fill="url(#linearGradient-4)"/>
</g>
</g>
</g>
</svg>
<div class="text-line">Some text under the SVG image</div>
</div>来源：https://stackoverflow.com/questions/56890448/how-to-make-a-centered-svg-image-and-text-responsive