From my research, i understand there are three ways to place an svg file inside HTML:
using embed:
<embed src="plot1.svg" width="500" height="320" type="image/svg+xml" />
using object:
<object data="plot1.svg" width="500" height="320" type="image/svg+xml" />
using iframe:
<iframe src="plot1.svg" width="500" height="320"> </iframe>
I've experimented with all three on a test rig (django built-in dev server, rendering the pages in Firefox 3.6). Under this obviously sterile environment, i haven't noticed any difference between the three--w/r/t performance or resolution.
My Question is whether one of these is better than the other two, and if so, which one. The answer might of course depend on the facts, which i've tried to limit to what's relevant:
We frequently display data (e.g, time series) on our website, usually created in response to some user action; based on that user action, a call is made to a database, the data returned is crunched and sent to the plotting engine, which renders a static image which is then embedded in the page--very standard stuff.
This works fine, but i would like to add some interactive features to these charts (e.g., tooltips, hyperlinked axis labels, highlighting a group of points w/in a plot). Some of the charts are fairly sophisticated (e.g., multi-panel conditioning) and i have not found a javascript chart library that includes these features. I finally settled on using the same plotting library (Lattice in R) but rendering each chart in svg and then adding the user-interaction features in a post-processing step, which consists essentially of javascript functions which manipulate the XML directly.
<embed> I would generally avoid. It's deprecated in HTML4, doesn't allow proper fallback content, and has had a selection of problems in IE.
<object> will allow you to include fallback HTML content for browsers without SVG support. <iframe> will fall back to prompting you to download the .svg file. Which of those is best probably depends on the application.
The other alternative, for modern browsers (including IE from version 9) is to serve your web page as application/xhtml+html and include the SVG elements in the page itself.
for me the best way is this
<svg id="circle" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<image x="0" y="0" height="60" width="60" xlink:href="huge-red-circle.svg" />
</svg>
You can see the example here
source: http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial
Related
I have the following problem: I have a frontend application A that authenticates, sets up a reverse proxy, and then forwards to a separate application B I don't control.
I would like to add decorations to the resulting page of the B application, for example adding a button "logout", but I can't modify B's code or templates.
Is there some magic trick I don't know about to obtain this result?
Your case, as discussed in the comments, leaves you open for a couple options:
Wrap application b inside an <iframe>
Load application b inside an <iframe>, while keeping a custom navigation bar in the top on a fixed position. This would be possible if the <iframe> is hosted on the same location as application b. This would avoid tampering with the original code of application b, while still giving you freedom to alter the user experience.
Example:
<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" width="400" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
(variation on this):
<object data="http://www.web-source.net" width="600" height="400">
<embed src="http://www.web-source.net" width="600" height="400"> </embed>
Error: Embedded data could not be displayed.
</object>
Alternatively, this is a great related question with some viable solutions:
Alternative to iFrames with HTML5
Insert custom JavaScript / CSS inside application b
If you have control over the code of application b, you could include a small JavaScript file that automatically inserts some absolute elements to enhance the user experience. It would avoid to ruin the original code, but it's not really a clean solution
Modify the existing code
It's an option, but you shouldn't if you're not comfortable to edit it. Because you'll most likely waste a lot of time on it.
Good luck with your application!
I am working on an interactive SVG map that is not stored in a separate file, but defined directly in the html file like this:
<svg id="map" ...>
<path d="M1336.5,2969.1c-10.8 ... "/>
</svg>
I want to display old version of the map (div containing plenty of images, each of them changing on hover) in all the browsers not supporting SVG. Is it possible to do without using JavaScript?
So far I've found couple of solutions showing how to use fallback for svg files, for example:
<object type="image/svg+xml" data="svg-ok.svg">
<p class="warning">
Your browser does not support SVG!
</p>
</object>
But how to do it when both maps are part of the DOM, not just pictures in separate files?
I am embedding a pdf file in rails view using embed tag, i have write it in simple html and its working fine but i need to write this tag in rails conventions.
The code is like:-
<object data="file1.pdf#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf" width="100%" height="720">
<embed src="file2.pdf#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf" width="100%" height="720" />
</object>
It seems Ruby uses print to output to a client...
print 'Hello World!'
There is no "embed tag", that is an "object element"; using the correct terminology not only makes you look more professional to others though also greatly improves your ability to communicate in fewer steps. 99.9% of the time people are referring to an element, it is the whole element. A very rare correct reference to a tag would be something like, "In XHTML does the meta element self close or does it have an end tag?" (e.g. < meta / > or < meta >< / meta >).
Internet Explorer (as usual) has a bug that is unable to display flash objects correctly in certain situations such as with your code, I'm not sure if this applies to a PDF but they're both Adobe products so best to try this in IE7 to be sure. You need to have a movie parameter element.
Here is everything put together along with Ruby...
<object class="pdf" data="something.pdf" type="application/pdf">
<param name="movie" value="something.pdf" />
<p>This is alternative content that displays if the plugin is not suppoted.</p>
</object>
Another very important clarification: you need to have a height/width set or at least a minimum height and width set otherwise certain browsers (e.g. Firefox) will not load the resource. In fact when I change themes on my site if the dimensions change in the middle of the music playing the whole Flash object resets. Not such a big issue for a PDF though if it forces the browser to reload the PDF it may annoy your visitor and it's ALL about making sure your visitors aren't annoyed by doing things right the first time.
Lastly alternative content is any (X)HTML that appears inside the object element. You can add a link to download a PDF plugin if the client's browser doesn't already support one.
Hope this helps, feel free to ask for clarifications if need be.
I want to display the contents of PDF file in a webpage. I don't want the browser to download when the user clicks.
Use the Google PDF Viewer:
<iframe src="http://docs.google.com/gview?url=URL_TO_YOUR_PDF&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
You could embed the adobe acrobat plugin inside your markup. Of course the user must have installed some the appropriate plugin in his browser for this to work. Another possibility is to set your server side script to send proper HTTP headers to instruct the browser embedding the file.
You aren't going to be able to control the browser config from the server side. Some people's browsers will be configured to show PDFs inline, and others won't.
What you can do (reading this as a programming question) is to convert the PDF to HTML and deliver the results. Apache PDFBox might prove useful for such an effort.
Use an <iframe>.
<iframe src="/url/to/file.pdf" width="500" height="300"></iframe>
Or an <object> when you're actually using XHTML.
<object data="/url/to/file.pdf" type="application/pdf" width="500" height="300">
alt : file.pdf
</object>
Note that the above is not supported by the ancient browsers, the above construct would let them degrade gracefully to a plain vanilla link.
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