Tutorial - Viewer Auto-Install

About the SVG Auto-Installer

In order to make it easy for end-users to view pages with SVG content, Adobe is providing some scripts that can be embedded in an HTML page that will automatically lead the end-user through the process of downloading and installing the Adobe SVG Viewer if they don't already have an SVG viewer installed.

When a user without an SVG viewer comes to a page like this, they'll be prompted with a dialog asking if they want to download and install the Adobe SVG Viewer. If they say "Yes," they'll be taken to a page on Adobe.com that downloads and installs the viewer with as little participation required of the user as their browser permits. After the installation, the user will be guided back to the page containing the SVG, which they will then be able to view. If the user says "No" to the installation prompt, then a link to the auto-installer page on Adobe.com will be displayed instead of the SVG graphic. If the user clicks on that link, they'll have the same experience as if they'd responded "Yes." They won't be prompted with the dialog again when viewing pages with SVG for another 30 days.

The user experience

The following table describes what happens based on the user's configuration when they reply "Yes" to the dialog prompt, or click on the place-holder link:

OS	Browser	Version	JavaScript	Java	Behavior
Windows	Internet Explorer	3.x or earlier	any	any	4
		4.0 or later	enabled	any	1
		4.0 or later	disabled	any	3
	Netscape	3.x or earlier	any	any	4
		4.0 through 4.07	any	any	3
		4.08 through 4.73	enabled	enabled	2
		4.08 through 4.73	enabled	disabled	3
		4.08 through 4.73	disabled	enabled	3
		4.08 through 4.73	disabled	disabled	3
Macintosh	Internet Explorer	4.x or earlier	any	any	4
	Internet Explorer	5.0 or later	any	any	3
	Netscape	4.06 or earlier	any	any	4
		4.07	any	any	3
		4.08 through 4.73	any	any	2
Other	any	any	any	any	4

Behaviors:

User is taken to the auto-installer page on Adobe.com, where the page instructs the user to click on a link to begin downloading the installer. Once the user completes the installation process, the page detects this and automatically takes them back to the original page containing the SVG.
User is taken to the auto-installer page on Adobe.com, where the page instructs the user to click a link to begin downloading the installer. Once the user completes the installation process, the user must click the back button to return to the original page containing the SVG.
A link is displayed, which when clicked asks if the user wishes to install the viewer. If they say yes, they're taken to the download page on Adobe.com where they can select the viewer they wish to download and install. After installing the viewer, they must click the back button to view the page with the SVG graphic.
User is informed that no viewer is available for their browser and a link to Adobe.com/svg is displayed, which the user can click on for more information.

How to use the Adobe SVG Auto-Installer in your Web pages

To make use of the auto-installer script demonstrated in this page, you need to download the script files "svgcheck.js" and "svgcheck.vbs" here:

download autoinstall.zip

Place these files on your site and add the following lines to the <head> element of your HTML document (with the URL appropriate for your site's structure):

<script language="JavaScript" src="svgcheck.js"></script>
<script language="VBScript" src="svgcheck.vbs"></script>

You then need to add the following code before the first SVG graphic. This should be called once per page. It will put up an alert to ask about installation, so it's best to put it after any HTML you want visible when the alert appears:

<script language="JavaScript"><!--
checkAndGetSVGViewer();
// -->
</script>

Finally, you need to add this code once for each SVG graphic (modified as appropriate, of course, for the URL and size of your graphic):

<script language="JavaScript"><!--
emitSVG('src="hello.svg" name="SVGEmbed" height="200" width="600" type="image/svg-xml"');
// -->
</script>
<noscript>
<embed src="hello.svg" name="SVGEmbed" height="200" width="600" type="image/svg-xml"
pluginspage="http://www.adobe.com/svg/viewer/install/">
</noscript>

Next lesson: Workflow