SVG Rendering Method You can also use other methods to render SVG. The following table summarizes these methods.
Method |
Recommended File Extension |
Required browsers |
Advantages and disadvantages |
Inline HTML5 |
. Html |
Supports built-in SVG browsers in HTML5, such as Windows Internet Explorer 9. |
Advantage: You can make full use of html5. Disadvantage: you may need to implement callback code for browsers that do not support inline SVG in HTML5. |
Inline XHTML |
. XHTML |
Local browsers that support SVG, such as Internet Explorer 9. |
Advantage: Many browsers currently support XHTML-based inline SVG. Disadvantage: HTML5 cannot be used for construction. |
Independent |
. SVG |
Local browsers that support SVG, such as Internet Explorer 9. |
Advantage: You can use the "embed" method to easily embed existing content. Disadvantage: All html/XHTML structures cannot be used. |
Embedded |
. XHTML |
Local browsers that support SVG, such as Internet Explorer 9. |
Advantage: embedding makes implementation and callback relatively simple. Disadvantage: it may be difficult to write scripts for SVG content embedded in pages. In addition, some browsers may not support all forms of embedding, suchimg Element or through CSSbackground-image Style references SVG. |
Plug-ins |
. Html |
It may be locally supported or not locally supported by SVG browsers. |
Advantage: the browser does not need to support SVG locally. Unify the SVG behavior between browsers. Advantage: plug-ins may cause browser instability, W3C SVG specifications may be outdated, and/or plug-in providers no longer support plug-ins (such as the Adobe SVG Viewer plug-in ). |
Note:Windows Internet Explorer 8 does not support SVG locally, so it requires a plug-in to render SVG. However, by implementing the appropriate callback code (as described later in this topic), you may not need the SVG plug-in.
The next section describes the examples of the above five methods.
Inline HTML5 The following example demonstrates a basic inline HTML5 SVG template. This sample code creates a circle in the SVG tag and registers the click event. When you click the circle, its size changes.
<!DOCTYPE html>
<!DOCTYPE html>
Element tells the browser that this is an HTML5 document.<meta http-equiv="X-UA-Compatible" content="IE=9"/>
Element is used to force Windows Internet Explorer to ie9 standard mode, so that it can be correctly displayed on an Intranet website. Please note that HTML5 applications cannot be appliedhtml
Element
xmlns="http://www.w3.org/1999/xhtml"
Features.
PromptAs recommended in the preceding tablehtml
File Extension save this example.
Note:For HTML5, SVG content overflows by default, but it is hidden in XHTML.
Inline XHTML
Because SVG is based on XML, you can use the correct namespace to add SVG to the XHTML document, as shown in the following basic inline XHTML template.
<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This code example creates a 200x200 pixel view area and draws a red circle with a black border with a radius of 50px. If you move the mouse pointer over the displayed circle, the circle radius is doubled. If you move the mouse pointer from the displayed circle, the current circle radius is halved. The rectangle element is used to outline the border of the area.
PromptAs recommended in the preceding tablexhtml
File Extension save this example.
Inline XHTML works normally, but requiresxhtml
File Extension and namespace. Before HTML5 appeared recently, inline XHTML was the best choice.
Independent SVG
SVG was originally designed to usesvg
File Extension to provide vector graphics file formats. The following example demonstrates a basic independent SVG template.
<?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"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onclick="doSomething(evt)"> <script language="javascript" type="text/javascript"> <![CDATA[ function doSomething(evt) { var myRect = evt.target; if (myRect.id != "redRect") { alert("Please click on the rectangle"); document.location.reload(); } var myWidth = myRect.getAttribute("width"); if (myWidth == 50) myRect.setAttribute("width", 100); else myRect.setAttribute("width", 50); } ]]> </script> <!-- Outline the SVG viewport. --> <rect x="0" y="0" width="100%" height="100%" style="fill: none; stroke: black; stroke-width: 5px;" /> <rect id="redRect" x="100" y="100" width="50" height="50" fill="red" stroke="blue" /> </svg>
This code example uses an internal click to alternately expand or contract the red rectangle. If you click outside the red rectangle, a warning is displayed and the page is reloaded.
As described above
In the XML Element (the first line ),standalone="no"
Feature indication,DOCTYPE
The DTD specified in the element is not only used for verification. You do not need to specifystandalone=”no”
Because this value is assumed when an external tag Declaration exists (DTD in this example.
PromptAs recommended in the preceding tablesvg
Save this example with the extension.
Embedded
You can useiframe
,embed
,object
And
img
Elements and CSSbackground-image
Style: Embed SVG into a webpage. Note that not all of these embedding methods can be used in a specific browser. The following example demonstrates the basic SVG template, which usesobject
Element.
<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
PromptAs recommended in the preceding tablexhtml
File Extension save this example. You must also note that the SVG file is embedded (in this examplestandAlone.svg
) Must have
svg
File extension.
Assume that the SVG file does not passimg
Element embedding is not embedded as a CSS background. embedding an SVG file usually has its own programming method, unless the embedded SVG file comes from the same domain as the embedded page, otherwise, embedding does not provide a simple method for programmable interaction between an embedded SVG document and an embedded HTML document. We recommend that you do not use this method when programming SVG on a web page, but this method can be used to easily insert an SVG file and, local Internet Explorer 8 does not support SVG.
Note:Some browsers cannot support all forms of SVG embedding, so be sure to test across all target browsers.
Plug-ins
The following lists the reasons why plug-in solutions are not recommended:
- Adobe no longer supports the main SVG browser plug-in Adobe SVG viewer.
- Most modern browsers support SVG locally.
- Third-party plug-ins may cause browser instability, or plug-in providers no longer provide support for them.
Summary
The following table summarizes the templates viewed in this topic.
Method |
Template |
Recommended File Extension |
Recommended servers Mime Type |
Inline HTML5 |
<!DOCTYPE html> |
. Html |
Text/html |
Inline XHTML |
<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
. XHTML |
Application/XHTML + XML |
Independent |
XML<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- SVG markup here. --> </svg> |
. SVG |
Image/SVG + XML |
Embedded |
<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
.Xhtml#.html |
Text/html |
Plug-ins |
Not recommended. |
. Html |
Not recommended. |
Note:Microsoft Internet Information Service (IIS) is not used by default.
.svg
Provides services for files with file extensions. To request from IIS.svg
Web page, you must.svg
"MIME type" ingimage/svg+xml
.
For browsers that support SVG and HTML5 locally, it is best to use the inline HTML5 method.
For browsers that do not fully support HTML5 but support SVG locally, use the inline XHTML or independent method, followed by the embedding method (if applicable ).
For browsers that do not support SVG locally, it is recommended to implement corresponding callback measures (for example, rendering static images of SVG images ).
Use<meta http-equiv="X-UA-Compatible" content="IE=9"/>
Enables Scalable Vector Graphics (SVG) for HTML applications (HTA ). For more information, see Introduction to HTML applications (HTA.
Related Topics
-
How to Use SVG for scaling and moving
-
SVG
-
SVG reference