The little-known potential of SVG

Today on Twitter I came upon an article, “SVG Has More Potential,” by Mike Riethmuller. He points out that SVG is more than just “scalable vector graphics,” and he demonstrates that its images can be responsive.

The cleverest trick is that SVG can include CSS styles which contain @media rules. This means that an image can have alternate representations depending on its environment. One of his examples contains this stylesheet:

    .sml,.med,.lrg { visibility: hidden; }

		@media screen and (min-width: 200px){
      .sml { visibility: visible; }
		@media screen and (min-width: 400px){
			.med { visibility: visible; }
			.sml,.lrg { visibility: hidden; }

		@media screen and (min-width: 600px){
			.lrg { visibility: visible; }
			.med { visibility: hidden; }

Elements which should appear only if at least 600 pixels of width are available have the class lrg. If the available width is between 400 and 599, the elements with class med are used, and if it’s 200 to 399, the ones with class sml are used. In a thumbnail view of less than 200 pixels, elements with all of these classes are hidden, and whatever is left provides the bare-bones representation. He could have added a tny class if he preferred.

This seems like a huge and neglected opportunity to use SVG in responsive design. The article mentions that existing SVG editing tools don’t support this capability. It sounds like an excellent opportunity for a new open-source project.

2 responses to “The little-known potential of SVG

  1. A class of tny is not necessary. It is better to start with the ‘bare-bones’ and then progressively add or alter the content with media-queries as the viewport gets larger, rather than the reverse. This is often called mobile-first. Thanks for sharing.

    • I’m glad you saw my link!
      My mention of the “tny” class was just to look a little into alternative ways the technique can be used. I agree with your point on design practices, but someone like Randall Munroe could have real fun with an SVG that looked different on every browser.