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.
Related
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.
Given an SVG that references a PNG image using <image xlink:href="http://... why can't I use the SVG as background image with CSS? If I call the SVG directly in the browser (tested with Chrome and Firefox), it shows me the SVG with the PNG and the debugging tools (Network tab) also show that the external graphic was called. Using an <object> tag in HTML pointing to the SVG also works. What also works is embedding the PNG into the SVN using base64, that allows me to use the SVG a background image, but not if the image is a path. Test page, CSS, SVG and the image I am linking to in the SVG are all on the same server.
The functionality is documented in the SVG Integration specification
When you use SVG as a background image its functionality is that of an
animated image document
It therefore runs in secure animated mode.
And one of secure animated mode's restrictions is that external references are not allowed.
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 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.