The svg element can be used to embed an SVG fragment inside the current document (for example, an HTML document) as long as <svg> is not the root element. This SVG fragment has its own viewport and coordinate system.
Usage context
| Categories | Container element, Structural element |
|---|---|
| Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements Shape elements Structural elements Gradient elements <a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> |
Example
Consider the following SVG image (representing the national flag of Italy):
<svg xmlns="http://www.w3.org/2000/svg"
width="150" height="100" viewBox="0 0 3 2">
<rect width="1" height="2" x="0" fill="#008d46" />
<rect width="1" height="2" x="1" fill="#ffffff" />
<rect width="1" height="2" x="2" fill="#d2232c" />
</svg>
It could be included in an HTML5 document as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML/SVG Example</title>
</head>
<body>
<svg width="150" height="100" viewBox="0 0 3 2">
<rect width="1" height="2" x="0" fill="#008d46" />
<rect width="1" height="2" x="1" fill="#ffffff" />
<rect width="1" height="2" x="2" fill="#d2232c" />
</svg>
</body>
</html>
Attributes
Global attributes
- Conditional processing attributes »
- Core attributes »
- Document event attributes »
- Graphical event attributes »
- Presentation attributes »
classstyleexternalResourcesRequired
Specific attributes
DOM Interface
This element implements the SVGSVGElement interface.
Specifications
| Specification | Status | Comment |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 The definition of '<svg>' in that specification. |
Working Draft | |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<svg>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | IE | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.5 (1.8) | 9.0 | 8.0 | 3.0.4 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 3.0 | 1.0 (1.8) | Not supported | (Yes) | 3.0.4 |
The chart is based on these sources.
Document Tags and Contributors
Tags:
Contributors to this page:
Tigt,
Sebastianz,
s-light,
SueSmith,
azoorob,
billsmithaustin,
kscarfone,
Jeremie,
ethertank,
jswisher,
Manuel_Strehl,
syssgx,
fusionchess
Last updated by:
Tigt,