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:

  <style>
    .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; }
		}
  </style>

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.