Sawtooth Software: The Survey Software of Choice

I noticed you can add .JPG, .GIF, and .PNG files into an SSI Web survey. Can you also add .SVG files?

Yes you may add SVG images to a survey! In fact, in Lighthouse Studio 9, when you insert an image, we've added the .svg file name extension to the list of approved file types. Now you can use the standard Windows open-file dialog box to find and insert SVG images.

A Scalable Vector Graphic (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

Unlike .JPG, .GIF, or .PNG files, which are rasterized bitmapped graphics, these vector graphics do not lose any quality if they are zoomed or resized because the image is created on-the-fly in the browser. Plus open-standard SVG images can be created and edited with a text editor, then searched, indexed, scripted, compressed, and printed.

Programs such as Adobe Illustrator or Inkscape will save files into an SVG format. It is best used for logos, text, line art, and illustrations rather than photographs.

Below is an example of a graphic displayed in bitmapped and vector versions. The first three graphics are bitmapped graphics using either the .GIF, .JPG, or .PNG formats. They have been resized to fit the available space. Notice the pixelation and lack of clarity. The fourth graphic is a much more crisp .SVG. It is being loaded in using the same IMG tag that you use for the other file formats. However, because SSI Web doesn't recognize a .SVG as a graphic file type (yet), you have to manually add this to your code. For example:

<img src="images/support/1605/help.svg" style="width:100%;" alt="" border="0">

The fifth example below illustrates another nice feature of .SVG graphics. It allows you to insert the graphic as code, rather than an external file. In this case, the .SVG file was opened up in a text editor, the code was copied, and then the code was pasted into the HTML. (If you want to see what SVG code looks like, scroll down to the bottom of this page.) While not shown in this example, because SVGs are code-based, with a little jQuery or JavaScript you can adjust a parameter of the graphic on-the-fly, such as adding a new element or changing the color of an object.

Example 1
GIF 8 kb / transparency

Example 2
JPG 11 kb / no transparency

Example 3
PNG 12 kb / transparency

Example 4
SVG 4 kb / transparency

Example 5
SVG inline

NOTE: If you are using Internet Explorer to view this page, the inline SVG graphic found in Example 5 may not be scaling to fit the available area. This "feature" of Internet Explorer causes it to render pages differently than all other major browsers. Fortunately, there are work arounds available on the Internet to make it resize properly.

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 998.8 954.1" enable-background="new 0 0 998.8 954.1" xml:space="preserve">
<g>
	<path fill="#131B26" d="M438.8,283.2c-15.2,7.4-25.8,20-36.3,32.6c-39.7,47.7-59.4,102.7-63.3,164.5
		c-5.7,89.1,2.6,177.3,14.9,265.2c9,64.9,18.6,129.9,35.9,193.3c2,7.3-0.1,9.6-7.3,9.6c-17.7-0.1-35.5,0-53.2,0.4
		c-7.4,0.2-10.5-2.5-12.7-9.9c-32.3-110.1-69.4-218.7-98.7-329.6c-0.4-1.6-1.2-3.2-2.6-6.6c-7.2,34.9-9.8,68.3-10.8,101.8
		c-2.4,78.1-0.5,156.1,11.9,233.5c1.5,9-1.9,11-9.6,10.9c-18.6-0.3-37.3-0.4-55.9-0.5c-4.9,0-8.1-1.3-9.5-6.8
		c-28.8-108.9-55.6-218.3-65.4-330.8c-9.1-104.4,10.9-204.7,46.8-302.4c1.8-5,3.7-9.9,5.8-15.6c-26.1-8-52.3-14.7-78.8-19.5
		c-9.6-1.8-15.4-5.5-19.1-15c-7.7-19.8-16.3-39.3-25.6-58.4c-5.1-10.5-6.2-20.5-3.7-31.9c15.2-68.3,54-117.2,117.8-146.4
		c10.4-4.8,17.4-4.8,24.2,5.7c9.2,14.1,19.9,27.2,30,40.7c3.9,5.3,5.5,8.6-2.5,12.8c-23.6,12.5-43.5,32-60.7,57.6
		c23.9-6.4,46.2-12.3,68.5-18.2c8.5,48.9,17.1,97.7,30,145.7c4.3,16.1,4.5,16.1,20.2,9.3c12.2-5.3,24-11.9,36.6-15.8
		c12.8-4,15-10.4,12.5-23.1c-6.3-31.7-10.2-63.8-6.1-96.3c17.3,47.3,49.7,77.4,100.5,83.4c51.8,6.2,91.6-15.1,118.4-59.4
		c5.2-8.6,8.8-10,16.9-5.3c7.2,4.2,15.1,7.2,23.7,11.2c-26.1,36.9-31.1,76-16.7,117.6c-7.9-2.7-15.7-5.8-23.7-8.1
		C473,273.9,455.4,272.4,438.8,283.2z"/>
	<path fill="#BE0F17" d="M638.8,947.2c-0.1,3.3-2.7,4.4-5.5,4.6c-30.1,2.1-13.3,0.7-52.4,2.3c-12.2,0.5-12.5-7.8-13.7-18.3
		c-2.8-24.7-8.7-49.1-13.5-73.6c-5.5-28.7-10.2-57.6-13.9-86.7c-3.1-24,0.9-46.6,11-68.6c21.7-47.3,48.7-91.6,77.1-135
		c5-7.6,5.4-13.5,2-21.8c-25.7-62.3-52.5-124.1-86.1-182.6c-9.9-17.3-20.7-34.2-33.7-49.4c-18.8-21.9-41.4-36-71.4-34.9
		c16.6-10.8,34.3-9.3,52.1-4.1c8,2.3,15.8,5.4,23.7,8.1c34.7,82.9,142.3,103.6,205.2,31.7c-10.2,41.5-28.5,79-55.6,112
		c-5.9,7.1-5.9,11.5,0.6,17.5c13.1,12,26.1,24,38.4,36.7c7.2,7.5,11.5,5.5,18-1.1c39.3-40.1,74.4-83.1,97.5-134.9
		c35.4,19.7,68.5,42.7,98.1,70.4c19.6,18.3,30.9,42,40.5,66.5c17.3,44,26.7,90,34.3,136.4c1.2,7.6-1.2,11.1-8,13.9
		c-13.5,5.7-26.8,11.9-39.6,18.8c-7.8,4.2-10.8,3.3-12.8-5.8c-6.8-30.8-15.7-60.9-27.6-90.2c-15.8-38.8-45.8-65.3-79.8-92.1
		c7.7,71.8,9.1,140.8,41.1,205.6c32.3,65.5,71.2,124.5,128.2,170.7c6.1,5,7.8,8.9,2.8,16.3c-9.2,13.5-17.3,27.8-25.5,42
		c-2.8,4.8-5.2,5.8-10.3,2.8c-43.7-25.4-87.9-50-127.7-81.5c-20.4-16.1-35.7-37-50.9-57.8c-20.8-28.5-41-57.6-62.1-87.4
		c-19.9,30.3-43,56.9-68.3,81.8c-10.5,10.3-13.4,25-15.5,39c-6.3,42.5-4.5,84.9,1.7,127.3"/>
	<path fill="#131B26" d="M491.4,105c-0.1,57.9-47.2,104.6-105.2,104.4C329,209.2,282.4,162.6,282,105.2C281.7,47.6,329.1,0,386.7,0
		C444.4,0,491.5,47.2,491.4,105z"/>
	<path fill="#BE0F17" d="M730.9,243.7c-0.2,57.7-47.6,104.4-105.6,104c-57-0.4-103.8-47.5-103.9-104.6
		c0-57.5,47.7-105.1,105.1-104.9C684.3,138.5,731.1,185.9,730.9,243.7z"/>
	<path fill="#131B26" d="M818.7,349.3c-23.1,51.7-58.3,94.7-97.5,134.9c-6.5,6.6-10.7,8.6-18,1.1c-12.3-12.7-25.4-24.7-38.4-36.7
		c-6.5-6-6.5-10.4-0.6-17.5c27.1-33,45.4-70.5,55.6-112c8.3-12.5,16.5-25.2,20.8-39.8c1.3-4.6,2.8-6.8,8.2-5.1
		C781.7,284.6,816.8,312.8,818.7,349.3z"/>
	<path fill="#BE0F17" d="M271.8,139.7c-4.1,32.5-0.2,64.6,6.1,96.3c2.5,12.7,0.4,19.1-12.5,23.1c-12.6,4-24.4,10.6-36.6,15.8
		c-15.7,6.8-15.9,6.7-20.2-9.3c-12.9-48-21.5-96.8-30-145.7c21.5-27.2,51.5-33.2,83.7-34.1c6.5-0.2,5.5,4,5.2,8
		C266.2,109.3,267.9,124.6,271.8,139.7z"/>
</g>
</svg>