I need to embed a SVG file in a HTML document. File Example.svg is in the same directory of the HTMl file.
Using the following code, no SVG is inserted and nothing shown, but looking at network debut panel in Chrome DEV tools i can see the SVG is loaded.
What could be wrong and how to fix it?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<svg width="250" height="250">
<use xlink:href="Example.svg"></use>
</svg>
</body>
</html>
Content of my SVG file https://jsfiddle.net/900xLbor/
Same problem here: https://jsfiddle.net/900xLbor/2/
MDN article about xlink:href attribute on the <use> element :
An <IRI> reference to an element/fragment within an SVG document.
In other words, you need to set the id of the element to use into the href :
<use xlink:href="Example.svg#svg2"/>
Here is a plunker demonstration
Related
I want to create a line with svg in html and show in old browsers like this :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<polyline points="10,10 50,10 150,100 250,100 300,150" fill="#fff" stroke-width="2" stroke="rgb(255,0,0)"/>
</svg>
</body>
</html>
This code will show in new browsers normally but in IE6 it doesn't show anything.
please help me how can i fix it to show my svg code in IE6
This page : https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
said I must to download Adobe SVG Viewer 3.03 plugin to view svg in IE4-IE8, but i can't find plugin.
Please help me
I have a page, that includes several SVG files. To synchronize the styling of those SVG files I wanted to create a single stylesheet to hold all styling information.
However, when including the SVG like below, the CSS wont get applied. Anybody having a solution to this or is it just not possible to link to other (CSS) files in an SVG referenced by <img src="..." />?
See the example code below. When loading pic.svg directly in the browser, all styles get applied and one can see a green rectangle. But when opening page.htm all there is to see is a black rectangle. So obviously none of the defined styles was applied.
page.htm
<!DOCTYPE html>
<html>
<body>
<img src="pic.svg" style="width: 100px; height: 100px;" />
</body>
</html>
pic.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet type="text/css" href="styles.css" ?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
>
<rect x="10" y="10" width="80" height="80" />
</svg>
styles.css
rect {
stroke: black;
fill: green;
}
EDIT
From an answer, that for a short time appeared here, I got this link to the spec and the following citation. In my opinion this states, that the above code should work!
Stand-alone SVG document embedded in an HTML or XML document with the ‘img’, ‘object’ (HTML) or ‘image’ (SVG) elements
[...]
Citing from your link "Style sheets defined anywhere within the referenced SVG document (in style elements or style attributes, or in external style sheets linked with the style sheet processing instruction) apply across the entire SVG document, but do not affect the referencing document (perhaps HTML or XHTML)."
An alternative is to use the <object> tag in your html :-
<object type="image/svg+xml" data="pic.svg" width="100" height="100"></object>
It's a BIG shame the <img> tag won't work. I don't want to mess about hacking with converting the SVG to a data URI. It's to do with cross-site vulnerabilities on indirectly loading resources and the use of an "Open Redirector".
Note that in my testing lastnight, the <img> tag method DOES work in IE10, but neither Chrome nor FireFox.
I don't know why <object> is allowed and <img> isn't. An oversight?
For privacy reasons images must be standalone files. You can use CSS if you encode the stylesheet as a data uri. E.g.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet type="text/css" href="data:text/css;charset=utf-8;base64,cmVjdCB7IA0KICAgIHN0cm9rZTogYmxhY2s7DQogICAgZmlsbDogZ3JlZW47DQp9" ?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
>
<rect x="10" y="10" width="80" height="80" />
</svg>
There are various online converters for data URIs.
The answers above are great. I found it simplest, though, to just embed the raw SVG tag itself on my webpage. This allowed the SVG to inherit font-family styles declared in my page's CSS without issue...
Ok, so I know how to place a static SVG into html:
<object data="your.svg" type="image/svg+xml">
<img src="yourfallback.jpg" />
</object>
But, how do I place the actual SVG document (eliminating the link to save an http request):
<object data='<path d="m315.9,581.1c.....1,22.8z" fill="#fff" stroke="#4ea3ff" stroke-miterlimit="10" stroke-width="36"></path>' type="image/svg+xml">
<img src="yourfallback.jpg" />
</object>
I can't seem to get it to work.
You can make a data URI of the svg if you want to keep using the object tag, see this answer for the details.
Just paste in the svg. But you'll need to start it with an <svg> tag though, you can't just use a raw <path>
<!DOCTYPE html>
<html>
<body>
<svg height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
I'm including a SVG document with a object tag in a webpage.
<html>
<head>
<title>CA/7GroupPDZBP2</title>
</head>
<body>
<object data=".\toto.svg" height="400" src=".\toto.svg" type="image/svg+xml" width="100%"></object>
<body>
</html>
In my toto.svg document i have some links like this :
<svg style="background-color:transparent;" version="1.1" viewBox="0 0 1925 476" width="1925" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<a style="cursor:pointer;" xlink:href="page2.html">
<text>Tony</text>
</a>
</svg>
However if i click on the link, only the content of the object tag is replaced by the destination link in my page. The whole page is not refreshing.
Anyone knows how to solve this problem ?
Thanks for your help,
Cuva
Specify target="_top" on the link according to http://www.w3.org/TR/SVG/linking.html#Links
HTML5 supports the <svg> tag, allowing to embed SVG into HTML.
Digging a little deeper, can I nest some HTML inside my <svg> fragment? For example, I'd like to put a CSS'ed <table> in some part of my SVG graphics.
I made a small test and Chrome12 didn't like the HTML <p> inside the <svg>.
Is there some technique to make it work (such as maybe an html container tag?)?
Yes, with the <foreignObject> element, see this question for some examples.
Alternatively, if you have an html5 document you can also use CSS positioning and z-index to make parts of html visible where you want laid out on top of the svg. If you do it like that you don't need to nest the html inside the svg fragment. This will give you the most consistent behaviour across browsers in my experience.
Copied from bl.ocks.org (thank you, Janu Verma)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML inside SVG</title>
<style type="text/css"></style></head>
<body>
<div>I'm a div inside the HTML</div>
<svg width="500" height="300" style="border:1px red solid" xmlns="http://www.w3.org/2000/svg">
<foreignobject class="node" x="46" y="22" width="100" height="100">
<div style="border:1px green solid">I'm a div inside a SVG.</div>
</foreignobject>
<circle cx="100" cy="160" r="50" fill="blue"></circle>
</svg>
<div>Interesting! But you a Foreign Object.</div>
</body>
</html>
UPDATE
Note that there is a 'camel error' in the above - it's supposed to be foreignObject (capital O), not foreignobject. It doesn't matter if the misspelling is in 'straight' HTML/SVG. But if you use JavaScript (.createElementNS), then it won't work without proper camel case (April 2020)
Foreign Objects are not supported on Internet explorer. Please check ForeignObject