SVG & Media Queries
Hey! Just so you know, this article is over 2 years old. Some of the information in it might be outdated, so take it with a grain of salt. I'm not saying it's not worth a read, but don't take everything in it as gospel. If you're curious about something, it never hurts to double-check with a more up-to-date source!
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.