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).
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 using Century Gothic font in my HTML and then converting it in to PDF. It works perfectly on my mac, but on my Slackware 14.1 server, when I convert the HTMl in to the PDF, the font is not rendered as smoothly as it should be.
I read several ways to include non-standard fonts in the HTML, as #font-face, or adding the entire font in the CSS file as an encoded font and both these methods worked for me in the HTML. The HTML is rendered perfectly in the browser, it's the PDF which is not getting a correct Century Gothic. Any help is highly appreciated.
Thank you
I did some research too and it seems that this is a known bug with qt-webkit.
See the issue documentation here:
https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2193
Sorry to not have better news for you. Maybe just try with a supported font that's close enough to what you like it to look?
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");
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
I'm a bit stumped on this one. I am referring to this page - http://savitarbernese.com/welcome.aspx. At the moment it looks okay on IE7 but I can't seem to get it to work on other browsers. As it stands now I had to wrap a couple of DIVs within tables to make the background extend behind the full content. I'm guessing this has something to do with the div overflow? I'm not sure...
What's the best practice for cross-browser compatibility when using DIVs?
Cheers,
D.
Add
overflow: hidden;
to #container and to #content in your css and presto!
This directive tells the browser to extend the height of the parent divs to the inside divs, even when they are floating.
What's the best practice for
cross-browser compatibility when using
DIVs?
Allways code for firefox first, then for IE.
You are starting in the wrong end. If you build it for IE7, it will rarely look the same in any other browser, and not in IE8 either.
First make sure that it looks right in a standards compliant browser, for example Firefox, then it will almost always look the same in all other standard compliant browsers, which is just about everything except IE7 and earlier. IE8 still has some rendering problems, but it's a lot closer to being compliant than IE7. You will have to make some tweaks to the page to make it look the same in IE7 also, but that is a lot less than trying to make it work the other way around.
And first of all you should make sure that you have a proper doctype on your page so that it doesn't render in quirks mode. That helps a lot when you want it to render the same across browsers.
Thanks - that's a fair comment. My dev machine is down and I only had access to IE7 at the time. Normally I would definitely start off with Firefox 3.5 and go from there.
That aside, it's a small problem that is hampering me at the moment. In FF3.5, Safari, and IE8 the background of the content panel does not extend down the full height of the content like it does in IE7. I have changed the doctype to use XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Is there something obvious I have missed here?
Thanks again.