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 »
class
style
externalResourcesRequired
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,