svg

  • Revision slug: Web/SVG/Element/svg
  • Revision title: svg
  • Revision id: 427427
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment Moved From SVG/Element/svg to Web/SVG/Element/svg

Revision Content

{{ SVGRefElem() }}

When it is not the root element, the svg element can be used to nest a standalone SVG fragment inside the current document (which can be an HTML document). This standalone fragment has its own viewPort and its own 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 »
{{ SVGElement("a") }}, {{ SVGElement("altGlyphDef") }}, {{ SVGElement("clipPath") }}, {{ SVGElement("color-profile") }}, {{ SVGElement("cursor") }}, {{ SVGElement("filter") }}, {{ SVGElement("font") }}, {{ SVGElement("font-face") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("image") }}, {{ SVGElement("marker") }}, {{ SVGElement("mask") }}, {{ SVGElement("pattern") }}, {{ SVGElement("script") }}, {{ SVGElement("style") }}, {{ SVGElement("switch") }}, {{ SVGElement("text") }}, {{ SVGElement("view") }}
Normative document SVG 1.1 (2nd Edition)

Example

Consider the following SVG image (representing the national flag of Italy):

<?xml version="1.0"?>
<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 a 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

Specific attributes

  • {{ SVGAttr("version") }}
  • {{ SVGAttr("baseProfile") }}
  • {{ SVGAttr("x") }}
  • {{ SVGAttr("y") }}
  • {{ SVGAttr("width") }}
  • {{ SVGAttr("height") }}
  • {{ SVGAttr("preserveAspectRatio") }}
  • {{ SVGAttr("contentScriptType") }}
  • {{ SVGAttr("contentStyleType") }}
  • {{ SVGAttr("viewBox") }}
  • {{ SVGAttr("zoomAndPan") }}

DOM Interface

This element implements the SVGSVGElement interface.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) IE Opera Safari
Basic support {{ CompatChrome("1.0") }} {{ CompatGeckoDesktop('1.8') }} {{ CompatIE('9.0') }} {{ CompatOpera('8.0') }} {{ CompatSafari('3.0.4') }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatAndroid('3.0') }} {{ CompatGeckoMobile('1.8') }} {{ CompatNo() }} {{ CompatVersionUnknown() }} {{ CompatSafari('3.0.4') }}

The chart is based on these sources.

Revision Source

<div>
  {{ SVGRefElem() }}</div>
<p>When it is not the root element, the <code>svg</code> element can be used to nest a standalone SVG fragment inside the current document (which can be an HTML document). This standalone fragment has its own viewPort and its own coordinate system.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td>Container element, Structural element</td>
    </tr>
    <tr>
      <th scope="row">Permitted content</th>
      <td>Any number of the following elements, in any order:<br />
        <a href="/en-US/docs/SVG/Element#Animation" title="en-US/docs/SVG/Attribute#Animation">Animation elements</a> »<br />
        <a href="/en-US/docs/SVG/Element#Descriptive" title="en-US/docs/SVG/Attribute#Descriptive">Descriptive elements</a> »<br />
        <a href="/en-US/docs/SVG/Element#Shape" title="en-US/docs/SVG/Attribute#Shape">Shape elements</a> »<br />
        <a href="/en-US/docs/SVG/Element#Structural" title="en-US/docs/SVG/Attribute#Structural">Structural elements</a> »<br />
        <a href="/en-US/docs/SVG/Element#Gradient" title="en-US/docs/SVG/Attribute#Gradient">Gradient elements</a> »<br />
        {{ SVGElement("a") }}, {{ SVGElement("altGlyphDef") }}, {{ SVGElement("clipPath") }}, {{ SVGElement("color-profile") }}, {{ SVGElement("cursor") }}, {{ SVGElement("filter") }}, {{ SVGElement("font") }}, {{ SVGElement("font-face") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("image") }}, {{ SVGElement("marker") }}, {{ SVGElement("mask") }}, {{ SVGElement("pattern") }}, {{ SVGElement("script") }}, {{ SVGElement("style") }}, {{ SVGElement("switch") }}, {{ SVGElement("text") }}, {{ SVGElement("view") }}</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a class="external" href="http://www.w3.org/TR/SVG/struct.html#NewDocument" title="http://www.w3.org/TR/SVG/struct.html#NewDocument">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Example">Example</h2>
