[codepen_embed height=500 theme_id=1 slug_hash='yaQLrj' user='JackDavies' default_tab='result' animations='run']

See the Pen CSS Circles by Jack Davies(@JackDavies) on CodePen


After reading on the topic of SVG & Media Queries from a blog post from Jake Archibald. I found that there are a number of different ways that SVGs can be created in the DOM through the use of a canvas element. With my expertise lying more with intermediate CSS, and having a lack of knowledge of the 'Canvas' element, I found the topic of changing the visual layout of SVG elements with the use of media queries heightening my interest.

As Jake points out, from the use of 'SVG' HTML element, an SVG will not create its own viewport. It belongs to the body of the HTML page, therefore there will be no underlying issues when creating media queries and breakpoints for visual changes of SVG elements.

To experiment and illustrate the use of media queries and SVGs, I created a small codepen with a simple colour change based on the viewport size. This example is very basic but could work excellent when website themes alternate between a dark and light colour palette, dependent on the viewport size.

Hopefully, in the future, we will see other uses of creating media queries for SVGs, such as modifying stroke widths. As for now the functionality for media queries and SVGs is available for use.

Related Blog Posts