👩💻 Join our community of thousands of amazing developers!
preserveAspectRatio is the partner in crime of the SVG viewBox. If you do not understand the viewBox just yet, then go check out my other article here explaining it. preserveAspectRatio gives us the ability to tell our graphic how to scale when the aspect ratio of the viewBox and viewPort are different. By default our preserveAspectRatio will tell our image to scale to fit the viewPort and to be centered. To explicitly set the default preserveAspectRatio, we do the following: <svg viewBox="0 0 ...