SVG For Responsive Web Design

During the last decade internet access using mobile devices such as smartphones and tablets has increased significantly. Responsive design is a method that causes a web page to adjust its display size depending upon the screen size of the visitors device. Since SVG actually stands for Scalable Vector Graphics, it would make sense that SVG would be ideal for that purpose.

One way to make an SVG drawing resize itself according to the users screen size is to the viewBox attribute in the <svg> container element. The syntax for the viewBox attribute is shown below:

viewBox = "<min-x> <min-y> <width> <height>"

Where the <min-x> and <min-y> values determine the upper left corner of the viewbox, and the <width> and <height> values determine the width and height of that viewBox. Now you might note immediately that these values allow you to specify an area of the parent <svg> element. Only that specified area of the parent <svg> element would be visible. However, that's not our purpose with this example.

We want our entire image to be visible, and to adjust its size to the users display size. To do that we need to also add the preserveAspectRatio attribute in the <svg> container element. The syntax for the preserveAspectRatio attribute is shown below:

preserveAspectRatio ="<align> [<meetOrSlice>]"

Where the <align> value sets the viewBox's alignment within the <svg> container element. The value <xMinYMin> aligns the minimum x and minimum y of the view box with the left-top edge of the viewport. The <meetOrSlice> value defines how the aspect ratio is to be preserved. Set to <meet> it preserves the aspect ratio and scales view box to fit within viewport.

The example above shows my simple hand-coded SVG drawing. By resizing your browser window you can observe the the responsive resizing affect. Shown below is the SVG code for this example.