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.
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
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.
I've been playing around with different methods of displaying PDFs with the goal of finding a way of changing the grey background to white.
Here is a simple example using object tags (I get the same result with embed and iframe tags):
http://jsfiddle.net/5CALy/7/
HTML
<object data='https://dl.dropboxusercontent.com/u/58922976/test.pdf#view=FitH&scrollbar=0&toolbar=0&statusbar=0&messages=0&navpanes=0'
type='application/pdf'
width='84%'
height='110px'>
<p>It appears your Web browser is not configured to display PDF files.
No worries, just <a href='https://dl.dropboxusercontent.com/u/58922976/test.pdf'>click here to download the PDF file.</a></p>
</object>
Thanks!!
The OP Link actually now succeeds by default, here is the view of requesting no pdf where response is with image on white background
https://dl.dropboxusercontent.com/u/58922976/test.pdf
However it is normal to use a dark or light presentation background for images PowerPoints pdf other viewing
It is entirely up to the viewer
This browser only opens files in external mode
Or why not rainbow friendly?
But for the answer, ask users to do it themselves
For Firefox users there is a hack see How can I enable dark mode when viewing a pdf file in firefox https://stackoverflow.com/a/74564207/10802527
You can but cannot!
I mean,
Every browser (Chrome, Edge, Firefox, Safari, etc.) use their own PDF engine for displaying embedded PDF Files. You can use JavaScript or jQuery to detect the element which has the grey color and change it to white but you'll have to do this for every browser available in the market which is nearly impossible. Moreover, Web Browsers do not provide you an API for this.
The only better solution for this is to make your own PDF Viewer:
You can use this https://mozilla.github.io/pdf.js/ opensource package (By Mozilla) to get it done.
Welcome!