"external-graphic" with SVG Diagram

This section provides a tutorial example on how to use 'external-graphic' formatting object to display SVG (Scalable Vector Graphics) diagrams.

"external-graphic" formatting objects can also be used to display SVG (Scalable Vector Graphics) diagrams.

To play with SVG diagrams, let's create a SVG file, sample.svg, first:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="288" height="288"
 viewBox="0 0 304 290">
 <path d="M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z" 
style="fill:#FB2;stroke:#BBB;stroke-width:5;stroke-linejoin:round"/>
</svg>

Now we can write XSL-FO document, external-graphic-scale-to-fit.fo, that has two "external-graphic" formatting objects: one with the default resolution and one with a fixed resolution:

<?xml version="1.0" encoding="utf-8"?>
<!-- external-graphic-SVG-Diagram.fo
 - Copyright (c) 2016, HerongYang.com, All Rights Reserved.
-->
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
 <fo:layout-master-set>
  <fo:simple-page-master master-name="page" 
   margin="0.1in" page-height="4in" page-width="3in">
   <fo:region-body region-name="body" background-color="#eeffff"/>
  </fo:simple-page-master>
 </fo:layout-master-set>
 <fo:page-sequence master-reference="page">
  <fo:flow flow-name="body">
   <fo:block border-width="1px" border-style="solid">
    <fo:block-container width="1in" border-width="1px"
     border-style="solid">
     <fo:block>1 inch</fo:block>
    </fo:block-container>
    <fo:block-container width="72px" border-width="1px" 
     border-style="solid">
     <fo:block>72 px</fo:block>
    </fo:block-container>
    <fo:block-container width="120px" border-width="1px" 
     border-style="solid">
     <fo:block>120 px</fo:block>
    </fo:block-container>
    <fo:block border-width="1px" border-style="solid">
     SVG diagram of 288x288 px at a fixed resolution 144dpi:
    <fo:external-graphic src="sample.svg" width="2in" height="2in"
     content-width="scale-to-fit" content-height="scale-to-fit"/>
    </fo:block>
   </fo:block>
  </fo:flow>
 </fo:page-sequence>
</fo:root>

If you process this example XSL-FO document with Apache FOP, you should see a diagram of a star shape displayed on the page:

"external-graphic" with SVG Diagram

Last update: 2016.

Table of Contents

 About This XSL-FO Tutorial Book

 Introduction of XSL-FO

 Apache™ FOP (Formatting Objects Processor)

 RenderX XEP as an XSL-FO Tool

 Introduction of Area Model

 XSL-FO Document Basics and Examples

 Page Layout Masters

 Block-Level Formatting Objects

 Inline-Level Formatting Objects

Including Graphics in XSL-FO document

 What Is "external-graphic" Formatting Object?

 Control DPI with "content-width" and "content-height"

 Fixed Higher DPI with "scale-to-fit"

 Resolution Included in Image Files

 Image Over and Under Flow Area

"external-graphic" with SVG Diagram

 "instream-foreign-object" Formatting Object

 Table of Rows and Columns

 List, Item, Label, and Body

 Floating Blocks - "float" and "footnote"

 Hyperlinks, Table of Contents and Indexes

 Headers and Footers using "static-content"

 Font Attributes and Font Families

 Apache FOP Font Configurations

 RenderX XEP Font Configurations

 References

 PDF Printing Version