NASA employee mixes SVG format and, presto: Gov Webicons
Connecting state and local government leaders
Sean Herron uses the Scalable Vector Graphics format to solve a problem with website design and creates 41 open-source agency logos that scale to display at any size.
Building websites to work on every computer at every resolution isn't an easy task anymore. It used to be that you could set your Web page to display optimally at 800 by 600 resolution, and 95 percent of the time it would look fine. Today, if your Web page was at that resolution, it would look like something out of the Flintstones.
Sean Herron, a technology strategist for NASA, blogged about running into this problem because he needed the NASA logo to display in the corner of a webpage, yet he didn't know what resolution to set it at. Too small and it would shrink to almost nothing on a screen with a high resolution. Too large and it would take up most of a page for someone viewing it at a lower resolution. Not only that, but the logo needed to appear on pages of the website, so its unknown resolution was messing with the overall site design.
The solution Herron found was using Scalable Vector Graphics. SVGs are the emerging format for Web page design, because using just a few lines of code lets you create a logo or graphic that scales and displays to whatever size a user needs for their monitor. Most SVGs use open-source code with a PNG fallback so that an older browser that does not support SVG images will have something to display in its place.
SVG, an open standard developed by the World Wide Web Consortium is XML-based so images can be searched and indexed, and they can be created even using a text editor. W3C has a working group for anyone who needs to learn how to make the best use of the new technology.
Herron said he came across FC Webicons, “resolution independent” social icons from Fairhead Creative using SVG graphics. He adapted the open-source code to solve his logo problem for the NASA site he was creating.
But he didn't stop there. He created 41 government logos and flags from every sovereign country on the planet using the new format, calling them Gov Webicons, which can be downloaded and used freely by anyone who needs them. All of the government logos and flags created by Herron are open-source and hosted on GitHub, the open-source development site being used by government agencies like the Health and Human Services Department to quickly make websites whose data can be shared freely.
The actual SVGs are elegant in their simplicity, as they only take up two lines of code, not much more than simply inserting a normal graphic onto a page. There is a tutorial that explains how it all works for designers looking to implement them or who want to use any of the 41 government logos Herron created.
SVGs are certainly going to be part of the larger picture of how webpages will be designed in the future. It's great to see a government techie like Herron not only already using them, but also helping out other government designers who may be faced with the same problems.