Firefox has native support for SVG. However, I have a web page where the SVG graphig is <embed>ed, and a plugin is requested to show it.
When I click on the plugin icon, no plugin is proposed by FF.
Questions:
Is there such a plugin?
Is there a way to make FF display embedded SVGs using its native support without installing a plugin?
The same happens with TIFF files.
UPDATE:
Code:
<td align="left">
<p>
<embed
src="/file-server/review/AttachedFilesServlet.servlet?attachedFileId=28604|original=additional-docs/medicine.svg"
alt="SVG"> Image SVG
</p>
</td>
I've had a few issues with this recently. The way that I managed to make it work was using the embed function (I was initially using html5, which firefox 3.6 doesnt support inline svg, yet)
The syntax used was, where workspace contains just SVG code:
<embed src="workspace.svg" width="500" height="500" />
The above code shouldn't need a plugin, and didn't when I used it. The advantage of using <embed> rather than <object> is because it allows you to run scripts. If your syntax is slightly different then that could be your issue. If your syntax is the same, post your code as a whole so we can have a look.
Adobe used to supply a plugin but they no longer give support for it so it is wise not to use it.
Edit in response to code posting by OP:
There are only two reasons I can think of, as to why your code isnt working, but not sure if they would actually make a difference:
a) Closing the embed tag (almost definetly not the problem, but is good practice to do so anyway).
b) As I cant see your servlet I cant assume that you have not set the content type to be image/svg+. That could be an issue.
res.setContentType("image/svg+xml");
Related
First of I'm not sure how to formulate this specific question since it's more an browser issue than a coding issue.
I'm trying to get an ASPX image to show inside my img tag.
Which seems to work an all other browsers (IE,Chrome, Safari), except Firefox.
Anyone know how?
Example
<img src="https://example/Download.aspx?Hash=1234" />
I am creating a pdf document (via ColdFusion), but when I preview the rendered pdf in Firefox, I get the number "4" where my checkmarks are supposed to be (see photo below). When I preview the exact same pdf in Chrome or IE, I see the checkmark, and it all works perfectly!
I am pre-populating the pdf form fields (via ColdFusion session variables), and then rendering the pdf using the following markup:
<cfpdfform source="82040.pdf" action="populate">
<cfpdfformparam name="org" value="">
</cfpdfform>
Here is the resulting pdf form in Internet Explorer:
Note how the checkmark is rendered properly:
Here is the same form previewed in FireFox:
Note how the the checkbox has a "4" instead of a checkmark:
Any help would be greatly appreciated!
It is a bug with Firefox's PDF Viewer. Currently, there is no fix. As radiovisual's post points out, the bug in the underlying library (pdf.js) was supposedly fixed. However, there is still the issue of Mozilla updating the older version baked into Firefox (which is what most folks are using). Currently, that bug is still outstanding.
Probably the best you can do is to return the pdf as an "attachment", rather than "inline", so the browser prompts them to "open/save" the file. If the user opts to "open" the pdf, it should open with their default program instead. (Adobe Reader is the default for most users).
<cfheader name="Content-Disposition" value="attachment; filename=fileName.pdf">
<cfcontent type="application/pdf" .../>
Update:
This bug was apparently addressed already, as pointed out via the project's github repo: the bug was supposedly fixed during this commit. So if you are still experiencing problems, it either means:
You are using an outdated version of the pdf.js library,
Or, the problem has been re-introduced into the library.
So to start things off, you will want to make sure that you are using the most up-to-date version of the pdf.js library. If you are still experiencing problems, even with the most up-to-date version, then the problem is still within the embedded pdf document viewer, and there aren't too many things you can do to fix this until the project maintainer's finally fix the problem.
The issue you are experiencing (the reason why you are seeing a "4" where there should be a checkmark, is because the pdf.js library is using a special symbol font to render the checkmarks, but in problematic versions of firefox's embedded pdf-viewer the symbol font isn't rendering the checkmark correctly, so it shows a "4" instead of a checkmark -- because the checkmark symbol they are using in the custom font just so happens to be mapped to the number "4".
Similarly, for the same reasons cited above, if you assign the checkbox to render squares (instead of checks), the letter "N" will appear in the checkbox instead of a square, because the square shape symbol is mapped to the letter "N".
This problem only exists in the embedded pdf document viewer in Firefox but will look perfectly normal when viewed in Adobe Acrobat Reader, or other offline pdf readers (and other browser pdf readers, which is why it looks fine in Chrome and IE), so when users download the form, it will appear like you would expect it to.
Some workarounds / optimizations you could try:
Try one of these, or all of these, they are in no particular order (or guaranteed to work)
Don't rely on the built-in pdf.js browser extension in firefox, instead, make your own updated version based on the latest pdf.js source or target another pdf library and use it's browser-agnostic API to render and display your pdfs.
Create an HTML form for the user to fill and verify all the information, then render the pdf based on the data supplied by the HTML form, for download only (no previewing in the browser). This will force them to open the pdf in their default pdf viewer where the issue is not present, because, again, the problem you describe only happens in Firefox's embedded pdf viewer and not in other pdf viewers like Adobe Acrobat).
Make sure you have the ZapfDingBats Font installed on your server. I haven't confirmed this, but that commit that was supposed to have solved this issue seems to have added support for this font, so it is worth a try to make sure this font is accessible on your ColdFusion server, then try previewing the rendered pdf in Firefox.
Detect that the user is accessing your form via Firefox, and if so, warn the users of the issue, but assure them that downloading the form and viewing in their default pdf viewer will work as expected.
Convert the page to HTML5 (if you aren't already), then add in an HTML5 shiv (so HTML5 features can be used on older browsers), and a CSS normalizer, and test if the problem persists using these optimal settings. It's worth a shot to make sure that the problem is somehow treated differently under the HTML5 standard, since not everyone is having the same issues as you.
Lastly, make sure that your HTML is being rendered as valid markup via your ColdFusion output by using an HTML validator.
Other than that, there isn't a whole lot you can do until the mozilla team updates their embedded pdf viewer. But since the problem is only in the firefox viewer, and not in the pdf itself, it it up to you to decide if this is a deal-breaker or not, and search for alternatives.
Note: PDF.js is built into version 19+ of Firefox.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Update: You can use this pdf (which represents the character mapping of the ZapDingbats symbol font) as a way of testing your browser's interpretation of embedded fonts in the pdf rendered via pdf.js. Note that at the time of this writing, the above pdf does not display the Zapf Dingbats properly in Firefox (via pdf.js), but other browsers render them just fine (notice the "4" next to a20[x2714] in firefox, and the checkmark next to the same entry (a20[x2714]) in Chrome.
I tried to open the AngularUI website (http://angular-ui.github.io/) in IE8. UI was not rendered properly in IE8(working fine in latest version of chrome/firefox). This led me to search browser compatability of AngularUI modules.
A discussion in the groups pointed me that AngularUI-bootstrap module does not support IE8( https://groups.google.com/forum/#!topic/angular-ui/8L0739rxdes)
But could find the info for other modules listed below.
UI-Utils
UI-Modules
NG-Grid
UI-Router
So the question is, Are these modules compatible with ie8. If yes, is there a desire to continue support in the future.
Many of the AngularUI directives do work correctly in IE8 provided you don't configure them using the custom element option. The problem is that IE8 ignores any elements that aren't standard HTML, which obviously blows that approach out of the water.
Use attribute approach instead. For example, instead of:
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.name}}"></tab>
</tabset>
Use:
<ul tabset>
<li tab ng-repeat="tab in tabs" heading="{{tab.name}}"></li>
</ul>
Alternatively you can tell IE8 to use elements which are not known per default by using a script like this:
<script>
document.createElement("tabset");
document.createElement("tab");
document.createElement("tab-heading");
</script>
This lets IE8 know that <tabset>, <tab> and <tab-heading> are valid elements.
In addition to #Paul's correct answer, which by the way should be marked as the answer, here is the Angular teams explanations and how to correct them to work in IE8 Angular IE8 development guide. Also, it should be noted that the Angular team is officially dropping support for IE8 in Angular 1.3 and later, blog. So, if you need to support IE8, don't use Angular 1.3+, nor use any angular UI that uses 1.3+.
I'm a bit stumped with this one. I'm rendering SVG visualizations using Protovis, a JS library, and it works perfectly well in Chrome as well as Firefox. I save the rendered SVG on my server and try to re-render it in a "gallery" view using a PHP function, and this fails in Firefox. All I see is the text in the SVG, but not the SVG.
I save the full svg content, like so:
<svg height="220" width="880" stroke-width="1.5" stroke="none" fill="none" font-family="sans-serif" font-size="10px"><g transform="translate(30, 10)"><line stroke-width="1"
I've tried using <object> but all that does is prompt Firefox to download a plugin it can't find.
It works in FF4 beta, but I can't see why it won't work even in Firefox 3.6. Is this something I ought to give up on? You can see a demo here:
http://www.rioleo.org/protoviewer (click on "gallery")
Thanks once again!
Inline SVG only works in Firefox in two situations:
Firefox has the experimental HTML5 parser enabled (ie. you're using a 4.0 nightly)
The document being parsed is not HTML but XHTML (Content-type: application/xhtml+xml)
The object approach suggested by Rob should work, as long as the separate SVG file is coming from your server with Content-type: image/svg+xml and you use the correct syntax:
<object data="foo.svg" type="image/svg+xml" width="400" height="300">
See Damian Cugley's article 'SVG: object or embed?' for details of some other options, or use SVGWeb.
Make sure you are using the correct attributes with the object element and the end tag:
<object data="yourimage.svg"></object>
This example may be useful for you, explanation. SVG rendering support on load time and MIME text/html is a supported feature of ItsNat Java web framework, anyway it was inspired on this JS code, the latter can be useful for you in your context (PHP).
Hi I'm trying to validate my website but it complains about my slideshow
Is this because its using html? Should I ignore it?
validator link
<embed
src="http://artygirl.co.uk/imagerotator/imagerotator.swf" width="632px" height="308px"
flashvars="file=http://artygirl.co.uk/imagerotator/rotator.xml&transition=blocks&shownavigation=false"
/>
Thanks for your help
Regards
Judi
According to the HTML spec, (rather than ) is the tag to use for embedded content. Unfortunately, Internet Explorer supports the tag, which FF, Chrome, Safari, etc support the tag.
So how do you create valid content with Flash embedded?
After a web page has loaded, you can
insert the embed tag, effectively
circumventing the XHTML problems. As a
bonus, you can use JavaScript to
determine whether the correct Flash
Plugin is available on your visitor's
computer. If it isn’t, alternative
content can be loaded.
– LongTail Video's Embedding Flash tutorial
Hopefully this answers your question about how to embed your content in a standards compliant way.
Best,
Zach
Developer, LongTail Video