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.
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.
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.