I want to generate a svg chart and insert it into pdf using apache fop. So far I have tried using
<fo:instream-foreign-object xmlns:svg="http://www.w3.org/2000/svg">
<xsl:value-of select="svgData"/>
</fo:instream-foreign-object>
in xsl file and generated svg is held as a string in the "svgData". This approach is not working as it is not parsing the string svg data and just appending it.
How do I achieve this ? I need to create the svg in java (baitk?) and add it to the pdf.
I spent some time too having headache on this problem. Finally I could make it work by using a <xsl:copy-of> instead of <xsl:value-of> + using prefixed namespace.
<fo:block>
<fo:instream-foreign-object content-type="content-type:xml/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<xsl:copy-of select="/path/to/svg:svg"/>
</fo:instream-foreign-object>
</fo:block>
I spent many hours solving the problem. Without success. My recommendation is not to pursue this approach any further.
My solution to get dynamic SVG into a PDF is the following.
Save the SVG on your hard disk and remember the filename/path in the object.
Then use the filename to fill the external-graphic src attribute.
After creating the PDF the svg-files have to be deleted.
Done.
XSL:
<xsl:template match="qandapair">
<fo:block text-align="center">
<fo:external-graphic src="{chart}"/>
</fo:block>
</xsl:template>
XML:
<qandapair>
<chart>gaoejTLVfcBUrCgjvmsWgjBwQzHYmYYJ.svg</chart>
...
</qandapair>
Related
I have a number of different SVGs to include in my project (Angular 10).
Some of them are used multiple times with different sizes and fill colors etc.
I am trying to find a way to reference them in my html code and have access to via styling:
CSS:
.svg {
fill: red;
}
Referencing:
<svg>
<use></use>
</svg>
<object></object>
<img></img>
<embed></embed>
As yet, I have not been able to find a solution that allows me to reference them but also have the ability to access the fill property in the SVG itself as i can when adding inline.
Inline:
<svg>
<path>
</path>
</svg>
Adding them inline is going to be messy.
How is this usually handled?
Your help is appreciated!
You can't. CSS does not apply across document boundaries. If the CSS rules are in the HTML (or imported into the HTML via <link>) then it cannot affect the content of external files.
One solution people have used in the past is to use a bit of Javascript to inline SVG files at runtime.
Otherwise, you will need to put the CSS in the external SVG itself.
I am using the below code to set the svg file as image view source.
imageView.SetImageDrawable(Resources.System.GetDrawable(Resource.Drawable.Typogy1));
it throws an exception. Please suggest me how to set the svg file to image view.
This example by James Mundy is really good for SVG usage in xamarin android.
But recently in a chat with him, he said and as well as, in my opinion, the best way of using SVG's in an Android application is using Vector Drawables. (Much better than using any libraries)
Vector drawable's are easy to use, maintain and are very lightweight in comparison to images which makes them even better.
An example of how to use it.
Creating SVG vector drawable's is very easy too, using this
Update:
Vector.xml
<?xml version="1.0" encoding="utf-8" ?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="96dp"
android:width="96dp"
android:viewportHeight="48"
android:viewportWidth="48" >
<group>
<path
android:fillColor="#393939"
android:pathData="M12 36l17-12-17-12v24zm20-24v24h4V12h-4z" />
</group>
</vector>
Place this XML in a folder inside your Resources for eg your drawable folder or your layout folder, then use it as follows :
_yourImageView.SetImageResource(Resource.Drawable.Vector);
Goodluck!
Revert in case of any queries.
I am trying to create watermark in pdf using xslt.
I have created watermark, but the problem is that text on page is not selectable only watermark is.
How to make text selectable, and watermark to be shown in background.
How to achive it using svg. I cannot use image, because it shold be a lot of different text, so it would be hard to create so many images. Is there any way to do it.
Is there any attribute or element to make it not selectable?
<fo:instream-foreign-object z-index="-1">
<svg:svg>
<svg:g font-size="50px" >
<svg:text fill="#FF0000"
>
watermark
</svg:text>
</svg:g>
</svg:svg>
</fo:instream-foreign-object>
Hope somebody can help me, I'm stuck.
I am creating a set of SVG's and HTML files from an XML doc (via XSLT2), and I have hyperlinks in my SVG graphics (with xlink:href) to the HTML files. Basically, showing a database structure with rectangles for tables, and a click on a table goes to the explanation in HTML. So far so good.
Now, my customer tells me "I need all that in a single interactive PDF doc". So using another XSLT I produce a single XSL-FO doc with fo:block's for each table details and instream SVG's for the diagrams. The FO doc will be further processed through FOP to produce the PDF.
But now, I can't find a way to refer to a fo:block in the same doc from the rectangle in the embedded SVG? xlink:href expects a reference to an <a name="">, so how to indicate that I want to point to a fo:block id? Or is there an equivalent to the <a name=""> construct in FO?
Any help/hint greatly appreciated! Thanks to the community.
Add an id attribute to the fo:block and it should work:
<fo:block id="foo"></fo:block>
<image xlink:href="#foo" />
I created a star using Illustrator which I saved as an SVG file. Later in my HTML coding I called that SVG like this:
<object type="image/svg+xml" data="images/star.svg" width="100%" height="100%"></object>
But I am unable to see the image in any browsers. I have tried Safari version 5.0 and Firefox 5.0 versions to preview my html.
Is it possible to get an SVG file to display in a browser?
Yes, it is possible. You can use the object tag, or you can use CSS background-image, or with recent browsers you can embed it directly inline using the<svg> tag. Read this:
http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii
The SVG file format was originally designed for browsers if i am not wrong.
One crude solution to your problem is by using this pre-made SVG sample code:
<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<path id="svg_7" d="m64,143c1,0 95,-44 105,-40c10,4 27,59 27,59" fill-opacity="null" stroke-opacity="null" stroke-width="2" stroke="#995757" fill="#FF8787"/>
</g>
</svg>
Now open up the SVG file you created in Illustrator with Notepad and find something called the ''d'' attribute. Copy the values of the ''d'' attribute. For example in the sample code above you would be copying this: "m64,143c1,0 95,-44 105,-40c10,4 27,59 27,59". Take extra care to include the "" tags while copying.
Now create a new Notepad file and paste the sample code i gave you above. Then replace the ''d'' value with the value you copied from your Illustrator SVG file. Make sure you set this values in the sample code with the ones you prefer. **fill-opacity="null" stroke-opacity="null" stroke-width="2" stroke="#995757" fill="#FF8787"**.
Also make sure you change the width="500" and height="400" values with ones that correspond to the paper size you are using in Illustrator.
Then save the file with an .svg extension at the end of the filename and choose to save as type ''All Files'' instead of ''Text Document''.
Pretty crude solution but i think illustrator creates SVG files that are not exactly browser friendly.