Search code examples
htmlcsssvgfigma

Scale SVG to reveal itself entire


I have an SVG here which I'm trying to reveal entirely, as you can see, it is cut on the top. I've tried adjusting the height and widths of the SVG but have not been successful.

<svg width="1200" height="500" viewBox="0 0 10 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-693.966 132.361C-716.67 15.8345 -692.688 -100.024 -593.05 -159.076C-488.421 -221.102 -347.029 -75.6873 -242.4 -137.653C-134.362 -201.621 35.576 -268.927 178.186 -115.804C250.312 -38.3017 279.771 97.5851 296.266 199.546C309.839 283.299 305.457 383.742 252.503 456.086C174.777 562.355 67.8352 541.053 -35.6982 489.041C-105.329 454.083 -170.152 450.381 -246.904 461.548C-307.588 470.348 -369.915 482.365 -429.564 468.163C-554.583 438.425 -664.264 284.756 -693.966 132.361Z" fill="#3620BD"/>
</svg>

The original attributes were svg width="303" height="532" viewBox="0 0 303 532"


Solution

  • Adjust the second parameter of the viewBox.

    <svg width="1200" height="500" viewBox="0 -300 10 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M-693.966 132.361C-716.67 15.8345 -692.688 -100.024 -593.05 -159.076C-488.421 -221.102 -347.029 -75.6873 -242.4 -137.653C-134.362 -201.621 35.576 -268.927 178.186 -115.804C250.312 -38.3017 279.771 97.5851 296.266 199.546C309.839 283.299 305.457 383.742 252.503 456.086C174.777 562.355 67.8352 541.053 -35.6982 489.041C-105.329 454.083 -170.152 450.381 -246.904 461.548C-307.588 470.348 -369.915 482.365 -429.564 468.163C-554.583 438.425 -664.264 284.756 -693.966 132.361Z" fill="#3620BD"/>
    </svg>