Design & Development

SVG Images: What Merchants Need to Know

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.

Raster images cannot scale without loss of quality.

Raster images cannot scale without loss of quality.

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.

Vector images scale well, but lack the color depth of raster images.

Vector images scale well, but lack the color depth of raster images.

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.

This image can be generated simply with XML code below.

This image can be generated simply with XML code below.

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

Because SVGs are built on XML, they have a lot of added functionality. For example, SVG images can be scripted to perform basic animations. SVG graphics can also be used with CSS, JavaScript, and jQuery to create dynamic images. XML-based images can also reduce server load by allowing client platforms to render the image.

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.

Limitations

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.

Browser Support

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.

Drew Coffin
Drew Coffin
Bio   •   RSS Feed


x