How media queries allow you to optimize SVG icons for several sizes

By Andreas Bovensandreasbovens. Monday, October 12, 2009 4:22:38 PM

, , , ,

One thing that seems to come up from time to time when talking about SVG is the apparent lack of a mechanism to make certain size specific adjustments. Typical use case is icon design, where you want to make sure the outline of the icon you're creating is always 1px, regardless of the icon being 16, 32 or 64 pixels in size. While at the SVG Open conference last week, I investigated how this problem could be solved, and found out that you can do this by using media queries inside the SVG file. Different widths set on the img tag pointing to the SVG file then will trigger different max-width/min-width media queries to be triggered. I've presented my findings during the lightning talks session at SVG Open, and have turned the talk into a YouTube video, which you can watch below. Referenced demos:

Future of Web Apps London: HTML5A close-up look at developing your own Opera Unite application

Comments

ouzowtfouzoWTF Monday, October 12, 2009 4:59:47 PM

up

Charles SchlossChas4 Tuesday, October 13, 2009 5:39:31 AM

up

Write a comment

You must be logged in to write a comment. If you're not a registered member, please sign up.