I have a PDF file that I would like to put within an HTML SVG element. Does anyone know if this is possible? I've been through several other resources and done as many different Google searches as I can think of without any luck.
The closest I've come is a sample which embeds an image at http://svg-wow.org/filterEffects/twirl.svg. If I try do do that with a PDF only the first page will display.
Have you tried this. Maybe not exactly what your are looking for (no svg) - but pretty close.
Related
I need to have just one pdf on my website and HTML file. I dont need to be making them on my website I just need to add one pdf to a page and put text over it. Does anyone know of the best way to convert the pdf to HTML. I have found places like cloud converter but it adds so much other stuff on the page with the text that it is impossible to filter through all the css and javascript to find ways to put text over it without it covering it up or weird characteristics arising. I just need the text to be formatted relative to itself and on the page plainly in html. Is this even the right approach. Thanks!
I need to embed both pdf-files and images in my html-page, however, due to the fact that my html contains a form and the user has to be able to decide whether he would like to upload a pdf-file or an image, I need a flexible solution regarding how to embed either a pdf-file or an image with the same code.
I read that I could possibly use the <object/> tag, however, I also read that that's not a very "elegant" and possibly slow solution.
I also considered to use <embed/> which, as of right now, is the best solution I could come up with. Unfortunately I couldn't find out about if it's a very conventional solution or not.
I can't seem to find very much resources regarding this topic online, hence why I'm asking here. Are there any other/better ways to embed a pdf- or image-file in an html page?
Edit: I want top display the pdf kind of like a file. Also, I don't want the user to be able to resize the pdf in the viewer
I'm sure this is better suited to a comment, however I'm new and am working on unlocking that feature.
...however,
due to the fact that my html contains a form and the user has to be
able to decide whether he would like to upload a pdf-file or an image...
What are you using for the form (query language & database management)?
(PHP, Django, MySQL, MongoDB, etc)
Are there any other/better ways to embed a
pdf- or image-file in an html page?
I would recommend using embed or iframes. You are correct in thinking that the object tag is not an elegant solution, since you are dealing with images.
Edit: I want top display the pdf kind of like a file. Also, I don't
want the user to be able to resize the pdf in the viewer
Easy to do with iframes. There's a lot of hate when it comes to iframes. As you seem to plan on using it as a tool to display a file within a page, then I believe using an iframe here is just fine.
Check out this link on iframes. (will also tell you how to keep the user from resizing it)
can any one tell me how to convert html markup to an image and save it. i tried researching on google but i did not find anything. it would be great if you could provide me any resource or article to achieve the functionality. OR is it possible to take a screen shot of the rendered html on the browser and save it as an image? please let me know
You could achieve that using an JavaScript library called html2canvas. This library will allow you to take screenshots of a webpage.
The screenshots are usually saved as a canvas element, which you can easily convert to an image later on.
Refer here to learn more about the library and the use cases.
I'm doing some experiments to see the potential pros&cons of embedding css in HTML. I have mirror of websites locally. I tried to embed external css into HTML using "style type='text/css'" tag. Its working for few css files but for some css webpage is not rendered exactly as it used to be before embedding. I'm not sure whats exactly causing this problem.
Any suggestions/help please.. Pictures before and after ebedding.
Problem is not particular to this site. I'm seeing different rendering problems for different websites. I want to know whats the difference of embedding vs referring external css?
The problem you are facing is mainly caused by relative paths being invalid once you embed your css. Let assume that the image Evil_Kitty_Of_Darnkess.JPG is one level higher than the css file. A rule inside the file will be able to use the relative path like this:
background-image: url(../Evil_Kitty_Of_Darnkess.JPG);
Once you embed those rules directly in the page, you must reference paths according to the new base path in which the page is located. If the image isn't exactly one level higher, it will fail to resolve it. You will see something like in your screenshot: Nothing at all.
I know something like this is possible, I'm pretty sure I'm just wording it wrong as I've been searching online for hours to no avail.
The same way an HTML page refers to the CSS file for a menu design, how can the HTML page also refer to a file (or the same CSS file if possible) to get the links information? So when I change the link information in that one file, it changes links on all HTML pages referring to it. Is this possible?
There is no simple way to do this. In general this happens server-side and is drawn from a database.
You CAN draw this data from a JavaScript file, using HTML templating without having to depend on a server. This may help.
http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-an-introduction-to-jquery-templating/