svg

  • Revision slug: SVG/Element/svg
  • Revision title: svg
  • Revision id: 61347
  • Created:
  • Creator: syssgx
  • Is current revision? No
  • Comment 30 words removed

Revision Content

{{ SVGRefElem() }}

When it is not the root element, the svg element can be used to nested standalone SVG fragment inside the current document. This standalone fragment will have it's own viewPort and it's 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 (is the national flag of Italy):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="150" height="100" viewBox="0 0 3 2">
<rect width="1" height="2" 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 HTML document as follows:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML/SVG Example</title>
</head>

<body>

<svg width="150" height="100" viewBox="0 0 3 2" id="italyFlag">
<rect width="1" height="2" fill="#008d46"/>
<rect width="1" height="2" x="1" fill="#ffffff"/>
<rect width="1" height="2" x="2" fill="#d2232c"/>
</svg>

</body>
</html> 

The output result would include the following:

<?xml version="1.0"?>
<svg width="150" height="100" viewBox="0 0 3 2" id="italyFlag">
<rect width="1" height="2" fill="#008d46"/>
<rect width="1" height="2" x="1" fill="#ffffff"/>
<rect width="1" height="2" x="2" fill="#d2232c"/>
</svg>

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.

Revision Source

<p>{{ SVGRefElem() }}</p>
<p>When it is not the root element, the <code>svg</code> element can be used to nested standalone SVG fragment inside the current document. This standalone fragment will have it's own viewPort and it's own coordinate system.</p>
<h2>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/SVG/Element#Animation" title="en/SVG/Attribute#Animation">Animation elements</a> »<br> <a href="/en/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">Descriptive elements</a> »<br> <a href="/en/SVG/Element#Shape" title="en/SVG/Attribute#Shape">Shape elements</a> »<br> <a href="/en/SVG/Element#Structural" title="en/SVG/Attribute#Structural">Structural elements</a> »<br> <a href="/en/SVG/Element#Gradient" title="en/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>Example</h2>
<p>Consider the following SVG image (is the national flag of Italy):</p>
<pre class="brush: xml"><span class="pi">&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;</span>
&lt;<span class="start-tag">svg</span><span class="attribute-name"> xmlns</span>=<span class="attribute-value">"http://www.w3.org/2000/svg" </span><span class="attribute-name">version</span>=<span class="attribute-value">"1.1" </span><span class="attribute-name">width</span>=<span class="attribute-value">"150" </span><span class="attribute-name">height</span>=<span class="attribute-value">"100" </span><span class="attribute-name">viewBox</span>=<span class="attribute-value">"0 0 3 2"</span>&gt;
&lt;<span class="start-tag">rect</span><span class="attribute-name"> width</span>=<span class="attribute-value">"1" </span><span class="attribute-name">height</span>=<span class="attribute-value">"2" </span><span class="attribute-name">fill</span>=<span class="attribute-value">"#008d46"</span><span class="attribute-name">/</span>&gt;
&lt;<span class="start-tag">rect</span><span class="attribute-name"> width</span>=<span class="attribute-value">"1" </span><span class="attribute-name">height</span>=<span class="attribute-value">"2" </span><span class="attribute-name">x</span>=<span class="attribute-value">"1" </span><span class="attribute-name">fill</span>=<span class="attribute-value">"#ffffff"</span><span class="attribute-name">/</span>&gt;
&lt;<span class="start-tag">rect</span><span class="attribute-name"> width</span>=<span class="attribute-value">"1" </span><span class="attribute-name">height</span>=<span class="attribute-value">"2" </span><span class="attribute-name">x</span>=<span class="attribute-value">"2" </span><span class="attribute-name">fill</span>=<span class="attribute-value">"#d2232c"</span><span class="attribute-name">/</span>&gt;
&lt;/<span class="end-tag">svg</span>&gt;
</pre>
<p>It could be included in a HTML document as follows:</p>
<pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; 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" id="italyFlag"&gt;
&lt;rect width="1" height="2" 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>
<p>The output result would include the following:</p>
<pre class="deki-transform" function="Svg">&lt;?xml version="1.0"?&gt;
&lt;svg width="150" height="100" viewBox="0 0 3 2" id="italyFlag"&gt;
&lt;rect width="1" height="2" 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>
<h2>Attributes</h2>
<h3>Global attributes</h3>
<ul> <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li> <li><a href="/en/SVG/Attribute#DocumentEvent" title="en/SVG/Attribute#DocumentEvent">Document event attributes</a> »</li> <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li> <li>{{ SVGAttr("class") }}</li> <li>{{ SVGAttr("style") }}</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li>
</ul>
<h3>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>DOM Interface</h2>
<p>This element implements the <code><a href="/en/DOM/SVGSVGElement" title="en/DOM/SVGSVGElement">SVGSVGElement</a></code> interface.</p>
Revert to this revision