To embed an SVG file into a webpage, you can use <Object> to include it in the HTML of the webpage, for example, the following HTML document:
<HTML>
<Head> <title> SVG demonstration </title>
<Body>
<H2 style = "text-align: Center"> SVG demonstration </H2>
<P> A page may have other code besides the SVG image. </P>
<Object type = "image/SVG + XML" Data = "mysvg. SVG"
Width = "300" Height = "200">
</Object>
<P> using objects allows the browser to decide what to display. </P>
</Body>
</Html>
Save it as mysvg.html and put the mysvg. SVG file and the HTML file in the same directory. Drag mysvg.html to the IE browser and open it locally to see the effect.
Put the two files on the server and open the HTML page in the IE browser of the client. You will find that the SVG file on the page cannot be viewed correctly. In order to test, I found another machine and found that the Web page could not be viewed correctly. What's the problem? Browser problems? No time, and I am too lazy to test it in other browsers.
A closer look at the HTML code reminds me of <embed>. The object and embed are two HTML tags. They first appeared in two browsers: Internet Explorer and Netscape. <Object> is a more formal tag than <embed>. Their functions are similar, but there are still some differences. For example, if the size of the embedded file is too large, <Object> only scales It, and <embed> crops it out.
Since <Object> is different from <embed>, what if <embed> is used? Modify the HTML file:
<HTML>
<Head> <title> SVG demonstration </title>
<Body>
<H2 style = "text-align: Center"> SVG demonstration </H2>
<P> A page may have other code besides the SVG image. </P>
<Embed src = "mysvg. SVG" width = "300" Height = "200"
Type = "image/SVG-xml"/>
<P> using objects allows the browser to decide what to display. </P>
</Body>
</Html>
Save the file, open the client browser, and enter the URL to view the SVG file contained in the webpage correctly.
Why? Why can I use <embed> instead of <Object> to find the SVG file? Is <Object> embedded with local resources, and <embed> embedded with server resources? Maybe so, maybe it's my ie problem. If you know, let me know.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
