Why my SVG file is showing different in different browsers? - google-chrome

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.

Related

SVG font won't load in Safari but does work in other browsers

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.

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.

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.

SVG won't display unless previously loaded in Chrome

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

JPG image is not displayed properly on browsers

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.