Tutorial by Examples

The viewBox attribute defines the coordinate system for an <svg> element. This allows you to easily change the size and relative proportion of an SVG graphic without having to adjust the position and dimensions of every individual drawn element. <!-- stretches a small icon to 60px square -...

preserveAspectRatio is an attribute that indicates whether the image should be scaled uniformly. This attribute only works if the <svg> element also has a viewBox. The default value is xMidYMid, which maintains the aspect ratio and centers the path inside the SVG container: <!-- when not ...

The preserveAspectRatio attribute has an optional parameter: meet | slice. The default behavior is meet which stretches the content in both the x and y dimension until it fills either the width or height of the viewBox. The alternative - slice preserves the aspect ratio of the content but scales up ...