123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131 |
- <?xml version="1.0" encoding="UTF-8"?>
- <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:xlink="http://www.w3.org/1999/xlink">
- <fo:layout-master-set>
- <fo:simple-page-master master-name="first"
- margin-right="1.5cm"
- margin-left="1.5cm"
- margin-bottom="2cm"
- margin-top="1cm"
- page-width="21cm"
- page-height="29.7cm">
- <fo:region-body margin-top="1cm"/>
- <fo:region-before extent="1cm"/>
- <fo:region-after extent="1.5cm"/>
- </fo:simple-page-master>
- </fo:layout-master-set>
-
- <fo:page-sequence master-reference="first">
- <fo:static-content flow-name="xsl-region-before">
- <fo:block line-height="14pt" font-size="10pt"
- text-align="end">External SVG examples</fo:block>
- </fo:static-content>
- <fo:static-content flow-name="xsl-region-after">
- <fo:block line-height="14pt" font-size="10pt"
- text-align="end">Page <fo:page-number/></fo:block>
- </fo:static-content>
-
- <fo:flow flow-name="xsl-region-body">
-
- <fo:block text-align="center" font-weight="bold" font-size="14pt" space-before.optimum="3pt" space-after.optimum="15pt">
- External SVG
- </fo:block>
-
- <fo:block space-before.optimum="3pt" space-after.optimum="20pt">
-
-
- </fo:block>
-
- <fo:block text-align="center">
- Some examples of how to reference external SVG images in your FO documents
- </fo:block>
-
- <fo:block break-before="page" space-after.optimum="10pt" font-weight="bold" font-size="12pt">
- Introduction
- </fo:block>
-
- <fo:block>
- This document shows some examples of how an SVG document can be in an external svg file
- which is referenced using the fo:external-graphic.
- </fo:block>
-
- <fo:block>
- </fo:block>
-
- <fo:block space-after.optimum="10pt" font-weight="bold" font-size="12pt">
- Examples
- </fo:block>
-
- <fo:block>
- The following svg document is obtained from an external file using the fo:external-graphic.
- </fo:block>
-
- <fo:block>
- <fo:external-graphic src="file:boxes.svg"/>
- </fo:block>
-
- <fo:block>
- This svg document (<fo:external-graphic src="file:multi.svg"/>) is also obtained from
- an external file using the fo:external-graphic. It has another svg image inside and references
- part of another svg image.
- </fo:block>
-
- <fo:block>
- This inline svg document (
- <fo:instream-foreign-object>
- <svg xmlns="http://www.w3.org/2000/svg" width="60" height="40" xml:space="preserve">
- <g style="fill:none;stroke:yellow">
- <rect x="0" y="0" width="25" height="25"/>
- <image xlink:href="file:boxes.svg" x="10" y="10" width="20" height="20"/>
- </g>
- <g>
- <use xlink:href="file:ref.svg#FOP" transform="scale(1.5)" x="12" y="25"/>
- </g>
- </svg>
- </fo:instream-foreign-object>
- ) has an external svg image inside and references part of another svg image.
- </fo:block>
-
- <fo:block>
- Apart from this external svg images should behave in the same way that other types of
- external graphics do.
- </fo:block>
-
- <fo:block space-before.optimum="10pt">
- The following example shows how you could scale an external svg file.
- </fo:block>
-
- <fo:block>
- <fo:instream-foreign-object>
- <svg xmlns="http://www.w3.org/2000/svg" width="20mm" height="20mm" xml:space="preserve">
- <svg viewBox="0 0 20 20" preserveAspectRatio="none">
- <image xlink:href="file:boxes.svg" x="0" y="0" width="20mm" height="20mm"/>
- </svg>
- </svg>
- </fo:instream-foreign-object>
- and
- <fo:instream-foreign-object>
- <svg xmlns="http://www.w3.org/2000/svg" width="20mm" height="20mm" xml:space="preserve">
- <g transform="scale(3.7)">
- <image xlink:href="file:boxes.svg" x="0" y="0" width="20mm" height="20mm"/>
- </g>
- </svg>
- </fo:instream-foreign-object>
- and
- <fo:instream-foreign-object>
- <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" width="20mm" height="20mm" xml:space="preserve">
- <image preserveAspectRatio="xMidYMid" xlink:href="file:boxes.svg" x="0" y="0" width="10mm" height="10mm"/>
- </svg>
- </fo:instream-foreign-object>
-
- </fo:block>
-
- <fo:block space-before.optimum="10pt">
- This example is an svg from an external image:
- <fo:external-graphic src="file:view.svg"/>
- it has a viewbox that resizes the contents.
- </fo:block>
-
- </fo:flow>
- </fo:page-sequence>
- </fo:root>
|