Skip to content

HTMLHelp

Compiled Help (CHM) and Scalable Vector Graphics (SVG)

Attempting to include SVG graphics in CHM files can cause some problems and may result in missing content. Unfortunately the SVG files don't show up in compiled CHM. Also adding the SVG file to the [Files] section of the project file (.hhp) is still not working without special supplements.

The necessary steps are described here.

SVG is an XML-based language for describing vector images. It's basically markup, like HTML, except that you've got many different elements for defining the shapes you want to appear in your image, and the effects you want to apply to those shapes. SVG is for marking up graphics, not content.

HTML Help Viewer renders CHM topics in the IE 7 standards mode and IE doesn't support SVG by default. To make HTML Help Viewer use the IE 9 mode you need to add the meta tag <meta http-equiv="X-UA-Compatible" content="IE=9"> inside the <head> tag of your HTML page as shown below.

Adding SVG inline

As a simple SVG example, the following HTML inline SVG code creates the image for an variable electrical resistor:

<!DOCTYPE html>

<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=9">
  <title>SVG - Example 5</title>
</head>

<body>
  <h1>www.help-info.de</h1>
  <svg xmlns="http://www.w3.org/2000/svg"
    version="1.1" baseProfile="full"
    width="350px" height="200px" viewBox="0 0 700 400">

    <!-- connectors left and right -->
    <line x1="0" y1="200" x2="700" y2="200" stroke="black" stroke-width="20px"/>
    <!-- rectangle -->
    <rect x="100" y="100" width="500" height="200" fill="white" stroke="black" stroke-width="20px"/>
    <!-- slider -->
    <line x1="180" y1="370" x2="500" y2="50" stroke="black" stroke-width="15px"/>
    <!-- arrowhead -->
    <polygon points="585 0 525 25 585 50" transform="rotate(135 525 25)"/>
  </svg>
</body>
</html>

This is resulting in a CHM topic like:

CHM help files - adding SVG images.

Adding SVG files

To add an SVG file via an <img> element, you just need to reference it in the src attribute. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio).

To add an SVG file via an <object> element, you just need to reference it in the data attribute. Please note, you need to write down the closing tag as shown below.

Listed here for completeness, but do NOT use <embed> tag. It is not part of HTML specifications but widely supported on all browsers mainly used to implement old Flash plugins.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=9">
  <title>SVG - Example 2</title>
</head>

<body>
  <h1>Insert SVG - the way by image tag</h1>
  <img src="..\svg\R-logo.svg" alt="SVG mit img Tag laden" width="300" height="175" >

  <h1>Insert SVG - the way by object tag</h1>
  <object type="image/svg+xml" data="..\svg\SVG-logo.svg">
  </object>

  <h1>Insert SVG - the way by embed-tag</h1>
  <embed src="..\svg\svg-sample-Circle.svg" type="image/svg+xml" />
</body>
</html>

This is resulting in a CHM topic like:

CHM help files - adding SVG images.

Please note, depending on the help authoring tool in use you need to add the names of the SVG files to the [FILES] section in your project (.hhp) file. This will ensure that the SVG files are compiled into the help file, which may not be the case for all cases.

If you're using HTML Help Workshop, the procedure for adding the file names to the [FILES] section is as follows:

  1. Open the .hhp file in HTML Help Workshop.
  2. Click the Add/Remove Topic Files button on the Project tab.
  3. Click Add.
  4. In the File Name field, type *.svg.
  5. Click Open, select the files to add to the list, and then click Open again.

An HTML help project (.hhp) file is a text file that brings together all the elements of a help project. Normally you will never need to use this feature but there may be situations where you want or need to make changes to your HTML Help output by making changes or additions to the HHP file.

You may work directly in the .hhp file using your favorite text editor to add e.g. SVG file names.

[FILES]
design.css
index.htm
svg\svg-pencil-box.svg

If you want, you can use wildcards in the [FILES] section to specify every file in a given directory. For example:

[FILES]
welcome.htm
settings\Setting-1.htm
settings\Setting-2.htm
css\foobar.css
images\*.png
svg\*.svg

Download

Some sample test files for creating a CHM file.