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.
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">
GIF 8 kb / transparency
JPG 11 kb / no transparency
PNG 12 kb / transparency
SVG 4 kb / transparency
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>