HTMLHelp

Kompilierte Hilfe (CHM) und skalierbare Vektorgrafiken (SVG)

Der Versuch, SVG-Grafiken in CHM-Dateien einzubinden, kann einige Probleme verursachen und zu fehlendem Inhalt führen. Leider werden die SVG-Dateien in kompilierten CHM-Dateien nicht angezeigt. Auch das Hinzufügen der SVG-Datei in den [Files]-Abschnitt der Projektdatei (.hhp) funktioniert nicht funktioniert nicht ohne besondere Ergänzungen.

Die notwendigen Schritte werden hier beschrieben.

SVG ist eine XML-basierte Sprache zur Beschreibung von Vektorbildern. Es ist im Grunde eine Auszeichnungssprache, wie HTML, mit dem Unterschied, dass Sie viele verschiedene Elemente haben, um die Formen zu definieren, die in Ihrem Bild erscheinen sollen, und die Effekte, die Sie auf diese Formen anwenden wollen. SVG ist zum Auszeichnen von Grafiken gedacht, nicht von Inhalten.

HTML Help Viewer rendert CHM-Themen im Standardmodus des IE 7 und der IE unterstützt SVG standardmäßig nicht.

Um HTML Help Viewer dazu zu bringen, den IE 9 Modus zu verwenden, müssen Sie den Meta-Tag <meta http-equiv="X-UA-Compatible" content="IE=9"> innerhalb des <head> Tags Ihrer HTML-Seite hinzufügen, wie unten gezeigt.

SVG inline hinzufügen

Als einfaches SVG-Beispiel erzeugt der folgende HTML-Inline-SVG-Code das Bild für einen veränderbaren elektrischen Widerstand:

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

Dies führt zu einem CHM-Thema wie:

Hinzufügen von SVG-Dateien

Um eine SVG-Datei über ein <img>-Element einzufügen, müssen Sie sie nur im src-Attribut referenzieren. Sie benötigen ein height- oder ein width-Attribut (oder beide, wenn Ihr SVG kein inhärentes Seitenverhältnis hat).

Um eine SVG-Datei über ein <object>-Element hinzuzufügen, müssen Sie sie nur im data-Attribut referenzieren. Bitte beachten Sie, dass Sie den abschließenden -Tag wie unten gezeigt notieren müssen.

Der Vollständigkeit halber sei hier noch erwähnt, dass Sie den <embed>-Tag NICHT verwenden dürfen. Es ist nicht Teil der HTML-Spezifikationen, wird aber von allen Browsern weitgehend unterstützt und wird hauptsächlich zur Implementierung alter Flash-Plugins verwendet.

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

Dies führt zu einem CHM-Thema wie:

Abhängig von dem verwendeten Hilfe-Authoring-Tool müssen Sie die Namen der SVG-Dateien in den Abschnitt [FILES] in Ihrer Projektdatei (.hhp) einfügen. Dadurch wird sichergestellt, dass die SVG-Dateien in die Hilfedatei kompiliert werden, was nicht in allen Fällen der Fall sein muss. Eine HTML-Hilfeprojektdatei (.hhp) ist eine Textdatei, die alle Elemente eines Hilfeprojekts zusammenfasst. Normalerweise werden Sie diese Funktion nie verwenden müssen, aber es kann Situationen geben, in denen Sie Änderungen an Ihrer HTML-Hilfe-Ausgabe vornehmen wollen oder müssen, indem Sie Änderungen oder Ergänzungen in der HHP-Datei vornehmen.

Wenn Sie HTML Help Workshop verwenden, gehen Sie wie folgt vor, um die Dateinamen in den [FILES]-Abschnitt einzufügen:

Öffnen Sie die .hhp-Datei in HTML Help Workshop.
Klicken Sie auf die Schaltfläche Add/Remove Topic Files auf der Registerkarte Project.
Klicken Sie auf Hinzufügen.
Geben Sie in das Feld Dateiname den Wert *.svg ein.
Klicken Sie auf Öffnen, wählen Sie die Dateien aus, die Sie der Liste hinzufügen möchten, und klicken Sie dann erneut auf Öffnen.

Sie können auch direkt in der .hhp-Datei mit Ihrem bevorzugten Texteditor arbeiten, um z.B. SVG-Dateinamen hinzuzufügen.

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

Wenn Sie möchten, können Sie im Abschnitt [FILES] Platzhalter verwenden, um jede Datei in einem bestimmten Verzeichnis anzugeben. Zum Beispiel:

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

Download

Einige Beispiel-Testdateien für die Erstellung einer CHM-Datei.

Keywords:

Microsoft, HTMLHelp, CHM, SVG, HTML, inline