I have been starting using SVG recently and I love it. There so clean, cool and easy to design.
Well I stumbled across a issue when I tried to one of my svg's into html (Works with every one of my svgs except this one). It works totally fine if I call it as a image (<img src="hill.svg"></img>) but when I try to use it
either with PHP(include 'hill.svg';) or just straight up passing it in on the index files, it messes up.
Here's an image. Messed up svg top left and the working on the full screen. Same file just that the working one is imbedded with "background-image"
It kinds of look like the background is turnt into one of those "missing- image-icons"
Any help would be highly appreciated.
Svg: https://pastebin.com/RsSAGv8M
There are some raster images linked in your SVG:
947B2F3D9DDD76B8.png (two times),
947B2F3D9DDD76B9.png,
947B2F3D9DDD76BF.png
They are probably not available on your webserver. If the SVG is linked as an <img>, they are never tried to retrieve, as for security reasons all images must be self-contained. But when the SVG is embeded in a HTML page, the request fails. and some browsers show a "missing image" icon.
Either delete the <image> tags in your SVG file (it seems you did not miss their content?), or embed them as data URLs. (I don't know Adobe illustrator good enough to know if there is a utility to do that.)
Related
I embed images from Facebook links. While it works perfectly in Firefox, IE doesn't want to work with it. The div and the image tags are both generated in the HTML, but the image is absent. I've tried to look for most common IE bugs with images, but never found anything relevant.
Here's the link: http://spotbc.com/example.php
Try to check if you have no specific system/network/proxy settings especially for IE. We can see your image fine here. Try empty/close your browser cache (try on a different machine if it helps).
Though you could leave out quotes for the src attribute of an img tag in an HTML5 document it is not consistent with the rest of your code. Review your generated HTML structure for best results. </br> is also no valid HTML.
I'm trying to use html2pdf to automatically create brochures that may need to go to print so need certain elements to be vector based. The class is hopelessly documented and I've got stuck trying to embed SVGs.
If I just try to embed the SVGs in the HTML to output like <embed src="img/test.svg" type="image/svg+xml" /> then I get an error saying the necessary methods to use this tag don't yet exist, likewise for <object> tags.
Digging further and the examples seem to show some sort of, I assume, proprietary <draw> tags that consist of all the required co-ords to draw the SVG. However I can't find any documentation anywhere to explain how to generate these?
Has anyone ever successfully embedded a SVG into a PDF using html2pdf?
Well I've partly figured this out, it seems the <draw> tag just contains the contents of an SVG file ("show SVG code" when saving as SVG from Illustrator) but it turns out html2pdf doesn't support bezier curves, which makes it pretty much useless for most things.
I am working on a project that consists of a online store, to sell Printed Circuit Boards.
But the hole system will be automated, and will be able to view online the Gerber files (Gerber are the files that has the machine code for the pcb).
I need to choose the best way to "output" this file uploaded by the user, to the webpage. Only for viewing the PCB before buying.
I have done the entire PHP code to process the Gerber, but, I can't decide if the file will be proccesed, and then:
I will save as a PNG file (rendering will be done with the PHP image library {that is a shit}), and if the user zoom, or do anything, it will not be perfect... (I would need to render in a high resolutiong, and would take a lot of space, and also time to load)
Render as an SVG file (Vector file), and show on the HTML as an mbeded element (Does it work on all new browsers? Is it slow to proccess?), The SVG file are awsome in terms of drawing lines...
And the last but not least way to doit, is to create a list of JavaScript commands, that draws on a Canvas Element (I have already implemented this, and works really good, but I don't like to think, that I'm actualy 'rendering' to a code...)
Anyway, what do you think I should use, and if I didn't tought in another way of doing it, please tell me!
Here is an example of the output as Canvas (With the source being a JavaScript function object, that has many drawLine commands):
I'm opting for SVG file, even if it's slower than canvas, but considering that won't be real time drawing process in terms of user interaction with the drawing object it's a good choice. SVG's are actually vectors, hence the images won't be crispy on large images. There are some quite good libraries out there which are working with svg-s like:
http://processingjs.org
http://d3js.org/
http://fabricjs.com/
http://raphaeljs.com/
I think d3 is one of the best. I definitely wont' recommend PHP image library.
I want to generate PDF from a PHP file that includes HTML controls like textbox, and textarea. I attached CSS in the same. I tried FPDF, DOMPDF and TCPDF, but still I don't get exactly what I want. How do I pass HTML controls with PHP variables and CSS to these libraries?
mpdf is another option that you could try.
EDIT :
Found another solution for it, TCPDF is a FLOSS PHP class for generating PDF documents. Looks more dominating library.
"PRINCEXML" is a good library (not completely free now).
Others:
If your meaning is to create a PDF file from PHP, pdflib will help you (as some other suggested).
Else, if you want to convert an HTML page in PDF via PHP, you'll find
a little trouble outta here.. For three years I have been trying to do it as best as I
can.
So, the options I know are:
HTML2PS: same of DOMPDF, but this one convert first in .ps
(Ghostscript), then, in whatever format you need (PDF, JPEG, PNG). For
me it is a little better than dompdf, but I have the same speed problem.. Oh,
it has better compatibility with CSS.
Those two are PHP classes, but if you can install some software on the
server, and access it through passthru() or system(), have a look at
these too:
wkhtmltopdf: based on webkit (safari's wrapper), is really fast and
powerful... It seem like it is the best one (atm) for converting HTML pages to PDF on the fly, taking only two seconds for a three pages XHTML document
with CSS 2. It is a recent project. Anyway, the Google Code page is often
updated.
htmldoc: this one is a tank, it really never stops orcrashes... The project
seems to have died in 2007, but anyway if you don't need CSS compatibility
this can be nice for you.
** Thumbs Up For Strae.
If I understand your needs correctly I don't think any PHP-PDF class would do that.
Mostly you could insert only text and images to a PDF file, so if you would want something that looks like an HTML element you would need to insert it as an image.
Usually just putting HTML doesn't mean all your elements would stay intact in the PDF . (Different world, after all)
http://www.fpdf.org/ is the site having a great HTML-to-PDF class which work well. I am using it, but you have to first study its functionality and then start.
I am using CKEditor to do basic text and image input into my website. I have noticed that it is quite sporadic in it's method of generating HTML for images when you add them. (Sometimes it might use height and width tags, other times it might use CSS).
I use Timthumb for on the fly image resizing on a number of other websites and find it very useful. I use a mod_rewrite rule in my .htaccess file to allow me to create domains like http://localhost/images/800x600/image.jpg and achieve resizing.
I would like to somehow incorporate this into CKEditor. I cannot find how to do this looking through the documentation so I have tried post-processing the data produced by CKEditor using Regex, however as mentioned before CKEditor seems to be too sporadic to be able to get this to work all the time.
Anyone else done this before? How did you achieve it?
I've done this in Grails. It's quite painful because of the random usage of html attributes and css. I ended up using an html parser, iterating over the images (dom nodes) and resizing those who has been resized. After that the html attributes and/or css styles has to be updated. It took quite some time to get it right as there are so many things that can go wrong.