Jump to main content

Nicolas Hoizey

  • articles
  • billets
  • links
  • notes
  • talks
  • archives
  • about

Maarten Van Hoof

Responsive SVGs - container vs media queries

  • Nicolas Hoizey
  • 4 June 2021
  • SVG, responsive, CSS, container queries
  • 7 reactions
Screenshot of “Responsive SVGs - container vs media queries”

https://codepen.io/vanhoofmaarten/full/dyvmJWN

Maarten shows here (only in Chrome Canary for now) how container queries will allow us to have responsive SVG images inline in the HTML.

Responsive SVG images where already possible as I shown 8 years ago, but only external, loaded with an <img /> tag or as CSS background.

7 reactions

6 likes

  1. Yann avatar
  2. Yann avatar
  3. Maarten Van Hoof avatar
  4. Xavier Zaława avatar
  5. Hercule Cuticule avatar
  6. Amiid 🤘🌵 avatar

1 repost

  1. nicod_ 🛠🔎 avatar
  • Older: How I set up Glyphhanger on macOS for optimizing and converting font files for the Web
  • Newer: Add punctuation to your alt text

Related contents with similar topics

  1. screenshot of Solved By Modern CSS: Section Layout

    Ahmad Shadeed avatar Ahmad Shadeed

    Solved By Modern CSS: Section Layout

    • Nicolas Hoizey
    • 24 October 2025
    • CSS, container queries

    In this article, I took a typical section design and made it more dynamic with container queries, has, clamp, and grid. It’s an example of the potential…

  2. screenshot of Have It All: External, Styleable, & Scalable SVG

    Scott Jehl avatar Scott Jehl

    Have It All: External, Styleable, & Scalable SVG

    • Nicolas Hoizey
    • 12 August 2024
    • SVG, CSS
    • 14 reactions

    here I'll demonstrate a 4th approach that I think hits the center of the venn diagram for External, Styleable, and Scalable SVG.

  3. screenshot of An Interactive Guide to CSS Container Queries

    Ahmad Shadeed avatar Ahmad Shadeed

    An Interactive Guide to CSS Container Queries

    • Nicolas Hoizey
    • 2 April 2024
    • CSS, container queries
    • 8 reactions

    Ahmad Shadeed once again offers us a very detailed and interactive article - a true work of art! While building layouts in CSS, we always wanted a…

  4. screenshot of Educational Sensational Inspirational Foundational

    Zach Leatherman avatar Zach Leatherman

    Educational Sensational Inspirational Foundational

    • Nicolas Hoizey
    • 30 August 2023
    • Web, CSS, HTML, JavaScript, responsive
    • 1 reaction

    A historical record of foundational web development blog posts. I've already read most of these great articles, and will of course read the few missing.…

  5. screenshot of Cropping Images with CSS While Keeping a Focal Point in the Center

    Johannes Odland avatar Johannes Odland

    Cropping Images with CSS While Keeping a Focal Point in the Center

    • Nicolas Hoizey
    • 22 June 2023
    • image, WebPerf, CSS, container queries
    • 13 reactions

    This is a lovely way to deal with image crop and focal point with CSS only! 😍 And I love that Johannes put this warning in the beginning: While client-side…

If you want to share an error or suggest an enhancement of this content, please edit the source on GitHub.

© Nicolas Hoizey

Built with Eleventy