mozilla

Revision 46524 of Applying SVG effects to HTML content

  • Revision slug: Applying_SVG_effects_to_HTML_content
  • Revision title: Applying SVG effects to HTML content
  • Revision id: 46524
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 262 words added, 1 words removed

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.

Using embedded SVG

To apply an SVG effect using CSS styles, you first need to create the CSS style that references the SVG to apply.

<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.

This sounds more complicated than it really is; take a look at the examples to get a good idea how this works.

There are three styles you may apply: you may use mask, clip-path, or filter.

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.

Example: Clipping

This example demonstrates how to use SVG to clip HTML content.  When you look at the live demo, notice that even the hot areas for links are clipped.

  <style>.target { clip-path: url(#c1); }</style>
  <svg:svg height="0">
    <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
      <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
      <svg:rect x="0.5" y="0.2" width="0.5" height="0.8"/>
    </svg:clipPath>
  </svg:svg>

This establishes a clipping area comprised of a circle and rectangle, and assigns it the ID "#c1".  This is then referenced from the style.  Once the target style is established this way, the clip path can be assigned to any element.

Note also that you can make changes to the SVG in real time and see those changes immediately affect the rendering of the HTML.  For example, you can resize the circle in the clip path established above:

    var circle = document.getElementById("circle");
    circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;

View this example live.  The example includes a button you can click to change the clip path and see the change take effect.

See also

Revision Source

<p>{{ fx_minversion_header("3") }}</p>
<p>{{ draft() }}</p>
<p>Firefox 3.1 introduced support for using <a class="internal" href="/en/SVG" title="En/SVG">SVG</a> as a component of <a class="internal" href="/en/CSS" title="En/CSS">CSS</a> 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>Using embedded SVG</h2>
<p>To apply an SVG effect using CSS styles, you first need to create the CSS style that references the SVG to apply.</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>
<p>This sounds more complicated than it really is; take a look at the examples to get a good idea how this works.</p>
<p>There are three styles you may apply: you may use <code>mask</code>, <code>clip-path</code>, or <code>filter</code>.</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>Example: Clipping</h2>
<p>This example demonstrates how to use SVG to clip HTML content.  When you look at the <a class="internal" href="/@api/deki/files/3214/=clipdemo.xhtml" title="/@api/deki/files/3214/=clipdemo.xhtml">live demo</a>, notice that even the hot areas for links are clipped.</p>
<pre class="brush: xml">  &lt;style&gt;.target { clip-path: url(#c1); }&lt;/style&gt;
  &lt;svg:svg height="0"&gt;
    &lt;svg:clipPath id="c1" clipPathUnits="objectBoundingBox"&gt;
      &lt;svg:circle cx="0.25" cy="0.25" r="0.25" id="circle"/&gt;
      &lt;svg:rect x="0.5" y="0.2" width="0.5" height="0.8"/&gt;
    &lt;/svg:clipPath&gt;
  &lt;/svg:svg&gt;
</pre>
<p>This establishes a clipping area comprised of a circle and rectangle, and assigns it the ID "#c1".  This is then referenced from the style.  Once the <code>target</code> style is established this way, the clip path can be assigned to any element.</p>
<p>Note also that you can make changes to the SVG in real time and see those changes immediately affect the rendering of the HTML.  For example, you can resize the circle in the clip path established above:</p>
<pre class="brush: js">    var circle = document.getElementById("circle");
    circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
</pre>
<p><a class="internal" href="/@api/deki/files/3214/=clipdemo.xhtml" title="/@api/deki/files/3214/=clipdemo.xhtml">View this example live</a>.  The example includes a button you can click to change the clip path and see the change take effect.</p>
<h2>See also</h2>
<ul> <li><a class="internal" href="/en/SVG" title="En/SVG">SVG</a></li> <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> (blog post)</li> <li><a class="external" href="/web-tech/2008/10/10/svg-external-document-references" title="https://developer.mozilla.org/editor/fckeditor/core/editor/web-tech/2008/10/10/svg-external-document-references/">SVG External Document References</a> (blog post)</li>
</ul>
Revert to this revision