I have a website where images are loaded through <img src="..." />
One of these images is RSM's logo, however on the webpage it displays as this:
<img src="https://assets.clicksminuteper.net/bots/rsm/normal.svg" />
This happens for almost all SVGs on the page, except for simple, single path shapes.
What causes this, and what ways can I fix it?
Update: This bug only appears to happen on chromium based browsers. Those show 2 of the grey bars and not the third, as well as not rendering the background.
Related
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">
Just out of curiousity:
Is there something different in the way that Safari handles images compared to other browsers?
I used to serve the logo of my site as a background-image from a CSS file so that it doesn't have to be re-loaded on every page (at least that's what I thought).
I recently switched to another approach because it's more in line with what Google prefers and with what people in this thread suggest.
<h1>
<a href="http://www.mycompany.com">
<img src="logo.png" alt="My Company" />
</a>
</h1>
However, when clicking through the pages the logo keeps flickering because Safari seems to be re-loading it on every page. Other browsers such as Chrome and Firefox are fine, though. It seems that they cache the logo.png when they first encounter it.
Any idea why this happens or how to prevent it?
In asp.net MVC I was loading blobed images from my db this way. It was displaying correctly on all browsers.
using the following
<div class="blogImage">
<a href="~/WaiGuoAtHome/ImageHtml/#Model.Id">
<img class="img-responsive homePhoto100" src="data:image;base64, #Convert.ToBase64String(Model.Image)" title="#Model.Caption" />
</a>
</div>
Navigate to the following page in firefox, IE and Chrome. Same code but on Chrome the image doesn't display.
http://jacksonjhayes.azurewebsites.net/WaiGuoAtHome/ImageHtml/3646
I don't think this is a size issue, the image on that page is very big, but I display smaller images elsewhere that are much smaller.
#onetrickpony your idea did the trick. Thanks! To bad I can't just use whatever image type I want any more but that makes sense, and I think all my images are jpeg anyway.
I am not an UI expert.
For one of the requirement to show the reload icon, I downloaded the 128x128 pixel reload icon from the link - https://www.iconfinder.com/icons/28464/recycle_refresh_reload_sync_icon
and used in my html page. Actually this was designed for a catcha page.
<body>
<img src="reload.ico" />
</body>
When opened in Firefox, this was shown as a small image, but when opened in Chrome, it is relatively large. What is the reason behind this?
I agree that after changing the code to ,
<body>
<img src="reload.ico" width="24px" height="24px" />
</body>
both the browsers are showing the same size. But i am interested to know why it was not in the first case.
edit: Actually I accidentally downloaded the 128x128. But then i am surprised to see this difference.
The .ico files are only supported for the favicon.
Prefer the .png files for transparent images/icons.
You can see a list of supported formats per browser at Comparison of web browsers on wikipedia
When designing my site i noticed that under dark backgrounds all of the images I used as sprites turn out like this:
I have tried multiple versions on PNGs and GIFs. IT works fine under firefox.
However, if i do not use sprites the image displays as:
This is the same exact image just without any positioning tags.
Can anyone help?
I fixed it. The issue was my cache needed to be cleared!