diff options
Diffstat (limited to 'examples/fo/svg/external.fo')
-rw-r--r-- | examples/fo/svg/external.fo | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/examples/fo/svg/external.fo b/examples/fo/svg/external.fo new file mode 100644 index 000000000..e96ef4760 --- /dev/null +++ b/examples/fo/svg/external.fo @@ -0,0 +1,132 @@ +<?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 + margin-right="1.5cm" + margin-left="1.5cm" + margin-bottom="2cm" + margin-top="1cm" + page-width="21cm" + page-height="29.7cm" + master-name="first"> + <fo:region-before extent="1cm"/> + <fo:region-body margin-top="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> + |