I have a page with a lot of small svg embded (337 exactly)
all like this :
<img src="/path/sub_path/svg-1.svg">
url is relative and all svg are in the same directory
most of them work, but 2 of them are displayed as broken iamge (they appear 16 times for the first and only 1 time for the second).
If I open them in a new tab they are well displayed.
The same page in Firefox works too.
In the network panel the response headers is the same for any SVG (content-length is ok) :
but in the "response" tab instead of seeing the svg as text, I get :
I have no idea what is wrong, is there some kind of limit ?
thanks!
Ok I have found the issue
The file is in ISO-8859-1 but contains the text : °C
th "°" is encoded in utf-8, and prevent Chrome from displaying the svg at all.
Related
I have a problem :
I need to print a PDF from an html document.
All images sizes together are around 16Mo.
And my final PDF with Chrome is like 150 Mo.
I tried to do the same with Adobe Acrobat on Chrome but he only print the document like an image. I can't search a text in the document... (but the size is like 8Mo)
I tried on Firefox but the render is completely different... (font-size are a lot smaller, even pixels size write in the css...) But it prints a selectable text (so i can do the ctrl+f) and the file is around 10 Mo (with acrobat))
Do you know how can i print with acrobat in chrome to have text and images and not a BIG image from the HTML code ? (in order to have a file < 20Mo and that i could do a ctrl+F)
Thank you :)
When displaying a PDF with standard (US letter) size pages, the PDF appears to be 'zoomed out' in Chrome. In Firefox, the PDF shows at a better zoom level.
Here is an example:
http://www.pdf995.com/samples/pdf.pdf
When viewed in Chrome on a 4k monitor, it is zoomed out so far that you can see 1.5 pages. While in Firefox you can see roughly half of the first page which in our case is much more desirable.
Is there any way that we can display this PDF at a standard zoom. For example, setting some headers, etc.
I'm currently using PHP to display the PDF, by setting the following headers and then echoing out the file.
Content-type: application/pdf
Content-Disposition: inline; filename=filename.pdf
Any ideas or suggestions would be great!!
From the description above
Chrome was and still does generally use "standard" 100% zoom.
Whilst FireFox was using Fit Width ("roughly half of the first page").
Many pdf extenders but not all will use the Adobe Acrobat URL trailing fragment so for the example in question try
http://www.pdf995.com/samples/pdf.pdf#zoom=200
however that can be fickle and require a second refresh of same URL.
Better (for more consistency) with the questions description of Firefox at the time use.
http://www.pdf995.com/samples/pdf.pdf#view=FitH
Which for me, with my current window in Chromium Brave / Edge will be 136% on this occasion, but some other 100%hv on a different window setting or screen.
Note the above can be over-ridden as much HTML can by the clients setting so assuming they allow a PDF to run with its own control, it works but if they pre-set remember last PDF view setting it may not.
I am trying to load background image to a page using Dreamweaver. It shows in IE and Edge but not Chrome or Mozilla. I have tried moving the photo's location (file path) and tried in both straight HTML and CSS with the same result. I cannot find another way to write the code or think of one (being very new to this) so that it will show in all browsers. This is the CSS code:
background-image: url('file:///D:/website.com/httpdocs/pic/greenleaf.jpg')
set in the body brackets;
and html:
<body background="file:///D:/website.com/httpdocs/pic/Demo Page Song Thumbnails/Jpeg Thumbnails/greenleaf.jpg">
Everywhere I look I find examples with ellipsis points, like url(...website.com/greanleaf.jpg) and the dots totally confuse me. I think perhaps I need help with how file paths work.
This is due to the implementation of the body and html tags in Firefox and Chrome browsers. the body and HTML tags are only as big as the HTML content of them. where as Edge and IE the HTML and Body are auto sized to the size of the view port.
Add this to your CSS
body, html{
min-height:100%;
min-width:100%;
}
Ok , so if your code is correct and the image it's shown in IE and edge try to
refresh your browser but not normally with this command : Control + Shift + R
so that you're sure to be running the latest and greatest version of what that web
site's serving.
First, you'll need to be sure that the browser is correctly locating the image.
A good way to be sure is looking at Chrome's network tab. Hit F12 in Chrome to reveal Developer Tools. Click the Network tab and then refresh the browser. You will receive a list of resources that have/have not loaded. If your image is listed in red, then it failed to load. Your problem will be an incorrect path.
This is a good resource for understanding relative file paths.
https://css-tricks.com/quick-reminder-about-file-paths/
However, if it did load successfully, the image isn't showing for another reason. Without seeing all of your code, I can only make a guess. Is the container that your image is in empty? Without content or a specified height, the background image won't show in some browsers.
I can't get the SVG Image to disaply correctly in Google Chrome 34
Example
As you can see object and iframes are working. IMG and Backgroudn image aren't working.
IE11 and FireFox can display all 4 examples correct.
The Chrome developers have chosen not to support the use of SVG fragments in images in order to protect user's privacy.
Because your SVG file only displays each shape if it is the target of a URL fragment (the part after # in the filename), nothing is displayed when Chrome strips out the fragment.
I've build this image 1 and put in an src attribute of an img tag.
The image is shown if I access it directly from the browser but when I put it in a page in this way the image is not shown
<img src="$STATIC_MAP_URL" />
If I see the the image with Firebug it is shown, it's strange because Firebug show the img tag gray, as if it is hidden, but it's not.
Other browser haven't this problem and show the image as it is supposed to be.
Thank you in advance!
In addition to encoding the ampersands, make sure you encode the "|" to "%7C" too. I was struggling to get static maps working correctly on Blackberry Devices due to the pipes.