To access an SVG file from a Web page, use the <embed> tag or <a href...> to link to it. Also consider the tradeoffs between the two methods.

Issue
Following are instructions on using SVG code on a Web page

Solution
To Embed:
- save the code with a file name ending in .svg (eg. test.svg)
- add the following html to your Web page
<EMBED SRC="test.svg" WIDTH="1000" HEIGHT="1000">

To Link:
- save the code with a file name ending in .svg (eg. test.svg)
- add the following html to your Web page
<A HREF="test.svg">Click here to open the SVG file</A>

Tradeoffs:
The embed tag forces you to set the height and width of the displayed SVG graphic. If you want to modify the size of the SVG graphic using JavaScript, then link to it. If you want to set the background color of the browser window that is visible around the SVG graphic, you have to use the embed tag on an HTML page and set the background color of the HTML page. You can set the background of the SVG graphic by placing a large colored rectangle at its bottommost layer.

Was this Knowledgebase document helpful? Yes  No