Edit online

SVG Templates

Oxygen PDF Chemistry supports SVG template images (with a .template.svg file extension). These files can contain XPath expressions that will be expanded by the processor.

Using SVG Template as a Cover Page

A good use-case for SVG templates is when you want to create a custom cover page. For example:

Suppose the following HTML file should be printed with a cover page:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>How to Dynamically add Content to SVG</title>
        <link rel="stylesheet" href="styles.css"/>
        <meta name="author" content="John Doe"/>
        <meta name="version" content="1.1"/>
        <meta name="copyright" content="© Oxygen PDF Chemistry. For demonstration purpose."/>
    </head>
    <body>
        ...
    </body>
</html>

The cover image (for example, named cover.template.svg) should display <meta> nodes information and the main title. Both the author and version will be displayed in rectangular shapes prefixed with the displayed information ("Author:" and "Version:"), while the title is positioned in the middle of the page, at some absolute coordinates.
```
<svg width="8.5in" height="11in" xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect height="39" width="180" y="40" x="579" stroke="#000" fill="#fff"/>
    <rect height="39" width="180" y="79" x="579" stroke="#000" fill="#fff"/>

    <text font-size="8" stroke-width="0" y="52" x="582" stroke="#000" fill="#000000"
      >Author:</text>
    <text font-size="16" stroke-width="0" y="66" x="643" stroke="#000" fill="#000000"
      >${//meta[@name='author']/@content}</text>

    <text font-size="8" stroke-width="0" y="91" x="582" stroke="#000" fill="#000000"
      >Version:</text>
    <text font-size="16" stroke-width="0" y="104" x="659" stroke="#000" fill="#000000"
      >${//meta[@name='version']/@content}</text>

    <text font-size="30" stroke-width="0" y="252" x="123" stroke="#000" fill="#000000"
      >${//head/title}</text>
    <text font-size="12" stroke-width="0" y="993.40002" x="266" stroke="#000" fill="#000000"
      >${//meta[@name='copyright']/@content}</text>
  </g>
</svg>
```
Notes:
- XPath expressions are not expanded if the SVG template is open in Author mode.
- XPath expressions can be tested (without ${}) using the XPath/XQuery Builder view.
Important:
- If you received the SVG image from someone else (e.g. a graphics designer), make sure that the text from the image was not converted to glyph shapes and that it is rendered using the <text> element.
- The SVG <text> element does not wrap the text if it overflows the image. If you have longer text that needs to be rendered, you might consider using multiple <text> elements and more evolved XPath expressions (for example, using the substring() function) to place the text on multiple lines.
Tip: You can ask a designer to fill the image with some placeholders that you can later find and replace with your XPath expressions. In the above SVG, the designer could place the text Here comes the version, that you replace with ${//meta[@name='version']/@content}:
```
<text font-size="8" stroke-width="0" y="91" x="582" stroke="#000" fill="#000000"
>Version:</text>
<text font-size="16" stroke-width="0" y="104" x="659" stroke="#000" fill="#000000"
>Here comes the version</text>
```
The CSS stylesheet should declare a synthetic page to be printed before the HTML document and display the SVG cover image on this new page:
```
@page cover-page {
  background-image: url('cover.template.svg');
  background-repeat: no-repeat;
}

html::before {
  content: " ";
  page: cover-page;
}
```
You can even create a sequence of synthetic pages using before(1), before(2), …, before(n) pseudo-elements and multiple @page definitions for each of the before elements.
After the transformation, the final document cover will look like this: