CSS SVG Mask Layers
Masks for images can also be built in SVG.
The job falls to the <mask> element, which applies a mask to an image and lets you create a variety of mask layers for it.
SVG Mask Layer - Circle
A circle is drawn with the SVG <circle> element.
Example
Here the mask layer takes the shape of a circle:
Prompt
Create an SVG element (600x400) with a mask that uses a circle (radius 150, centered at 200,200) filled white, applied to an image of a landscape (use "img_5terre.jpg").
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mask Layer - Circle</title>
</head>
<body>
<h2>SVG Mask Layer - Circle</h2>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<circle r="150" cx="200" cy="200" fill="#ffffff" />
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
</body>
</html>
SVG Mask Layer - Ellipse
An ellipse is drawn with the SVG <ellipse> element.
Example
Here the mask layer takes the shape of an ellipse:
Prompt
Create an SVG element (600x400) with a mask that uses an ellipse (cx=220, cy=150, rx=200, ry=100) filled white, applied to a landscape image (use "img_5terre.jpg").
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mask Layer - Ellipse</title>
</head>
<body>
<h2>SVG Mask Layer - Ellipse</h2>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<ellipse cx="220" cy="150" rx="200" ry="100" fill="#ffffff" />
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
</body>
</html>
SVG Mask Layer - Triangle
Any shape with three or more sides is drawn with the SVG <polygon> element.
Example
Here the mask layer takes the shape of a triangle:
Prompt
Create an SVG element (600x400) with a mask that uses a polygon shaped as a triangle (points: 200 0, 400 400, 0 400) filled white, applied to a landscape image (use "img_5terre.jpg").
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mask Layer - Triangle</title>
</head>
<body>
<h2>SVG Mask Layer - Triangle</h2>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
</body>
</html>
SVG Mask - Star
A star-shaped mask layer is another job for the SVG <polygon> element.
Example
Here the mask layer takes the shape of a star:
Prompt
Create an SVG element (600x400) with a mask that uses a polygon shaped as a star (points: 100,10 40,198 190,78 10,78 160,198) filled white, applied to a landscape image (use "img_5terre.jpg").
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mask - Star</title>
</head>
<body>
<h2>SVG Mask - Star</h2>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
</body>
</html>
SVG Mask - Multiple Circles
A single mask can hold several circles, each at its own position.
Example
Here three circles together make up the mask layer:
Prompt
Create an SVG element (600x400) with a mask that uses three white circles at different positions (cx=75 cy=75 r=75, cx=80 cy=260 r=75, cx=270 cy=160 r=75), applied to a landscape image (use "img_5terre.jpg").
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mask - Multiple Circles</title>
</head>
<body>
<h2>SVG Mask - Multiple Circles</h2>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
<circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
<circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
</body>
</html>
CSS All Masking Properties
Every CSS masking property is listed below:
mask-clip— sets the area that a mask image affects.mask-composite— sets the compositing operation between the current mask layer and the mask layers below it.mask-image— names the image that serves as the mask layer of an element.mask-mode— decides if a mask layer image acts as a luminance mask or an alpha mask.mask-origin— sets the position a mask layer image originates from.mask-position— sets where a mask layer image starts.mask-repeat— controls the way a mask layer image repeats.mask-size— sets how large a mask layer image is.mask-type— decides if an SVG<mask>element acts as a luminance mask or an alpha mask.