Emerging Tech

Blog archive
Agency logos

NASA employee mixes SVG format and, presto: Gov Webicons

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.

Posted by John Breeden II on Jun 06, 2013 at 9:39 AM


Reader Comments

Fri, Jun 7, 2013 earth

Step by step instructions on how to do this can be found at:

Chapter 6: Building Icons, buttons, and Logos
Inkscape 0.48 Essentials for Web Designers
By: Bethany Hiitola
Publisher: Packt Publishing
Print ISBN-13: 978-1-84951-268-8
Pub. Date: November 09, 2010

Also try: http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines

Thu, Jun 6, 2013 Nel

Nice to see a government employee going beyond the call. Kudos to him!

Please post your comments here. Comments are moderated, so they may not appear immediately after submitting. We will not post comments that we consider abusive or off-topic.

Please type the letters/numbers you see above

resources

HTML - No Current Item Deck
  • Transforming Constituent Services with Business Process Management
  • Improving Performance in Hybrid Clouds
  • Data Center Consolidation & Energy Efficiency in Federal Facilities