I try to make an HTML that references to an SVG file, that SVG file is interactive (CSS hover):
If I use <img src="algerie.svg"> I loose the interactivity.
If I open this image in a new tab using dev tool, it becomes interactive.
If I use:
<svg viewBox="0 0 512 512">
<use xlink:href="algerie.svg"></use>
</svg>
Then nothing is shown, and worse, Chrome or Firefox do not detect the file in the network dev tool.
You should embed the image by using <object> tag:
<object data="algerie.svg" type="image/svg+xml"></object>
Refer to this question for the details: Do I use <img>, <object>, or <embed> for SVG files?
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 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've got an .svg file with some code in it.
If I just put that code in my HTML with the <svg> tag it works fine.
The problem is is that I've got quite a lot of code in my .svg and I don't want to put all that code in my HTML. So I've made an .svg file and tried to link it, but it didn't seem to link.
Does anyone know how I'm supposed to link an .svg file to a HTML file?
The easiest (and probably most correct) way of doing this is to simply put your SVG file as src in an <img> tag as if it were any other format.
Keep in mind that this might not work in some older browsers (this is the problem is general with SVG, not just with using it in an img tag).
Another option is using it inside an <object> tag, as seen in this article (which also breaks down the two options and the drawbacks of both):
<object type="image/svg+xml" data="kiwi.svg" class="logo">
Kiwi Logo <!-- fallback image in CSS -->
</object>
In this case, your retain the ability to affect the parts of your SVG with CSS - which may or may not be what you want.
I would usually use it inside an using <img src="link to svg file" />
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PGNpcmNsZSBpZD0iY2lyY2xlIiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHI9IjE0IiBjeD0iMTUiIGN5PSIxNSIvPjxjaXJjbGUgaWQ9ImRvdCIgZmlsbD0iIzMzMyIgc3Ryb2tlLXdpZHRoPSIwIiByPSIxIiBjeD0iMTUiIGN5PSI3LjUiLz48cGF0aCBpZD0iaSIgZmlsbD0iIzMzMyIgc3Ryb2tlLXdpZHRoPSIwIiBkPSJtMTIuNSwxMS41bDMuNSwwbDAsMTFxMCwwLjUgMC41LDAuNWwxLDBsMCwxbC01LDBsMCwtMWwxLDBxMC41LDAgMC41LC0wLjVsMCwtOS41cTAsLTAuNSAtMC41LC0wLjVsLTEsMGwwLC0xeiIvPjwvZz48L3N2Zz4=" />
How to Add Scalable Vector Graphics to Your Web Page
for example you can use :
<object type="image/svg+xml" data="image.svg">Your browser does not support SVG</object>
I have numerous a elements within the svg linking to other pages.
The svg loads into a browser as a standalone and the links work fine.
But as an object in an html page, nothing.
The problem is exactly as if I had xmlns:xlink="http://www.w3.org/1999/xlink" missing from the svg, but it's there!
Bizarre, I have found the problem.
<object data etc.><span>something</span></object>
SVG xlinks work ok, but with
<object data etc.></object> <span>something</span>
xlinks dont work. Why this is so, I cannot figure out.
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