I am running IIS 6, I know it is out dated but that is what I am stuck with. I am wanting to use svg files for image src. I added the .svg mime type of image/svg+xml and I can request svg files through the browser and it displays correct instead getting 404 errors. I don't care about supporting IE 8 or older so I don't need a fallback image.
The problem now is that if I put this in my html I get an empty image but I put this url in the browser the svg image show fine.
This works
http://localhost/test.svg
This does not work
<img src="test.svg" />
So how do I get the svg image to show as an image in my html?
This issue ended up being that the SVG file that was generated did not have the width and height specified.
Related
I'm trying to build a website with HTML. I'm using an img tag to display an image. When the src links to a WEBP file, it works fine. However, when I replace that WEBP with a JPG, it no longer works. Have tried .jpg and .jpeg extensions, as well as no extension. I know that the path is correct because WEBPs work fine. Any idea what the problem is? The image displayed instead is a standard broken image logo. Thanks.
I have a very weird error that occurs with SVG images:
<img src="https://faviconer.net/img/arrow-right-dark.svg" alt="Next">
Here is an example.
While the image is available when viewing it directly, it doesn't display when used as a "src" for an image from a different domain. It's true for any .svg images. PNG, GIF, JPEG and other images are fine.
Faviconer net runs through Clouldflare CDN. Could that be a problem?
Thanks in advance.
It appears that having incorrect content type in the header makes a browser unable to identify an svg image as image (unlike other image types). So it has to have content type:
image/svg+xml
I have successfully filled my SVG path with an image using this little trick:
Fill SVG path element with a background-image
However, when I load the svg file in my html page using background: url(), it doesn't show up.
Here is my svg image opened in browser:
And here is the same svg image on my html page:
Does anyone know what might be going on here? Thanks.
SVG files loaded into <img> or as a background-image have to be completely self-contained. They cannot refer to external files (as in the image you are loading into your pattern).
What you can do to work around it is to embed your pattern image as a Data URI".
<image xlink:href="data:image/jpeg;base64,..." .../>
I just switched the site from my working files to the server.
It worked fine when I uploaded it to my portfolio but once it was on the correct domain it stopped working. The image, instead of displaying, just shows up blank so I tried going to it's direct url.
Instead of it working it downloads the image instead of displaying it.
Here is the direct url: Direct url
My tag: <img src="images/login_header.svg" alt="Alright, lets start finding discounts!" />
My structure:
// root (BBCM)
//// images
////// login_header.svg
//// css
//// js
// end root
I have tried:
/images/url.svg
the direct url for the image
BBCM/images/url.svg
It works fine when it's on my portfolio but not on the correct domain.
Any ideas? When the image downloads it also displays the correct image so I am a bit lost here.
Is your server sending the .svg file down with the correct MIME type? It should be image/svg+xml.
See Nginx offers of downoload SVG instead of showing it for another question along the same lines.
Some browsers don't allow the IMG tag to support SVG files, you can however put it in an object with an image as fallback in case the browser fails to render.
<object data="image.svg" type="image/svg+xml">
<img src="fallbackimage.jpg" />
</object>
try use <object data="/images/login_header.svg" type="image/svg+xml"></object> instead
In my html page, I created an tag to render some of my .tif format images.
Since .tif images can not be rendered directly in "src" attribute of the tag, so I created the following code to render it:
<object width="200" height="200" type="image/tiff" data="Test.tif">
<param name="src" value="Test.tif"/>
<param name="negative" value="yes"/>
</object>
Everything worked perfectly :) in both Chrome and Firefox, but the image is not rendering in IE. Wonder if any expert could offer some help?
Thanks a lot!
tif is not a standard format for the web (though the spec doesn't define a standard list) and it won't be displayed in all browsers.
It looks like it only has support for IE and Safari.
Browser Image Support
You can convert it to a different file format, e.g. by screen capturing it using the PrtScrn button, then cropping it on Paint and saving it as a jpg/png/etc. file that every browser can display. If not, then somehow you will have to tell people to modify their registry because there is a registry that prevents .tif files by being rendered. Try looking at this:
http://www.pctools.com/guides/registry/detail/1182/
You can also use PHP and ImageMagick to convert the tiff images to png or jpeg on the fly. That way they will render nicely and work in all browsers.
http://www.imagemagick.org/script/index.php