SVG won't display unless previously loaded in Chrome - html

I embed a svg like: <img src="http://example.com/path/to/picture.svg" />
Displays fine in IE, but does not render in Chrome (Version 34.0.1847.131)
However, if I then load http://example.com/path/to/picture.svg
directly, it renders fine- and strangly reloading the original page then does display the graphic.
Using renders the first time around, but since I am using these for links... would be best if can work

This seemed to be a bug in chrome when using SVGs with embedded bitmap data. Using pure vector-based SVGs works fine

Related

images are not rendering in firefox

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.

Firefox issues when displaying SVG (Firefox 55.0.3)

Firefox won't display the SVG book covers properly ...
http://new.images.hindawi.org/kalimat/covers/svg/270x360/c/24972860.svg
Compare the link above in Firefox and Chrome.
It used to be displayed just fine in Firefox, but I think something went wrong with the latest update.
If any one know a solution to this issue it would be great.
Thanks.
If you check your browser inspector, than you will see an error:
There is an SVG reference chain which is too long in this
document, which will prevent the document rendering correctly.
Inside your SVG image there are many of them, looking like:
<path clip-path="url(#SVGID_68_)" fill="#FFFFFF" d="..." />
Either create less accurate SVG (less details), or create it some other way.
Since it is rendered well in webkit browsers, than maybe you can use wkhtmltoimage to convert it server side to PNG or JPG.

Google Chrome not rendering PDF colours properly

When these PDFs are opened in browser in Google Chrome the colours are changed drastically, but when opened in another browser or opened in Preview on Mac the colours go back to normal.
It also doesnt occur in some other languages.
You can see in the screenshot below what it should display (top) and what it is displaying (bottom).
The first page consists of a single large JPEG2000 compressed image: 8 bit indexed color, 1276 x 1790 pixels.
A quick look at a comparison of browsers shows Chrome does not support JPEG2000 (officially at least, since you still got to see something).
There seem to be some plugins that add JPEG2000 support to Chrome, but
that is a local solution, it does not fix the issue for all users; and
Chrome uses its own internal PDF renderer, so it might not work "inside" PDFs.

Why my SVG file is showing different in different browsers?

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.

PDF embedded with <object> acting odd

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.