I have created a basic html and css page with images in it.
the page is working fine in chrome but image are not rendering in firefox
and have taken image with svg format can u help me to find out the solution.
Use SVG image can create restrictions on some browsers like Firefox, here are some examples :
Javascript disabled
External ressources cannot be loaded
visited link aren't rendered
The onliest way to dodge these issues is to embed the SVG images with <iframe>, <object> or <embed>.
I think you should try to embed your image to see if they show again, else check if you're following the supported context to use SVG
You'll find further information on this link.
Related
I use a specific font for an SVG on my website (I use font-face to import it) and when I display that svg in Chrome and Firefox, it displays the right font. However, in safari it doesn't - I can still use the font in general HTML (like p tags) in Safari but it don't display within the SVG.
Any ideas why this is happening?
Update:
I know added the font-face directly to the svg. If I open the url for the svg image, it displays with the correct font, but, if I open the webpage with the svg embedded, it doesn't seem to show the correct font.... Any ideas?
Update (19/7/21): I found that even by targeting the SVG path directly there was no way to change the background colour that I could find. I ended up just using a PNG. I will leave this thread unanswered just in case anyone finds the solution.
I've created a SVG using Inkscape. Now, I've uploaded it to my page and it shows different in different browsers but I don't know what's the issue.
Firefox: The best render
Chrome: Fails on the left side
For at least, I want that Chrome render equals quality of Firefox render but I don't know how?
SVG File: https://github.com/AdrianArroyoCalle/adrianarroyocalle.github.io/blob/master/city.svg
Web: http://adrianarroyocalle.github.io
Also mention that if I open the SVG with Chrome without an HTML page, it shows like Firefox, but reduced.
I am having a strange issue with displaying JPG image on browser. The image color is mostly washed out while being viewed on any browser (Chrome, IE and FF). But it's fine when using desktop applications (Windows Photo Viewer, Paint, etc.) to view.
You can see the example here: https://dl.dropboxusercontent.com/u/2095747/asp.jpg
Does anyone know any particular reason for it?
Regards,
Harry
The image uses a type of embedded color correction that browsers do not support.
Since you seem to have used Photoshop to generate that image, you should reopen your source file and re-export the image using the "Save for web" action, which will either not embed a color profile at all, or use a browser compatible format.
I am trying to embed a pdf in a web page. I am using the following code:
<object data='pdf/main.pdf#nameddest=fun&view=FitH'
type='application/pdf'
width='740'
height='800'>
This works in chrome(apart from FitH doesn't work) and firefox and ie for me. However, when viewing on a mac it doesn't work with named destinations(just loads to the top of the pdf if Safari). Also, it doesn't seem to work in Firefox as firefox seems to have disabled adobe plugin by default. Is there a better way to embed a pdf with relative ease and wide compatability?
The best approach at the moment is to use PDF.js You can check out the demo here : Demo for pdf.js and download the source from here
It is by mozilla and very widely supported / used.
Google chrome doesn't seem to bother to display an <img> with cross origin src attribute.
Firefox does. So for Firefox one would need to use an iframe which works fine for .png images. But it turns out that Firefox doesn't handle well iframes with an .ico src attribute: Firefox simply doesn't seem to create the appropriate elements in the iframe.
So the question is: is it possible to display a cross origin .ico image in Firefox?
Thanks!
<img>'s src doesn't have a cross origin policy by default. That's why you can link your images from almost everywhere (almost, because you can set your host not to allow hotlinking -maybe that's what appears here-).
Anyway, please, try to avoid the use of .ico in a <img> tag because it won't be shown in every browser as #Pekka said. Some will anyway because many software save .ico file as .png (kinda like a camouflage) but it still a trick...
The iframe trick won't work either.
In summary, use .ico only if you need to but avoid it if you want a nice compatibility with every browser.
google chrome doesn't seem to bother to display an with cross origin src attriubte.
that is definitely incorrect. Your problem probably doesn't have to do with the image's origin, but with the format. ICO is mainly a Windows format and will not be reliably displayed across browsers.
The Wikipedia browser comparison on image formats doesn't list ICO at all.