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.
Related
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.
I have an image on my html that is not displayed on Chrome. If I inspect the img tag, I can see a preview, so the img url is correct. If, for example, I change some css attribute (inspecting), like img height, image also shows. The issue is that it doesn´t load when the page is ready. It works fine on Edge.
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 have no clue what happened, I created an svg image in illustrator, saved it, posted it to my wordpress site, and everything was good to go.
((Its upposed to show under the text box on this page.
I resized the screen, the image disappeared, and now no matter what i do, it will not show.
Furthermore, The problem appears to be limited to Chrome, Ive tried creating multiple other svg images, and none of them will show at all on chrome whereas all of them work on other web browsers.
I've also added code to my htaccess, still no luck. i knew that wouldn't work because ive posted svg's to my wordpress site before with no problem...
my illustrator settings are as follows:
svg profiles: svg 1.1
fonts type: convert to outline
image location: embed
advanced options - css properties: Presentation Attributes
Decimal places: 5, unicode 8
-responsive box checked
///////
Here's a google docs link to the svg code
SVG CODE - Google Docs
EDIT** Now the images aren't showing up in any browsers, i haven't changed anything.
If you examine the <img> element in your browser dev tools you'll see the problem. The browser is sizing the <img> for the SVG at (0 x 0).
Here's the relevant HTML from your page:
<img src="https://makerstrunk.com/wp-content/uploads/2015/04/coursetrunksample1.svg"
class="mpc-transition attachment-full" alt="coursetrunksample1">
You haven't sepcified a width and height here. But you have for the PNG versions of the image you have included on the page. Normally, in HTML, images default to the natural/intrinsic size of the bitmap. But SVGs don't always have those values. And yours doesn't. Check the contents of the SVG. You'll see it has no width or height.
If you add width and height to your <img> tag, all will be well.
<img src="https://makerstrunk.com/wp-content/uploads/2015/04/coursetrunksample1.svg"
class="mpc-transition attachment-full" alt="coursetrunksample1"
width="300" height="250">
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.