HTML 컨텐츠에 SVG 효과 적용하기

Firefox 3.5 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:

NOTE: Namespacing is not valid in HTML5, leave off the "svg:" in tags for HTML-format documents.

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

.target { 
  mask: url(#m1); 
}
p {
  width: 300px;
  border: 1px solid #000;
  display: inline-block;
  margin: 1em; 
}

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:

<p class="target" style="background:lime;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
<p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing
    <b class="target">elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua.</b>
    Ut enim ad minim veniam.
</p>

The above example would be rendered with the mask applied to it.

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.

<p class="target" style="background:lime;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
<p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing
    <b class="target">elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua.</b>
    Ut enim ad minim veniam.
</p>
<button onclick="toggleRadius()">Toggle radius</button>
<svg height="0">
  <clipPath id="c1" clipPathUnits="objectBoundingBox">
    <circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
    <rect x="0.5" y="0.2" width="0.5" height="0.8"/>
  </clipPath>
</svg>

.target {
  clip-path: url(#c1);
}
p {
  width: 300px;
  border: 1px solid #000;
  display: inline-block;
  margin: 1em;
}

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:

function toggleRadius() {
  var circle = document.getElementById("circle");
  circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
}

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

Example: Filtering

This example demonstrates how you can apply a filter to HTML content using SVG. It establishes several filters, which are applied using styles to each of three elements in both the normal and mouse hover states.

Any SVG filter can be applied this way. For example, to apply a Gaussian blur effect, you might use:

<svg:filter id="f1">
  <svg:feGaussianBlur stdDeviation="3"/>
</svg:filter>

You could also apply a color matrix, like this:

<svg:filter id="f2">
  <svg:feColorMatrix values="0.3333 0.3333 0.3333 0 0
                             0.3333 0.3333 0.3333 0 0
                             0.3333 0.3333 0.3333 0 0
                             0      0      0      1 0"/>
</svg:filter>

These are just two of the five filters demonstrated in this example. Be sure to take a look at the full code if you'd like to see more.

The five filters are applied using the following CSS:

<style>
    p.target { filter:url(#f3); }
    p.target:hover { filter:url(#f5); }
    b.target { filter:url(#f1); }
    b.target:hover { filter:url(#f4); }
    iframe.target { filter:url(#f2); }
    iframe.target:hover { filter:url(#f3); }
</style>

View this example live

Example: Blurred Text

In order to blur text webkit based browsers have a (prefixed) CSS filter called blur. You can achieve the same effect using SVG filters.

 <p class="blur">Time to clean my glasses</p>
 <svg xmlns="https://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="wherearemyglasses" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
  </defs>
</svg>

You can apply the SVG and the CSS filter in the same class:

.blur {
  filter:url(#wherearemyglasses);
  /* ^ for Firefox */
  -webkit-filter: blur(1px);  
  /* ^ Webkit browsers */
  filter: blur(1px);  
}

Blurring is computation heavy, so ensure to use it sparingly, especially in elements that get scrolled or animated.

Using external references

The SVG elements being used for clipping, masking, and so forth can be loaded from an external document, as long as that document comes from the same origin as the HTML document to which it's applied.

For example, if your CSS is in a file named default.css, it can look like this:

.target { clip-path: url(resources.svg#c1); }

The SVG is then imported from a file named resources.svg, using the clip path with the ID c1.