I'm displaying SVG images with two methods on a website, css background and <img> tag, neither of which are working. However, I'm able to load svg files via the <object> method, but this doesn't work for this case (it could replace <img> but not background images). Because someone will ask, the SVG files are there, and they are accessible if you go to their url directly.
I've been testing and working with this site on a separate, private server and the SVG images were displaying properly there. This leads me to believe that the issue is a result of something server-side.
I've tried adding the following to the .htaccess file, but it didn't fix anything:
AddType image/svg xml svg svgz
AddEncoding gzip svgz
I'm aware of some alternative methods that involve httpd.conf, but I don't have access to this.
Here's the troublesome site: http://www.focusvitamins.com/get-started/
Here's the working test site: http://focus.steadfa.st/dtclanding2015/
Thanks for the help!
That should be
AddType image/svg+xml svg svgz
as the mime-type for svg images is image/svg+xml. You are missing a +
Related
A design firm we are working with on a project has given us code and images for several mock pages with some curious features:
In the html they use <img srcset="somefile.svg" src="somefile.png" /> wherever they reference images.
Every image asset comes as a png file and an svg file.
Every svg file has the following content:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1600" height="860" viewBox="0 0 1600 860">
<image width="1600" height="860" xlink:href="data:img/png;base64,iVB..."/>
</svg>
with the widths, heights and viewbox for that graphic.
The only reason I realized this was because I have to fix the mime type in that data url to be image/png in order to get the images to display in each browser I am testing with.
Is there any reason for me to use these svg files at all? It appears that the srcset attribute here is being used to display the svg image in all supporting browsers and fall back to the png image in browsers that don't support the attribute. But the svg image is merely the png image with the added overhead of being in an svg file as a data url... Is there some browser bug or something that I should be aware of fixed by this contraption?
Yes, in this case the PNG file is a fall-back for the SVG.
But as you note, there is nothing to fall back from, since the SVG contains nothing apart from a PNG Data URI which reproduces the external PNG file.
This looks like (elaborate!) contingency planning for a situation which never arose.
I think you can safely ditch the SVG files (and the srcset attribute) and simply reference the external PNG files.
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
There are several SVG images inserted using <object> tag in here.
The main reasons for choosing this tag is:
to keep image resources in separate files
to ensure all fonts are resolved properly
By default fonts are not inherited from the main web page to the linked SVG images, however, when the style reference <?xml-stylesheet href="main.css" type="text/css"?> with the font definition is inserted into that SVG image, it is resolved properly in case of <object> tag.
However, when multiple images share the same css file, pointing to same woff font resource, it is loaded again and again by the browser. Even the same SVG image inserted as object is not cached and loaded again and again.
How can I ensure the font is loaded only once for multiple images?
I'd like to avoid inline SVG as real images are rather huge and couldn't be cached.
The easiest solution is to use an <iframe> which doesn't have this weird no-cache behavior <object> suffers from.
http:// Fiddle using your svg file, since stacksnippet's https:// frames won't allow the loading of your font file.
The main caveat with this workaround is that the <iframe> won't set its size itself to the one of your document like <object> does, so you would have to set it yourself.
Either you know it before hand, and can just set it in the CSS,
either you set it as an attribute and your svg files are from the same-origin, in which case you can grab it from the iframe's contentDocument,
either you load it in an Image and grab it from there.
<img src="./img/pic.png">
<img src="./img/pic.svg">
Locally the two lines above work and display two pictures but once deployed remotely (for example, on a ftp) only the png displays (permissions are set to the most permissive for both files).
Any idea?
By the way, it seems any sort on svg cannot be display, I can access to pic using its path but loading in html does not work.
I'm sure this is real stupid.
Seems weird as SVG support is pretty good on a lot of browsers
http://caniuse.com/#search=svg
This could be down to your server, If it's an Apache server you could try adding
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
to the .htaccess.
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.