XSL-FO Tutorials - Herong's Tutorial Examples - Version 2.10, by Dr. Herong Yang
"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:
Last update: 2016.
Table of Contents
About This XSL-FO Tutorial Book
Apache™ FOP (Formatting Objects Processor)
XSL-FO Document Basics and Examples
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
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