type

  • Revision slug: Web/SVG/Attribute/type
  • Revision title: type
  • Revision id: 427215
  • Created:
  • Creator: Jeremie
  • Is current revision? Yes
  • Comment copyeditingMoved From SVG/Attribute/type to Web/SVG/Attribute/type

Revision Content

« SVG Attribute reference home

The type attribute is a generic attribute and it has different meaning based on the context in which it's used.

  • For the {{SVGElement("animateTransform")}} element, it defines the type of transformation, whose values change over time.
  • For the {{SVGElement("feColorMatrix")}} element, it indicates the type of matrix operation. The keyword matrix indicates that a full 5x4 matrix of values will be provided. The other keywords represent convenience shortcuts to allow commonly used color operations to be performed without specifying a complete matrix.
  • For the {{SVGElement("feFuncR")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncB")}}, and {{SVGElement("feFuncA")}} elements, it Indicates the type of component transfer function.
  • For the {{SVGElement("feTurbulence")}} element, it indicates whether the filter primitive should perform a noise or turbulence function.
  • For the {{SVGElement("style")}} and {{SVGElement("script")}} elements, it defines the content type of the element.

Usage context

For the {{SVGElement("animateTransform")}} elements

Categories None
Value translate | scale | rotate | skewX | skewY
Animatable No
Normative document SVG 1.1 (2nd Edition)

For the {{ SVGElement("feColorMatrix") }} element

Categories None
Value matrix | saturate | hueRotate | luminanceToAlpha
Animatable Yes
Normative document SVG 1.1 (2nd Edition)

For the {{ SVGElement("feFuncR") }}, {{ SVGElement("feFuncG") }}, {{ SVGElement("feFuncB") }}, and {{ SVGElement("feFuncA") }} elements

Categories None
Value identity | table | discrete | linear | gamma
Animatable Yes
Normative document SVG 1.1 (2nd Edition)

For the {{ SVGElement("feTurbulence") }} element

Categories None
Value fractalNoise | turbulence
Animatable Yes
Normative document SVG 1.1 (2nd Edition)

For the {{ SVGElement("style") }} and {{SVGElement("script")}} elements

Categories None
Value <content-type>
Animatable No
Normative document SVG 1.1 (2nd Edition) : script
SVG 1.1 (2nd Edition) : style

Example

Elements

The following elements can use the values attribute

  • {{SVGElement("animateTransform")}}
  • {{SVGElement("feColorMatrix")}}
  • {{SVGElement("feFuncA")}}
  • {{SVGElement("feFuncB")}}
  • {{SVGElement("feFuncG")}}
  • {{SVGElement("feFuncR")}}
  • {{SVGElement("feTurbulence")}}
  • {{SVGElement("script")}}
  • {{SVGElement("style")}}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>type</code> attribute is a generic attribute and it has different meaning based on the context in which it's used.</p>
<ul>
  <li>For the {{SVGElement("animateTransform")}} element, it defines the type of transformation, whose values change over time.</li>
  <li>For the {{SVGElement("feColorMatrix")}} element, it indicates the type of matrix operation. The keyword <code>matrix</code> indicates that a full 5x4 matrix of values will be provided. The other keywords represent convenience shortcuts to allow commonly used color operations to be performed without specifying a complete matrix.</li>
  <li>For the {{SVGElement("feFuncR")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncB")}}, and {{SVGElement("feFuncA")}} elements, it Indicates the type of component transfer function.</li>
  <li>For the {{SVGElement("feTurbulence")}} element, it indicates whether the filter primitive should perform a noise or turbulence function.</li>
  <li>For the {{SVGElement("style")}} and {{SVGElement("script")}} elements, it defines the content type of the element.</li>
</ul>
<h2 id="Usage_context">Usage context</h2>
<h3 id="For_the_.7B.7BSVGElement(.22animateTransform.22).7D.7D_elements">For the {{SVGElement("animateTransform")}} elements</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td><em>None</em></td>
    </tr>
    <tr>
      <th scope="row">Value</th>
      <td><strong><code>translate</code></strong> | <code>scale</code> | <code>rotate</code> | <code>skewX</code> | <code>skewY</code></td>
    </tr>
    <tr>
      <th scope="row">Animatable</th>
      <td>No</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElementTypeAttribute" title="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElementTypeAttribute">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<h3 id="For_the_.7B.7B_SVGElement(.22feColorMatrix.22)_.7D.7D_element">For the {{ SVGElement("feColorMatrix") }} element</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td><em>None</em></td>
    </tr>
    <tr>
      <th scope="row">Value</th>
      <td><strong><code>matrix</code></strong> | <code>saturate</code> | <code>hueRotate</code> | <code>luminanceToAlpha</code></td>
    </tr>
    <tr>
      <th scope="row">Animatable</th>
      <td>Yes</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixTypeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixTypeAttribute"><span class="external">SVG 1.1 (2nd Edition)</span></a></td>
    </tr>
  </tbody>
</table>
<h3 id="For_the_.7B.7B_SVGElement(.22feFuncR.22)_.7D.7D.2C_.7B.7B_SVGElement(.22feFuncG.22)_.7D.7D.2C_.7B.7B_SVGElement(.22feFuncB.22)_.7D.7D.2C_and_.7B.7B_SVGElement(.22feFuncA.22)_.7D.7D_elements">For the {{ SVGElement("feFuncR") }}, {{ SVGElement("feFuncG") }}, {{ SVGElement("feFuncB") }}, and {{ SVGElement("feFuncA") }} elements</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td><em>None</em></td>
    </tr>
    <tr>
      <th scope="row">Value</th>
      <td><code>identity</code> | <code>table</code> | <code>discrete</code> | <code>linear</code> | <code>gamma</code></td>
    </tr>
    <tr>
      <th scope="row">Animatable</th>
      <td>Yes</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferTypeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferTypeAttribute"><span class="external">SVG 1.1 (2nd Edition)</span></a></td>
    </tr>
  </tbody>
</table>
<h3 id="For_the_.7B.7B_SVGElement(.22feTurbulence.22)_.7D.7D_element">For the {{ SVGElement("feTurbulence") }} element</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td><em>None</em></td>
    </tr>
    <tr>
      <th scope="row">Value</th>
      <td><code>fractalNoise</code> | <strong><code>turbulence</code></strong></td>
    </tr>
    <tr>
      <th scope="row">Animatable</th>
      <td>Yes</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceTypeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceTypeAttribute"><span class="external">SVG 1.1 (2nd Edition)</span></a></td>
    </tr>
  </tbody>
</table>
<h3 id="For_the_.7B.7B_SVGElement(.22style.22)_.7D.7D_and_.7B.7BSVGElement(.22script.22).7D.7D_elements">For the {{ SVGElement("style") }} and {{SVGElement("script")}} elements</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td><em>None</em></td>
    </tr>
    <tr>
      <th scope="row">Value</th>
      <td>&lt;content-type&gt;</td>
    </tr>
    <tr>
      <th scope="row">Animatable</th>
      <td>No</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a href="http://www.w3.org/TR/SVG11/script.html#ScriptElementTypeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/script.html#ScriptElementTypeAttribute"><span class="external">SVG 1.1 (2nd Edition) : script</span></a><br />
        <a href="http://www.w3.org/TR/SVG11/styling.html#StyleElementTypeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/styling.html#StyleElementTypeAttribute">SVG 1.1 (2nd Edition) : style</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>values</code> attribute</p>
<ul>
  <li>{{SVGElement("animateTransform")}}</li>
  <li>{{SVGElement("feColorMatrix")}}</li>
  <li>{{SVGElement("feFuncA")}}</li>
  <li>{{SVGElement("feFuncB")}}</li>
  <li>{{SVGElement("feFuncG")}}</li>
  <li>{{SVGElement("feFuncR")}}</li>
  <li>{{SVGElement("feTurbulence")}}</li>
  <li>{{SVGElement("script")}}</li>
  <li>{{SVGElement("style")}}</li>
</ul>
Revert to this revision