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.
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.
If you try to open the audio file in a browser, the browser will create the following code:
<video controls autoplay name="media">
<source src="https://stopmusic.net/_ld/65/6549_B.B.E-Seven_Day.mp3" type="audio/mp3">
</video>
Why does he create the markup using the <video> tag?
If we look at the specification, we will see the following:
When an image, video, or audio resource is to be loaded in a browsing
context, the user agent should create a Document object, mark it as
being an HTML document, set its content type to the computed MIME type
of the resource (type in the navigate algorithm), initialize the
Document object, append an html element to the Document, append a head
element and a body element to the html element, append an element host
element for the media, as described below, to the body element, and
set the appropriate attribute of the element host element, as
described below, to the address of the image, video, or audio
resource.
As you can see when opening a particular media file in a browser, the browser creates the specific code associated with it. And in this case, for some reason, the browser does not create the code associated with it. Why it happens? Is this an implementation specification error?
I am assuming that this is something that Google Chrome does autonomously, I feel as though that they have their own proprietary algorithm that equates file types to specific tags such as <video>,<audio> and <img>. I would also think that a .mp3 file would be opened by the <audio> tag and nothing else because it is an audio file. After considering these things, it makes no logical sense that this feature would perform the things that it does on the production side of things. One would assume that any file ending with the extension of 'mp4' to use the <video> tag. I think that this is a prime example of a feature that they were finishing up and decided to push it anyways because it worked and did not require any more effort.
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 +
I am using an <object> tag to display document previews on my website.
Essentially, I pull out the document URL and type from my database, and give it to the <object> tag as follows:
<object data="url" type="type" width="100%" height="100%">
<p>Fallback in case the browser couldn't display the document</p>
</object>
Every time the user selects a different document, I just replace the two parameters on the same <object> tag (it's placed in a modal window).
Everything works fine, swapping documents works flawlessly, as long as the browser can render the documents (so, for example, moving from image/jpeg to application/pdf and back is fine).
However, as soon as one document cannot be rendered by the browser for any reason (e.g. the user doesn't have a PDF plugin), then all the following documents don't work either.
Is there any way I can reset the <object> tag, to be able to start showing documents again, without refreshing the page?
Otherwise, do you have any other suggestions to implement a document viewer other than with an <object> tag?
Thank you very much!
Solved by cloning the <object> element and injecting it into the DOM multiple times.
With jQuery:
var el = $("object");
el.clone().appendTo(el.closest("div"));
el.remove();
Thanks to #GuilhermeSilva for the input.
I'm building a WSS site which has to show SVG files stored on WSS.
I'm trying to use <object> tag to show it and it doesn't show, however, if I use <embed> it works ok. Im'using IE8 and IE7
I've been reading and everyone tells IE prefers <Object> over <embed>, but in WSS it doesn't work this way.
To display the file I'm using a web content editor webpart with this code:
<object type="image/svg+xml" data="/samples/sample.svg"
name="owMain" width="400" height="150">
</object>
Any clue??
I've found that it's not actually necessary to embed SVG as an object.
If you use the SVGWeb JavaScript library, you can actually put your SVG into a normal Content Editor Web Part via the Source Editor, and manipulate the SVG elements via JavaScript.
The library can also work with a referenced SVG file as an object, but I haven't tried that option.
The library is hosted on code.google.com
You cannot add object tags to the html content of a page in WSS. The issue is that the object tag can be used in lots of very bad ways, so it is stripped out by the underlying engine.
You have found that the content editor webpart does not suffer from the same limitations.
The first step, if you haven't already, is to confirm that the HTML content in the response is as you expect (e.g. view source). If it isn't then you've found your issue. If it is, the next step might be to use a debugging proxy like Fiddler to confirm that all of the related requests are being made and handled as you expect. If they're not then you've found your issue (e.g. security). If they are then by the process of elimination you can safely conclude that either the markup or the browser is lacking.
Is it me or IE does not support SVG? Well, it kinda does but it is tricky and it's to draw, not to show svg files. ... If you open with FF can you see what you are expecting?
added
I made an svg draw in IE ... it's not the same, I know, but it's something that you can read and test: stackoverflow.com/questions/536676
I managed to do this on IE7/8 with the following Html:
<embed width="600" height="450" id="objMapView" src="http://XXXXXXXX/file.svgz"
type="image/svg+xml" name="objMapView" border="1"/>
It works Ok bur requires adobe's SVG Plugin