Let's talk about how to use SVG to achieve image mosaic effect

How to use SVG to achieve image mosaic effect without using Javascript? The following article will give you a detailed understanding, I hope it will be helpful to you!

I forwarded an article by my friend Vajoy on the public account before - Skillfully use CSS to stylize the image mosaic.

The core is to use an interesting property in CSS--image-rendering, which can be used to set the image scaling algorithm. [Recommended learning: css video tutorial]

What is image-rendering?

CSS property image-rendering is used to set the image scaling algorithm. It applies to the element itself, to images in other attributes of the element, and to child elements.

The syntax is relatively simple:

{
    image-rendering: auto;              // 默认值，使用双线性（bilinear）算法进行重新采样（高质量）
    image-rendering: smooth;         // 使用能最大化图像客观观感的算法来缩放图像。让照片更“平滑”
    image-rendering: crisp-edges;  // 使用可有效保留对比度和图像中的边缘的算法来对图像进行缩放
    image-rendering: pixelated;      // 放大图像时, 使用最近邻居算法，因此，图像看着像是由大块像素组成的
}

Among them, image-rendering: pixelated is more interesting and can mosaic a low-precision image.

For example, suppose we have an image of 300px x 300px, and we let it be converted into 30px x 30px:

Let’s enlarge the distorted image to 300px x 300px:

image-rendering: pixelated, you can get a mosaic image:

<img src="pic.jpeg?30x30" />

img {
    width: 300px;
    height: 300px;
    image-rendering: pixelated
}

##image-rendering: pixelated<strong></strong> Limitations of achieving mosaic effectOK, then why do you need to reduce and then enlarge first, and then use

? Let's make a comparison and set image-rendering: pixelated directly to the original image:

Set

will only make the image more jagged, but will not directly produce a mosaic effect. This is also consistent with the description of

. When enlarging the image, the nearest neighbor algorithm is used, so the image looks like it is composed of large blocks of pixels. Only based on the enlarged and blurred image can we use

to get a mosaic picture!

So, suppose we only have a clear original image and want to use CSS to get a mosaic effect. Is it feasible? Following this idea, we can think:

Can we use CSS to reduce the image and then enlarge it, and then use

?

. So, if you want to get a blurry image when there is only one original image, you have to turn to Canvas, which is a little troublesome. We just want a mosaic effect.

This can lead to today’s protagonist,

, using several layers of SVG filters By superposing, you can actually achieve a mosaic effect filter very easily. And, SVG filters can be easily introduced through CSS filters.

The code is actually very simple. SVG defines a filter and uses the superposition effect of multiple layers of filters to achieve a mosaic effect. Then, it is introduced through CSS filter and can be applied to any element:

<img src="任意无需缩放的原图.png" alt="">
<svg>
  <filter id="pixelate" x="0" y="0">
    <feFlood x="4" y="4" height="2" width="2"/>
    <feComposite width="8" height="8"/>
    <feTile result="a"/>
    <feComposite in="SourceGraphic" in2="a" operator="in"/>
    <feMorphology operator="dilate"radius="5"/>
  </filter>
</svg>

img {
    width: 300px;
    height: 300px;
    filter: url(#pixelate);
}

In this way, we get a mosaic effect:

If you just want to use this effect, you don’t even need to understand the entire SVG