Edit online

SVG

Oxygen PDF Chemistry supports SVG images. The main advantage of using SVG is that the image looks good on paper no matter its size.

SVG Referenced or Embedded in the Document

These can either be referenced as external resources:

<p> This is an SVG showing a happy face: <img src="happy.svg"/></p>

or embedded in the document as SVG fragments:

<p> This is a red circle: 
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50">
       <circle cx="25" cy="25" r="10" />
   </svg>
</p>

The document styles are also applied to the SVG fragments. For instance, if the <circle> element has the sun class, you could change its appearance by using .sun {fill="orange"} in your main CSS. As a general rule of thumb, keep distinct names for the SVG fragment class attributes from the ones used for general content styling.

Note: For HTML5, the namespace declaration is not required.

Using SVG for Styling

To use SVG to decorate an element:

div.note:before {
    content:url("images/note.svg");
}

To set an SVG image as the background of a page, or a page margin box:

@page coverpage{
    background-image: url("images/clipart.svg");
    background-repeat:no-repeat;
    background-position:center center;
    
    @top-left {
        background-image: url("images/company.svg");
        background-repeat:no-repeat;
    }
}

Note: The image-resolution CSS property does not apply for SVG vectors.

Linking from SVG to Parts of the Host Document

If you need to use the graphics as a type of table of contents, you can place links over parts of the image (used as callouts) that point to some descriptive sections in your document by using the <a xlink:href=".."> markup. This is similar to what the <imagemap> HTML element does, but this is encoded directly in the graphics:

<p> This image has a link that points to a paragraph:
   <svg 
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 50 50" 
          width="50" 
          height="50">

      <a xlink:href="explain-circle">
        <circle cx="25" cy="25" r="10" />
      <a>

   </svg>
</p>
....
<p id="explain-circle"> 
  The circle is a round shape.
</p>