Applying SVG effects to HTML content
Modern browsers support usingSVG withinCSS styles to apply graphical effects to HTML content.
You may specify SVG in styles either within the same document or an external style sheet. There are 3 properties you can use:mask,clip-path, andfilter.
Note:References to SVG in external files must be to thesame origin as the referencing 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.
p { mask: url("#my-mask");}In the above example, all paragraphs are masked by anSVG<mask> with theIDmy-mask.
Example: Masking
For example, you can make a gradient mask for HTML content using SVG and CSS code similar to the following, inside your HTML document:
<svg height="0"> <mask> <linearGradient y2="1"> <stop stop-color="white" offset="0" /> <stop stop-opacity="0" offset="1" /> </linearGradient> <circle cx="0.25" cy="0.25" r="0.25" fill="white" /> <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)" /> </mask></svg>.target { mask: url("#mask-1");}p { width: 300px; border: 1px solid black; display: inline-block;}p.target { background: lime;}Note that in the CSS, the mask is specified using a URL to the ID#mask-1, which is the ID of the SVG mask specified below it. Everything else specifies details about the gradient mask itself.
Applying the SVG effect to HTML is accomplished by assigning thetarget class defined above to an element, like this:
<p> 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 <em >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em > Ut enim ad minim veniam.</p>The above example would be rendered with the mask applied to it.
Example: Clipping
This example demonstrates using SVG to clip HTML content. Notice that even the clickable areas for links are clipped.
<p> 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 <em >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em > Ut enim ad minim veniam.</p><button>Toggle radius</button><svg height="0"> <clipPath clipPathUnits="objectBoundingBox"> <circle cx="0.25" cy="0.25" r="0.25" /> <rect x="0.5" y="0.2" width="0.5" height="0.8" /> </clipPath></svg>.target { clip-path: url("#clipping-path-1");}p { width: 300px; border: 1px solid black; display: inline-block;}p.target { background: lime;}This establishes a clipping area made of a circle and rectangle, assigns it the ID#clipping-path-1, then references it in the CSS. The clip path can be assigned to any element with thetarget class.
You can make changes to the SVG in real time and see them immediately affect the rendering of the HTML. For example, you can resize the circle in the clip path established above:
const circle = document.getElementById("circle");function toggleRadius() { circle.r.baseVal.value = 0.4 - circle.r.baseVal.value;}document.querySelector("button").addEventListener("click", toggleRadius);Example: Filtering
This demonstrates applying a filter to HTML content using SVG. It establishes several filters, which are applied with CSS to three elements in both the normal and mousehover states.
<p> 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><pre>lorem</pre><p> Lorem ipsum dolor sit amet, consectetur adipisicing <em >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em > Ut enim ad minim veniam.</p>p.target { background: lime;}Any SVG filter can be applied this way. For example, to apply a blur effect, you might use:
<svg height="0"> <filter> <feGaussianBlur stdDeviation="3" /> </filter></svg>You could also apply a color matrix:
<svg height="0"> <filter> <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" /> </filter></svg>And some more filters:
<svg height="0"> <filter> <feConvolveMatrix filterRes="100 100" color-interpolation-filters="sRGB" order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true" /> </filter> <filter> <feSpecularLighting surfaceScale="5" specularConstant="1" specularExponent="10" lighting-color="white"> <fePointLight x="-5000" y="-10000" z="20000" /> </feSpecularLighting> </filter> <filter> <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 1 0 0 0" color-interpolation-filters="sRGB" /> </filter></svg>The five filters are applied using the following CSS:
p.target { filter: url("#f3");}p.target:hover { filter: url("#f5");}em.target { filter: url("#f1");}em.target:hover { filter: url("#f4");}pre.target { filter: url("#f2");}pre.target:hover { filter: url("#f3");}Example: Blurred Text
In order to blur text, there is a CSS filter function calledblur(). You can achieve the same effect using SVG filters.
<p>Time to clean my glasses</p><svg height="0"> <defs> <filter 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");}Blurring is computation heavy, so ensure to use it sparingly, especially in elements that get scrolled or animated.
Example: Text Effects
SVG effects can also be used to add a more dynamic and flexible approach to adding text compared to plain HTML text.
By creating the text using SVG elements combined with HTML you can make a variety of different text effects. You can rotate the text:
<svg height="60" width="200"> <text x="0" y="15" fill="blue" transform="rotate(30 20,50)"> Example text </text></svg>Using external references
SVG used for clipping, masking, and filtering can be loaded from an external source, as long as that source comes from the same origin as the HTML document to which it's applied.
For example, if your CSS is in a file nameddefault.css, it can look like this:
.target { clip-path: url("resources.svg#c1");}The SVG is then imported from a file namedresources.svg, using the clip path with the IDc1.
See also
- SVG
clip-pathpropertymaskproperty- Shapes in clipping and masking – and how to use them