I have several .svg files in my web project.
I add most of them to the html page using the "embed" tag, like this:
<embed src="css/svg/multi.svg" type="image/svg+xml"/>
There are two problems I'm trying to solve:
When entering the website it downloads each .svg file separately. I would like them all to be downloaded together (one round trip).
Some of the svgs are being reused so the same svg is downloaded several times.
What I thought of doing is putting all svgs in one file and referencing them with an id or something like that. Something like "defs" and "use" but it works only in firefox so i need some other solution.
Any other solution which solves those problems is good as well (it doesn't have to be in one file)...
Thanks.
If more browsers supported the #svgView url syntax (part of SVG 1.1) you could have used that perhaps, see this example (works in Opera, Chrome, Safari, IE9).
Related
Can anyone suggest me how to create a PDF thumbnail which shows a miniature preview of the pdf file in html5. Something similar to the behaviour seen in Gmail while uploading pdf files.
Currently am using embed element, but it gives me unnecessary scrolls and not able to zoom in the file,which works across all browsers. If I set #zoom it works only in chrome.
This can be achieved using https://mozilla.github.io/pdf.js/
If the thumbnails are not compatible in browsers like IE, including compatibility.js from the same library would solve the problem.
We have to create a canvas and use the library utility to get the thumbnail in the canvas.
There's a section on my site where I display data from another site, using:
<embed src="URL"></embed>
I recently discovered that this works fine for most people, but that Firefox users get an error telling them they need to install a plugin. I searched around for a solution and people seemed to find that specifying the MIME type worked:
<embed type="text/html" src="URL"></embed>
But this isn't working. I can switch to iFrames, but I dislike how they display the information. Any other suggestions?
Per spec, embed elements are only handled via plug-ins or an SVG renderer (and in the latter case behave just like iframe).
You can do <object data="URL"></object>, but of course that will also behave like iframe...
I've been having the same issue with an html5 game. It appears that Firefox doesn't support if you want to embed an external html file. This tag should only be used for plugins.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed
To embed an external html file into another page in Firefox you have to use iframe or object tags instead. For the interactive nature of my external page I used iframe and it worked in IE / Chrome and FF, I had to make the margins larger than the game itself.
I've seen that there is another post with a similar name, but it doesn't help me.
I use this:
<embed src="../xml/menu.xml" />
to embed some XML content in a div from an HTML file. It is working (the content is displayed) in Google Chrome and Internet Explorer, but not in Mozilla Nightly.
Do you know how to make it work even for Nightly?
Use <object> instead. Per spec, <embed> will only show content handled via plug-ins and SVG, not random document types like XML.
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
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