This article describes how to preview Scalable Vector Graphics (SVG) in HTML-Kit Tools and HTML-Kit 292.

To get started with editing and previewing SVG, install the Adobe SVG Viewer. You can verify the installation by testing this page or one of these pages in Internet Explorer.

Previewing SVG in HTML-Kit Tools

Simply open a *.svg file in HTML-Kit Tools and click Preview as usual. When you’re editing stand-alone or external SVG files (example) make sure that the file is saved with the .svg file extension.

Previewing SVG in HTML-Kit 292

Getting HTML-Kit 292 ready for SVG development takes a few more steps but once configured you can preview SVG files as easily as clicking the Preview tab or pressing F12.

1. Download hkPreviewSVG plugin and install it using "Tools | Install | Install Plugin" menu option. It’s not necessary to unzip the downloaded file. Restart HTML-Kit 292.
2. In HTML-Kit 292, select "Edit | Preferences" from the main menu and change to the "Preview" tab.
3. Click "Edit Preview Rules." Below the "File extension mappings" section, click "Add." Enter "svg" (without quotes) in the "File extensions" field. Click "Plugin" and pick "hkPreviewSVG." Save changes by clicking "OK" on all open dialogs.

From this point on you can preview *.svg files by opening them in HTML-Kit 292, and clicking the Preview tab or pressing F12.

See Also

• An SVG Primer for Today’s Browsers by David Dailey
• SVG plugins for HTML-Kit Tools
• SVG plugins for HTML-Kit 292