Our printer is set up to handle PPML files.
We would like to include some SVG charts to be printed. SVG Charts are built with PHP and YUI3.
How to incorporate SVG charts into PPML files?
How to include YUI3 charts into PPML?
In your PPML file, I believe you should be able to add the tag below:
<SOURCE Dimensions="thewidthinpixels theheightinpixels" Format="image/svg+xml">
<EXTERNAL_DATA Src="yoursvgfilepath.svg" />
</SOURCE>
Here's an example PPML file (although it doesn't include an SVG example):
Example PPML code
And, if you wanted to just copy and paste the svg in, it appears you can embed it as internal data, too:
W3C reference regarding use of SVG in PPML
Related
So, I'm attempting to create some tag images for my users, showing the total points that they have earned. I am attempting to write the SVG in a php file which will add in dynamic content, such as the user's points. I'd like to use a HTML <img> tag to fetch the SVG from a file image_gen.php.
How would I display the SVG through the <img> tag?
Thanks!
Using the following PHP code, I set the content type of the file to svg+xml:
<?php
header('Content-Type: image/svg+xml');
?>
I want to dynamically create an svg that I can use in an <img/> tag. This in itself is easy; create an svg, set the header and echo the generated parts in their correct place.
The problem is, I want to be able to embed fonts in the svg.
I've tried using the #font-face rule in the css of the svg, but that didn't work (MDN says that it only works on Android and Safari).
Is there any cross-browser way to do this?
Solutions I've Considered:
Possible Solution #01:
The solution:
In my main file, create an svg file which uses the #font-face css rule, and then use exec() to use inkscape to convert that svg into another svg, which converts all letters into paths. I then could use echo file_get_contents($inkscape_file) with the correct headers to output it as a svg which can be used with an <img/> tag.
The problem with this:
This creates 2 additional files, so seems very inefficient. Furthermore, since each user will end up generating several images, the space it takes up would grow phenomenally.
Possible Solution #02:
The solution:
Make a template in illustrator, then save it as svg, and tick the embed all glyphs option. Then replace the text & the styles with the options from the PHP script. Use the correct header and output this.
The problem with this:
This severely limits the amount of fonts that can be used, as it is limited to only those which I create a template for. My desired behaviour was to add the option for users to upload their own fonts and use them. This solution does not allow for that.
Additional information that may be of some relevance:
My development server runs fedora, and the production server uses redhat.
The #font-face rule I am currently using is as follows:
#font-face {
font-family: Potato;
src: url("/fonts/potato.otf");
}
You can't load any external resources declared in the svg from the <img> tag.
The only solutions would be some crappy ways to append the glyphs or the fonts into the svg file itself.
Actually there is a not so crappy way to do it as you found in this answer by lèse-majesté.
The best way is then still IMO to not use an <img> tag to display the svg documents, but rather use an <iframe> or an <object> tag, with the #font-face declared inside the svg file, or even directly include an inline version into the document. These methods do allow the loading of external resources such as fonts.
Then you just have to save the fonts on your server or just an url to the font in the #font-face declaration.
Currently I am using the standard way to embed an pdf to the browser, however, the built-in pdf viewer for my target browser is not working as expected. I would like to force (Chrome, Firefox and IE8 (if possible, but IE9+ is also ok)) to use the adobe reader. The problem is , I can only change this option manually. Is there any way to change the option in HTML/ JS/ PHP ? Thanks.
<OBJECT data="YourFile.pdf" TYPE="application/x-pdf" TITLE="SamplePdf"
WIDTH=200 HEIGHT=100>
shree
</object>
I try to find the solution and someone suggested header, not working unfortunately e.g.
Content-Type: application/pdf
Content-Disposition: inline; filename.pdf
You can use Google PDF viewer to embed pdf files on to your website. Use this link https://docs.google.com/viewer
Example:
<iframe src="https://docs.google.com/viewer?url={HTTP PATH OF THE PDF FILE}&embedded=true" width="600" height="780" style="border: none;"></iframe>
https://docs.google.com/viewer?url=http://research.google.com/archive/bigtable-osdi06.pdf
Check out PDFObject which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8.
In your HTML, you could set up a div to display the PDFs:
<div id="pdfRenderer"></div>
Then, you can have Javascript code to embed a PDF in that div:
var pdf = new PDFObject({
url: "https://sample.pdf",
id: "pdfRendered",
pdfOpenParams: {
view: "FitH"
}
}).embed("pdfRenderer");
Cheers
Trick Chrome and Firefox (and maybe other browsers) into displaying the PDFs using the Adobe Reader plugin (for full PDF Open Parameters support among other benefits) by using one of the following 'Adobe PDF in XML Format' types in your embed code:
application/vnd.adobe.pdfxml
application/vnd.adobe.x-mars
This works fine as of my answer today and I'm hopeful it will continue to work fine. I'm using it currently with standard PDF files as a workaround for embedding PDF files in the browser that need to use the Adobe PDF plugin rather than the browser's built-in PDF rendering. Even though my PDF files are standard (non-XML) files, they appear to load just fine with this new application type parameter.
<OBJECT data="YourFile.pdf" TYPE="application/vnd.adobe.pdfxml" TITLE="SamplePdf"
WIDTH=200 HEIGHT=100>
shree
</object>
I have javascript code that generates svg image tags on the fly when a person lands on one of the pages. Im using the d3 library to help make the image. The only problem is that d3 is not fully IE compatible and I would want to generate a .png, jpg, gif or any other image file based on the svg file. Is there a known way to do this?
The server side code is PHP based, and we use node.js, and render.js for a lot of the dynamic content.
I'm using ImageMagick to convert SVG images to PNG images.
This works pretty well.
A quick example of how to do this:
exec('/usr/bin/convert /path/to/image.svg /path/to/output_image.png');
I'm using this with great success for processing QR codes made with libqrencode to different sizes and colors.
Firstly you need to use a DOM implementation on server side as you want to get svg which is rendered on client side.For this we use jsdom with node.js.
Using this you can render D3 on server side and get svg on server then convert it to any format you like.
Here is the link on how to that.
Once you got SVG and PNG then by using modernizer.js
1)Check compatibility of browser using Modernizr.
2)Then load SVG or PNG basing upon on the compatibility.
Example (JS solution):
if (!Modernizr.svg) {
$("#logo").css("background-image", "url(fallback.png)");
}
Example (CSS solution):
.no-svg #logo { background-image: url(fallback.png); }
i'm using PHP Graph Lib PHPGraphLib
i created some graphs , and all i need is to embed these graphs into html,,
you know, inside and so on,,
every time i put the code within html it gives me errors
The image “http://localhost/chart2.php” cannot be displayed, because it contains errors.
although without the html code , it works fine ...
Assuming your image code is in chart2.php, you embed it into html with an img tag:
<img src="chart2.php" alt="This is a chart of x" />