Using SVG as images
Most of the work I've done recently has been as inline SVG meaning that the SVG is inserted directly into the document; this has advantages and disadvantages. In this post we'll discuss why we would use SVG as images, what are the disadvantages and disadvantages and a possible fallback using the [picturefill](http://scottjehl.github.io/picturefill/) polyfill. SVG is a very powerful vector graphics format that can be used either as an inline element or as a format for images on web pages. Which one you use will depend on a few things: - What browsers do we need to support? - What are we using the graphics for? - What SVG features do we need for the individual graphics For the following discussion, we'll assume we need to support IE9 and newer plus all modern evergreen browsers; we won't need animation baked into individual icons if we need to animate we'll do so from CSS or using GSAP. We'll use SVG to create a small set of social media icons to use on the page. ## Advantages And Disadvantages Of SVG As An Image Here are some advantages of working with SVG in images: **Smaller file size**: SVG images are made of text describing the shape of the objects in the image so they will be consistently smaller than equivalent raster images. **Scale easier**: Because they are vector graphics they scale up or down regardless of resolution. That means that you only have to load one image for all the resolutions and pixel densities you want to use on the page **Compresses better**: SVG is text and, most of the time, the text will compress better than binary data Not everything is rainbow and roses, there are a few disadvantages of working with SVG inside an image **Can not be formatted with CSS**: Most of the time you can style SVG images with CSS either inside the element itself or through an external CSS. I can't seem to do so with SVG images. **Does not work on older browsers**: Not all browsers support SVG images, particularly IE9 and older. IE9 will support it but with a workaround. Next, we'll explore how to provide fallbacks for non-supported browsers and a polyfill for making the job easier. ## Providing fallbacks The simplest way for this to work is to use the [`picture`](https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element) element, part of the [Responsive Images](https://responsiveimages.org/) additions to the HTML specification The example below shows one ideal way of providing a fallback for SVG images and providing a default image to render when neither source is supported. This is a first item matched is used algorithm, similar to what browsers do for the `video` and `audio` elements. In this example, the browser tests support for SVG images and loads and render it if supporter; if not the browser checks if it can render WebP images and if it doesn't then it falls back to the `img` element that should be rendered by all browsers. I've used a single `src` attribute for the image, we could also add `srcset` and `sizes` to the image to further enhance the responsiveness. For larger line drawings or diagrams below the fold, we could also incorporate lazy loading (native and through polyfill). ```html
