LIBR 246 Week 10 Blog Post: Using SVG Images for Web Design

I was browsing around on Smashing Magazine’s website and came across an article on using SVG files as images. As I skimmed, I began to get pretty excited. Here’s the scoop as I understand, but please feel free to correct or add if you have more experience with using SVG!

SVG stands for "Scalable Vector Graphics" and SVG images can be created in drawing programs such as Adobe Illustrator, Corel, or Inkscape, all of which edit images in vector format (i.e. continuous lines, no pixels). Advantages of using SVG files online include limitless scalability and the ability to essentially edit images on the fly in a web page. In addition, the file size is relatively small.

The key design feature of SVG is that each SVG element (e.g. or ) is designed to accept class or ID attributes. This means you can create an image in Illustrator, then export it as SVG and style the image with CSS by designating classes and ids, just as you would for an HTML doc… Check out this simple SVG image that I made:

STARS!

The effects of color change and blur as you hover over the stars are created by styling the original SVG image with CSS. It’s easy, because we’ve already learned how to style HTML elements, but it also allows some new features like filters (in this case, blur). The basic properties for styling SVG are either the same or very similar to CSS for HTML, as Adobe describes in a well-written blog post For instance, the HTML element “background” property is equivalent to the SVG element “fill” property. Just as in styling for HTML, you can either embed the CSS inline, internally, or with an external stylesheet.

I animated the text using the SVG attribute “animateTransform,” which allows you to control changes in size (like this), position, opacity, rotation, or skew. Again, there’s no JavaScript, Flash, or other external code—it only takes one line of script to animate this text! There are some other cool uses of SVG in this article.

In thinking about accessibility, SVG requires the same general considerations as other images used in web design. W3C recommends choosing contrasting colors, using descriptive named objects, and not publishing highly structured or information dense content as SVG. One aspect that makes SVG more accessible than other image formats is that you wrap the text within an image in a “text” element, which most screen readers will pick up. If your image does not include text, or if the text is not representative, you should use a "desc" and/or "title" element to provide accessibility.

SVG is supported by all major browsers including mobile browsers, and offers a simple, flexible, and lightweight alternative to more traditional images.

So, all of this seems awesome to me, and I began wondering—why we couldn’t just create an entire webpage in SVG? Here are some potential issues I came up with: 1) and entirely SVG webpage may not have the nice structure that HTML5 provides, with elements such as "aside" and "nav", and 2) it is maybe harder to integrate php and javascript into SVG. Any other thoughts?