Many online merchants are unaware of the benefits of scalable vector graphics, or SVGs. This article will provide a basic overview.
Vector vs. Raster
Before looking at SVGs, we first need to understand what a “vector” graphic is. There are two types of web graphics: raster and vector. Raster images use thousands of colored pixels to create an image. You are probably familiar with raster image file types like .jpg, .png, and .gif. Raster images allow for millions of colors and complex designs but aren’t scalable without a loss of quality. For example, if you stretched a 50×50 pixel .jpg to 350×350 pixels, you would see noticeable distortion in the image.
Vector images, on the other hand, use points, lines, curves and shapes to create images that scale flawlessly. Vector images can be infinitely resized without distorting. Resizing a 50×50 pixel vector image to 350×350 pixels would not distort the image. Unfortunately, vector images have a limited potential for complex designs with millions of colors.
What’s an SVG Image?
SVG images define vector graphics using an XML format. This means SVG images can be used on the web and resized without any loss of quality. Because SVG images are based on XML, text in .svg files can be searched, indexed, and scripted. Moreover, SVG files can be “losslessly” compressed, which means the exact original image can be reconstructed from the compressed version. Text displayed in SVGs can also be edited without a drawing program by simply editing the XML code in a text editor.
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="50px" viewBox="0 0 200 50" enable-background="new 0 0 200 50" xml:space="preserve"> <radialGradient id="SVGID_1_" cx="100" cy="25" r="58.2581" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#39B54A"/> <stop offset="1" style="stop-color:#006838"/> </radialGradient> <rect x="19.014" y="9.859" fill="url(#SVGID_1_)" stroke="#231F20" stroke-width="1.2346" stroke-miterlimit="10" width="161.972" height="30.281"/> </svg>
Additional SVG Features
SVGs can do more than just generate a vector image. In addition to the points, lines, curves, and shapes, SVG images can create blur and drop shadow effects as well as generate gradients.
Users also have the ability to interact with SVGs. SVG images can contain links and event handlers and can receive information about user activity like mouse clicks and zooming.
You can also use the XML behind SVG images to embed raster images. This allows you to display perfectly scalable text and other vector graphics along with a traditionally scalable raster image.
Uses of SVG Images
SVG images are already used for creating scalable maps, but they offer other unique possibilities. This includes mobile commerce, where using a single scalable image — regardless of the screen resolution — can be helpful.
Logos are another use for SVG images. Instead of having separate files for versions of the same logo, a single SVG file could be used dynamically for all instances of the logo.
You could also use SVGs for product images, depending on what you are selling. Remember that vector graphics limit the amount of color and detail an image can have and some product images will require raster photographic images. However, you could experiment with embedding raster images in SVG files along with vector elements.
SVGs and vector images have limitations to the amount of color and detail that can be displayed. There are online applications for converting raster into vector images. Vector Magic is the best I have found so far. Keep in mind, however, that with converted raster-to-vector images, the success of the vector “tracing” depends mostly on the quality of the original image.
Unfortunately, not all browsers support SVG images to their full potential, and some of the older browsers and mobile browsers don’t support SVGs at all, as shown in this compatibility table.
Online merchants should at least be aware of SVG images, even if they don’t plan on using them right away. As HTML5 becomes more popular and browsers continue to adopt web standards, SVG images could have enormous potential in the world of ecommerce.