Introduction to the use of SVG and SVG predefined shape elements in HTML

Comments: If the svg code is in html, it is easier to write javascript to control the transformation of the image. The following describes some predefined shape elements of svg, for more information, see <embed>, <object>, or <iframe>.

The Code is as follows:
<Embed src = "rect. svg" width = "300" height = "100"
Type = "image/svg + xml"
Pluginspage = "http://www.adobe.com/svg/viewer/install/"/>

The pluginspage attribute points to the URL of the downloaded plug-in.

The Code is as follows:
<Object data = "rect. svg" width = "300" height = "100"
Type = "image/svg + xml"
Codebase = "http://www.adobe.com/svg/viewer/install/"/>
<Iframe src = "rect. svg" width = "300" height = "100">
</Iframe>

<Iframe> is an earlier tag among the three, which is currently used less. More <embed> labels are used.
At the same time, we can also directly write svg into HTML files:
In this case, you need to first introduce the SVG dtd file:

The Code is as follows:
<? 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>

Enter the required code in the <svg> label:

The Code is as follows:
<Svg width = "100%" height = "100%" version = "1.1"
Xmlns = "http://www.w3.org/2000/svg" onclick = "ccc ();">
<Ellipse cx = "240" cy = "100" rx = "220" ry = "30"
Style = "fill: yellow"/>
<Ellipse cx = "220" cy = "100" rx = "190" ry = "20" id = "w1"
Style = "fill: white"/>
</Svg>

If the svg code is in html, it is easier to write javascript to control the transformation of the image:

The Code is as follows:
<Script type = "text/javascript">
Function ccc (){
Var a = document. getElementById ("w1 ");
A. style. fill = "red ";
A. setAttribute ("cx", "150"); // set the value
A. setAttribute ("ry", "50"); // set the value
}
</Script>

The following describes some predefined shape elements of svg:
Rectangle <rect>
Circle <circle>
Elliptic <ellipse>
Line <line>
Line <polyline>
Polygon
Path <path>