Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

About the SVG Auto-Installer

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
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:

  1. 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.
  2. 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.
  3. 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.
  4. 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>

Comments