| <?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> |
| |