Applying SVG effects to HTML content

  • Revision slug: Applying_SVG_effects_to_HTML_content
  • Revision title: Applying SVG effects to HTML content
  • Revision id: 46516
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 5 words added

Revision Content

{{ fx_minversion_header("3") }}

{{ draft() }}

Firefox 3.1 introduced support for using SVG as a component of CSS styles in order to apply SVG effects to HTML content.

You may specify SVG in styles either within the same document, or within an external style sheet.

Note: References to SVG in external files must be to the same origin as the originating document.

How to apply SVG effects

To apply an SVG effect using CSS styles, you first need to create the CSS style that references the SVG to apply.  This can be done either to an SVG style embedded within the document, or to external SVG.

<style>.stylename { mask: url(#localstyle); }</style>

In the above example, the new style, identified by "stylename," is an SVG mask referenced by the ID "localstyle".  Once this is established, that mask will be applied to any elements using this CSS style.

Example: Masking

For example, you can establish a CSS style that provides a gradient mask for HTML content using SVG code similar to the following in your HTML document:

  <style>.target { mask: url(#m1); }</style>
  <svg:svg height="0">
    <svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
        <svg:stop stop-color="white" offset="0"/>
        <svg:stop stop-color="white" stop-opacity="0" offset="1"/>
      </svg:linearGradient>
      <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
      <svg:rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/>
    </svg:mask>
  </svg:svg>

Note that in line 1, the mask is specified using a URL to the ID "#m1", which is the ID of the SVG mask specified below it.  Everything else specifies details about the gradient mask itself.

Actually applying the SVG effect to XHTML or HTML is done by simply assigning the target style defined above to the element, like this:

  <iframe class="target" src="http://mozilla.org"/>

This example embeds an iframe containing the Mozilla.org web site, which is rendered with the mask applied to it.

View this example live.

See also

 

Revision Source

<p>{{ fx_minversion_header("3") }}</p>
<p>{{ draft() }}</p>
<p>Firefox 3.1 introduced support for using SVG as a component of CSS styles in order to apply SVG effects to HTML content.</p>
<p>You may specify SVG in styles either within the same document, or within an external style sheet.</p>
<div class="note"><strong>Note:</strong> References to SVG in external files must be to the same origin as the originating document.</div>
<h2>How to apply SVG effects</h2>
<p>To apply an SVG effect using CSS styles, you first need to create the CSS style that references the SVG to apply.  This can be done either to an SVG style embedded within the document, or to external SVG.</p>
<pre>&lt;style&gt;.stylename { mask: url(#localstyle); }&lt;/style&gt;
</pre>
<p>In the above example, the new style, identified by "stylename," is an SVG mask referenced by the ID "localstyle".  Once this is established, that mask will be applied to any elements using this CSS style.</p>
<h2>Example: Masking</h2>
<p>For example, you can establish a CSS style that provides a gradient mask for HTML content using SVG code similar to the following in your HTML document:</p>
<pre class="brush: xml">  &lt;style&gt;.target { mask: url(#m1); }&lt;/style&gt;
  &lt;svg:svg height="0"&gt;
    &lt;svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"&gt;
      &lt;svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"&gt;
        &lt;svg:stop stop-color="white" offset="0"/&gt;
        &lt;svg:stop stop-color="white" stop-opacity="0" offset="1"/&gt;
      &lt;/svg:linearGradient&gt;
      &lt;svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/&gt;
      &lt;svg:rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/&gt;
    &lt;/svg:mask&gt;
  &lt;/svg:svg&gt;
</pre>
<p>Note that in line 1, the mask is specified using a URL to the ID "#m1", which is the ID of the SVG mask specified below it.  Everything else specifies details about the gradient mask itself.</p>
<p>Actually applying the SVG effect to XHTML or HTML is done by simply assigning the <code>target</code> style defined above to the element, like this:</p>
<pre class="brush: html">  &lt;iframe class="target" src="http://mozilla.org"/&gt;
</pre>
<p>This example embeds an <code>iframe</code> containing the Mozilla.org web site, which is rendered with the mask applied to it.</p>
<p><a class="internal" href="/@api/deki/files/3213/=maskdemo.xhtml" title="/@api/deki/files/3213/=maskdemo.xhtml">View this example live</a>.</p><h2>See also</h2>
<ul> <li><a class="external" href="/web-tech/2008/09/15/svg-effects-for-html-content" title="https://developer.mozilla.org/editor/fckeditor/core/editor/web-tech/2008/09/15/svg-effects-for-html-content/">SVG Effects for HTML Content</a></li>
</ul>
<p> </p>
Revert to this revision