SVG is a vector, zoom are not distorted. This vector can be used as a label or as some pictures with interactive effects. When we use SVG as part of a web page, there are several ways:
First, use the embed tag
<embed src="SVG路径" type="image/svg+xml"/>
Second, the use of object labels
<object data="SVG路径" type="image/svg+xml"/>
Third, the use iframe
<iframe src="SVG路径"></iframe>
Fourth, the direct use img introduced svg
< IMG the src = "the SVG path" />
Fifth, as the svg background, namely: svg introduced with background
background-image: url ( "SVG path");
Six, directly embedded in Web pages
<body>
<div>
<svg>....</svg>
</div>
</body>
Seven of using JQuery load () or come loaded ajax
For example, we want to svg file loaded into the <div> in
<div id="div"></div>
1, jQuery's load:
With the load jQuery then you should write in js
$("#div").load("xxx.svg");
2, ajax load must be written in js in:
$.ajax({
url:"xxx.svg",
type:"get",
dataType:"html",
success:function(data){
$("#div").html(data);
}
});
Eight, on the basis of the fourth method, for compatibility with earlier versions of the browser, add a svg.js
1, first introduced by script tags svg.js:
<script type="text/javascript" src="svg.js"></script>
2, followed by embedding in a div svg labels directly:
<body>
<div>
<svg>....</svg>
</div>
</body>
This can effectively lower version compatible with IE, IE9 from the start.
These are my look summarize, if there is something wrong, please comment and I will promptly see the changes.