SVG Graphics

<< Click to Display Table of Contents >>

Navigation:  Basic Working Procedures > Using Graphics >

SVG Graphics

Vector-based SVG graphics files are very useful for responsive designs and any other formats where the content may be zoomed because they are compact and can be scaled without any loss of quality. You can insert them directly in your topics just like any other graphics files. How they are supported and handled in individual output formats varies slightly, however.

WebHelp:

Both uncompressed SVG and compressed SVGz graphics are exported directly as the original files in WebHelp. In addition to this, each image has a PNG fallback image that is displayed in older browsers that do not support SVG.

MS HTML Help/CHM:
(Also applies for older versions of Internet Explorer)

The Microsoft CHM viewer uses an older mode of Internet Explorer to display help pages which is not seamlessly compatible with SVG files. They can only be rendered correctly if certain conditions are fulfilled. Because of this, SVGs are converted to PNG by default when you publish to CHM. If you are sure that your SVG files will work correctly in CHM you can turn this conversion off.

Characteristics of the PNG conversion:

When SVGs are converted to PNG the resulting PNG will have the current display dimensions of the SVG or the original SVG dimensions, whichever are larger.

Enable export of native SVG files to CHM:

By default, Help+Manual converts SVG to PNG for CHM export for maximum compatibility. If you want vector SVGs to be exported natively to CHM you need to turn off PNG conversion in Configuration > Publishing Options > Microsoft HTML Help > HTML Export Options.

Compiler warnings for incompatible SVGs

Help+Manual checks for these attributes when you publish to CHM with native SVG support switched on. If it encounters files without the necessary attributes warnings will be displayed in the compiler report.

Conditions for correct rendering of SVG graphics in the CHM viewer

SVG graphics are will be rendered and scaled correctly in the Microsoft CHM viewer if the following conditions are fulfilled:

1) The skin or template includes the following line in the HTML Page Template:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

This line is included by default in all of Help+Manual's standard CHM skins and in the CHM skins in the Premium Pack add-on. If this line is missing or if the IE level is set to 8 or lower, the CHM viewer will not support SVG and the SVG graphics will be converted to PNG on export.

2) The SVG file you use contains correctly configured width, height and viewBox attribute

The version of MS Internet Explorer used in the CHM viewer can only scale SVG graphics if the <svg> tag in the SVG file contains correctly configured width and height attributes followed by the correctly configured viewBox attribute. These attributes should look like this when you view the SVG file in a code or text editor (see further below for instructions):

<svg width="212.16249" height="211.27501" viewBox="0 0 212.16249 211.27501" ...

Configuring the width, height and viewBox attributes in your SVG images

If your graphic program can configure the width, height and viewBox attributes in the <svg> tag in your images you just need to enable those options there. Otherwise you need to edit the .svg file in a text/code editor and add the attributes to the <svg> tag yourself. (SVG files are actually text files containing vector graphics code.)

Editing the <svg> tag manually

1.Open the .svg file in a text or code editor (NOT in a word processor!).

2.Locate the <svg ... tag, which begins in the first line of the file.

3.Add the viewBox attribute after the width and height attributes, as follows:

<svg width="212.16249" height="211.27501" viewBox="0 0 212.16249 211.27501" ...

4.The first two values in the viewBox attribute are two zeroes separated by a space. This is followed by the width and height values, which should be exactly the same as the values from the width and height attributes, as shown in the example.

5.Save the SVG file. After this, it should behave responsively in CHM and Internet Explorer.

Word DOCX:

Only the latest version of Word 2016 in the Office 365 edition supports SVG graphics. To ensure maximum compatibility with the very large number of users on other versions, SVG graphics are converted to PNG files for export to Word DOCX.

When SVGs are converted to PNG the resulting PNG will have the current display dimensions of the SVG or the original SVG dimensions, whichever are larger.

Adobe PDF:

SVG graphics are exported to PDF if possible (if they are not too complex). More complex SVGs will be exported to PNG with alpha transparency, which is supported natively in PDF.

When SVGs are converted to PNG the resulting PNG will have a 32-bit color depth and will have the current display dimensions of the SVG or the original SVG dimensions, whichever are larger.

eWriter eBooks:

Same support as in WebHelp (eWriter is WebHelp in a single file with an embedded viewer).

ePUB and Kindle eBooks:

SVG graphics are supported natively in these formats.