<p>Consider the following SVG image (representing the national flag of Italy):</p>
<pre class="brush: xml">
&lt;?xml version="1.0"?&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg" 
     width="150" height="100" viewBox="0 0 3 2"&gt;

  &lt;rect width="1" height="2" x="0" fill="#008d46" /&gt;
  &lt;rect width="1" height="2" x="1" fill="#ffffff" /&gt;
  &lt;rect width="1" height="2" x="2" fill="#d2232c" /&gt;
&lt;/svg&gt;</pre>
<p>It could be included in a HTML5 document as follows:</p>
<pre class="brush: html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8" /&gt;
  &lt;title&gt;HTML/SVG Example&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;svg width="150" height="100" viewBox="0 0 3 2"&gt;
    &lt;rect width="1" height="2" x="0" fill="#008d46" /&gt;
    &lt;rect width="1" height="2" x="1" fill="#ffffff" /&gt;
    &lt;rect width="1" height="2" x="2" fill="#d2232c" /&gt;
  &lt;/svg&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>
<!--a href="https://developer.mozilla.org/@api/deki/files/5495/=sample.html" title="https://developer.mozilla.org/@api/deki/files/5495/=sample.html"></a-->
<h2 id="Attributes">Attributes</h2>
<h3 id="Global_attributes">Global attributes</h3>
<ul>
  <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="en-US/docs/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
  <li><a href="/en-US/docs/SVG/Attribute#Core" title="en-US/docs/SVG/Attribute#Core">Core attributes</a> »</li>
  <li><a href="/en-US/docs/SVG/Attribute#DocumentEvent" title="en-US/docs/SVG/Attribute#DocumentEvent">Document event attributes</a> »</li>
  <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent" title="en-US/docs/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
  <li><a href="/en-US/docs/SVG/Attribute#Presentation" title="en-US/docs/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
  <li>{{ SVGAttr("class") }}</li>
  <li>{{ SVGAttr("style") }}</li>
  <li>{{ SVGAttr("externalResourcesRequired") }}</li>
</ul>
<h3 id="Specific_attributes">Specific attributes</h3>
<ul>
  <li>{{ SVGAttr("version") }}</li>
  <li>{{ SVGAttr("baseProfile") }}</li>
  <li>{{ SVGAttr("x") }}</li>
  <li>{{ SVGAttr("y") }}</li>
  <li>{{ SVGAttr("width") }}</li>
  <li>{{ SVGAttr("height") }}</li>
  <li>{{ SVGAttr("preserveAspectRatio") }}</li>
  <li>{{ SVGAttr("contentScriptType") }}</li>
  <li>{{ SVGAttr("contentStyleType") }}</li>
  <li>{{ SVGAttr("viewBox") }}</li>
  <li>{{ SVGAttr("zoomAndPan") }}</li>
</ul>
<h2 id="DOM_Interface">DOM Interface</h2>
<p>This element implements the <code><a href="/en-US/docs/DOM/SVGSVGElement" title="en-US/docs/DOM/SVGSVGElement">SVGSVGElement</a></code> interface.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>IE</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatChrome("1.0") }}</td>
        <td>{{ CompatGeckoDesktop('1.8') }}</td>
        <td>{{ CompatIE('9.0') }}</td>
        <td>{{ CompatOpera('8.0') }}</td>
        <td>{{ CompatSafari('3.0.4') }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatAndroid('3.0') }}</td>
        <td>{{ CompatGeckoMobile('1.8') }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatSafari('3.0.4') }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>The chart is based on <a href="/en-US/docs/SVG/Compatibility_sources" title="en-US/docs/SVG/Compatibility sources">these sources</a>.</p>
Revert to this revision