Preview
Generated SVG Code
<svg width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg" overflow="visible">
<path d="M 0 0 L 1920 0 L 1920 1080 L 0 1080 L 0 0 Z" fill="#000000"/>
</svg>
Image SVG Code
/* Width: 1920, Height: 1080 */
selector img {
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%201920%201080%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M%200%200%20L%201920%200%20L%201920%201080%20L%200%201080%20L%200%200%20Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%201920%201080%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M%200%200%20L%201920%200%20L%201920%201080%20L%200%201080%20L%200%200%20Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
display: block;
width: 100%;
height: auto;
}Container CSS Code
selector {
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%201920%201080%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M%200%200%20L%201920%200%20L%201920%201080%20L%200%201080%20L%200%200%20Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%201920%201080%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M%200%200%20L%201920%200%20L%201920%201080%20L%200%201080%20L%200%200%20Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
overflow: hidden;
}