You are viewing a plain text version of this content. The canonical link for it is here.
Posted to fop-users@xmlgraphics.apache.org by Antonio Fiol <fi...@w3ping.com> on 2002/07/04 18:19:29 UTC
Including SVG image
Hello,
I have been trying to include an image in several ways:
First, as a PNG, using external-graphic. Did not work because it needs
jimi. Well. Never mind, I read a post that suggested including it via SVG.
Secondly, via SVG, with svg:image. Worked!! But the image was very
pixelated, and I could not reduce its size without losing on quality.
Never mind, I can generate my image directly as a SVG.
Thirdly, some java coding and I got my image as a SVG by using batik's
SVGGraphics2D.
Here comes my question:
I use the following code to include the image
<xsl:variable name="url">http://......svg...</xsl:variable>
<fo:block>
<fo:instream-foreign-object>
<xsl:copy-of select="document($url)" />
</fo:instream-foreign-object>
</fo:block>
What I get is a (square?) portion of my original SVG, with some texts
and other objects missing (maybe those that would be cut by the right
edge?). It looks odd...
That said, it is not pixelated at all. So I would like to keep this method.
However, how can I control what part of the SVG is actually drawn?
I'd prefer to avoid modifying the SVG, but if there is no other option,
it can be done by changing the <xsl:copy-of/> by some
<xsl:apply-templates/> and some <xsl:template/> that allow me modify the
right things.
I imagine that you need the SVG file to help me. If so, please tell me,
and I will send it to you directly, since it is quite big and might
bother not interested people on this list.
I would be thankful for any pointer that helps me solve the problem.
Thanks in advance.
Antonio Fiol
Re: Including SVG image
Posted by "J.Pietschmann" <j3...@yahoo.de>.
Antonio Fiol wrote:
> I use the following code to include the image
>
> <xsl:variable name="url">http://......svg...</xsl:variable>
> <fo:block>
> <fo:instream-foreign-object>
> <xsl:copy-of select="document($url)" />
> </fo:instream-foreign-object>
> </fo:block>
>
> What I get is a (square?) portion of my original SVG, with some texts
> and other objects missing (maybe those that would be cut by the right
> edge?). It looks odd...
...
> However, how can I control what part of the SVG is actually drawn?
>
> I'd prefer to avoid modifying the SVG, but if there is no other option,
> it can be done by changing the <xsl:copy-of/> by some
> <xsl:apply-templates/> and some <xsl:template/> that allow me modify the
> right things.
You should generate the SVG with a width and height measured
in a real length unit, not pixels or percentages:
<svg:svg width="30mm" height="10mm">
...
If all coordinates within the SVG have length units too
you are usually set. If you use plain numbers (i.e. the
unit is "pixel") you'll have to specify a proper viewport
and mapping or risk your graphic is clipped or otherwise
distorted (that's probably what you actually see).
If you want to be really sure, specify the same width and
height on the fo:instream-foreign-object
J.Pietschmann
Re: Including SVG image
Posted by "J.Pietschmann" <j3...@yahoo.de>.
Antonio Fiol wrote:
> I know I can use <image/> or something like that to LINK to an external
> SVG. But I want to INCLUDE, not LINK.
Look at scripting, and xinclude
http://www.w3.org/TR/xinclude/
http://xml.apache.org/cocoon/userdocs/transformers/xinclude-transformer.html
http://cvs.apache.org/viewcvs.cgi/jakarta-commons-sandbox/morphos/
(yeah, a bit lacking...)
J.Pietschmann
Re: Including SVG image
Posted by Antonio Fiol <fi...@w3ping.com>.
J.Pietschmann wrote:
> Antonio Fiol wrote:
>
>> like removing transparency effects, which are not apparently
>> supported by either batik or the PDF format
>
>
> Both Batik and PDF 1.4 (Acrobat Reader 5.0) support
> transparency. The problem is that the PDFRenderer
> distributed with FOP cannot render transparent SVG
> stuff. This is fixed in CVS and wil probably included
> in the next maintenance release (0.20.5).
Thanks. I'll wait for 0.20.5.
>> How does one include a SVG tree in another one? I mean, not an SVG
>> FILE, as you are doing, but the actual SVG XML nodes.
>
> Look at org.w3c.dom.Document.importNode() and
> related stuff.
No, no... I did not mean that. I meant:
If I have some SVG document, like:
<!-- A --><svg ...><g><!-- Whatever --></g></svg><!-- B -->
Can I create another SVG document by inserting the former one into it
somehow?
For example, like:
<svg ...><!-- A --><svg ...><g><!-- Whatever --></g></svg><!-- B --></svg>
Or something similar...
The idea is being able to dynamically place different SVG "components"
in a more complex SVG drawing.
I know I can use <image/> or something like that to LINK to an external
SVG. But I want to INCLUDE, not LINK.
Hope it is clear now.
Thank you very much.
Antonio
Re: Including SVG image
Posted by "J.Pietschmann" <j3...@yahoo.de>.
Antonio Fiol wrote:
> like removing transparency
> effects, which are not apparently supported by either batik or the PDF
> format
Both Batik and PDF 1.4 (Acrobat Reader 5.0) support
transparency. The problem is that the PDFRenderer
distributed with FOP cannot render transparent SVG
stuff. This is fixed in CVS and wil probably included
in the next maintenance release (0.20.5).
> How does one include a SVG tree in another one? I mean, not an SVG FILE,
> as you are doing, but the actual SVG XML nodes.
Looak at org.w3c.dom.Document.importNode() and
related stuff.
J.Pietschmann
Re: Including SVG image
Posted by Antonio Fiol <fi...@w3ping.com>.
>
>
>You should use in xsl file the following code:
>
> <fo:instream-foreign-object>
> <svg xmlns="http://www.w3.org/2000/svg"
>width="20cm" height="24cm">
> <g>
> <image
>xlink:href="file:///C:\Progetti\abi\repository\stefano\working\pie53729.
>svg"
>
>x="0" y="0" width="20cm" height="24cm"/>
> </g>
> </svg>
> </fo:instream-foreign-object>
>
Hello.
This (very similar) code is what I used.
>Antonio Fiol wrote:
>I use the following code to include the image
>
><xsl:variable name="url">http://......svg...</xsl:variable>
><fo:block>
> <fo:instream-foreign-object>
> <xsl:copy-of select="document($url)" />
> </fo:instream-foreign-object>
></fo:block>
>
>
The problem was that this code did not define a width and height. So the
solution that I took, which also worked consisted in using XSLT to
mangle a bit the SVG code to include width and height on the <svg/> and
I also included a <g transform="scale(0.5)"> to resize it. As I said,
this worked. And it also interacted nicely with my need of mangling the
included SVG code in some other ways, like removing transparency
effects, which are not apparently supported by either batik or the PDF
format (I don't even want to know which: I don't need transparency, so I
remove it. ;-)
Thank you anyway for your example.
May I ask you an off-topic question?
How does one include a SVG tree in another one? I mean, not an SVG FILE,
as you are doing, but the actual SVG XML nodes.
Thanks again!!
Antonio Fiol
RE: Including SVG image
Posted by Stefano Barella <st...@one.it>.
Hello, I have had the same problem before.
You should create the svg file of your GUI Component
with the same dimension that it should have in the pdf page file.
Below the code to create an svg image:
/**
* @author Stefano Barella 18-06-2002
* Save any Chart into a SVG File
*
* REMEMBER:
* Before to call this mathod the Chart must be update with the
selected
* Variables.
*
* @param chart the JFreeChart object to save in SVG format
* @param outputFile the file where to write the svg chart code.
*/
public static void saveChartIntoSVGFile( JFreeChart chart, double
height, double witdh, File outputFile ) {
debug("[saveChartIntoSVGFile method] - height: " + height + " -
width: " + witdh );
// Get a DOMImplementation
org.w3c.dom.DOMImplementation domImpl =
org.apache.batik.dom.GenericDOMImplementation.getDOMImplementation();
// Create an instance of org.w3c.dom.Document
org.w3c.dom.Document document = domImpl.createDocument(null,
"svg", null);
// Create an instance of the SVG Generator
org.apache.batik.svggen.SVGGraphics2D svgGenerator = new
org.apache.batik.svggen.SVGGraphics2D(document);
// Ask the chart to render into the SVG Graphics2D
implementation
ChartRenderingInfo chartRenderingInfo = new
ChartRenderingInfo(new
com.jrefinery.chart.entity.StandardEntityCollection());
chart.draw(svgGenerator, new Rectangle2D.Double(0, 0, witdh,
height),chartRenderingInfo);
// Finally, stream out SVG to a file using UTF-8
// character to byte encoding
boolean useCSS = true; // we want to use CSS style attribute
Writer out = null;
try {
out = new OutputStreamWriter(new
FileOutputStream(outputFile),"UTF-8");
svgGenerator.stream(out, useCSS);
} catch ( Exception e ) {
e.printStackTrace();
} finally {
try {
out.close();
} catch( Exception ee ){
ee.printStackTrace();}
return;
}
}
You should use in xsl file the following code:
<fo:instream-foreign-object>
<svg xmlns="http://www.w3.org/2000/svg"
width="20cm" height="24cm">
<g>
<image
xlink:href="file:///C:\Progetti\abi\repository\stefano\working\pie53729.
svg"
x="0" y="0" width="20cm" height="24cm"/>
</g>
</svg>
</fo:instream-foreign-object>
Bye
Stefano Barella
-----Original Message-----
From: Antonio Fiol [mailto:fiol@w3ping.com]
Sent: Thursday, July 04, 2002 6:19 PM
To: fop-user@xml.apache.org
Subject: Including SVG image
Hello,
I have been trying to include an image in several ways:
First, as a PNG, using external-graphic. Did not work because it needs
jimi. Well. Never mind, I read a post that suggested including it via
SVG.
Secondly, via SVG, with svg:image. Worked!! But the image was very
pixelated, and I could not reduce its size without losing on quality.
Never mind, I can generate my image directly as a SVG.
Thirdly, some java coding and I got my image as a SVG by using batik's
SVGGraphics2D.
Here comes my question:
I use the following code to include the image
<xsl:variable name="url">http://......svg...</xsl:variable>
<fo:block>
<fo:instream-foreign-object>
<xsl:copy-of select="document($url)" />
</fo:instream-foreign-object>
</fo:block>
What I get is a (square?) portion of my original SVG, with some texts
and other objects missing (maybe those that would be cut by the right
edge?). It looks odd...
That said, it is not pixelated at all. So I would like to keep this
method.
However, how can I control what part of the SVG is actually drawn?
I'd prefer to avoid modifying the SVG, but if there is no other option,
it can be done by changing the <xsl:copy-of/> by some
<xsl:apply-templates/> and some <xsl:template/> that allow me modify the
right things.
I imagine that you need the SVG file to help me. If so, please tell me,
and I will send it to you directly, since it is quite big and might
bother not interested people on this list.
I would be thankful for any pointer that helps me solve the problem.
Thanks in advance.
Antonio Fiol