preface

After all, SVG is a visualization technology, and you can’t really appreciate it with just text, formulas, and code descriptions. So recently, I tried using an SVG filter to color my photos in Moments.

As a matter of fact, I am quite fond of Posting photos in my moments, but what I usually take are scenery. I use various software to adjust colors for photos and create a different mood. There are many photoshop apps on mobile phones, such as Adobe Lightroom and Google Snapseed. Without using presets, we can correct the color or add some extra atmosphere by changing the saturation, contrast, exposure and other parameters.

In the world of SVG filters, these parameters exist in a different way, the primitive used for image processing in SVG filter primitives (you can check out the SVG Filters – Overview of bling-bling at ✨).

Such primitives are the beauty and essence of filters. They have the ability to process the source of the image input through the IN attribute, and can either pass the result to the next primitive for processing, or display it directly as a result on the page. It includes image operations such as pixel displacement Filter, Gaussian blur, color adjustment, convolution and so on, providing more low-level image operations than CSS Filter 10 Filter properties.

My next article will take me on a tour of image processing primitives for SVG filters, so this article is a precursor. Have to say, really too many things here, an article is obviously can’t write (and in the first two articles of SVG filter build tools also is only semi-finished products, still have to write slowly), and in fact, a lot of things before didn’t finish writing this series, I should be don’t understand, so if you have questions also please print below.

Here are a few examples of filters I recently built. Of course, the filter effect is strongly related to the content of the source image, and the following filters may not be common. Similarly, as with other post-processing processes, the quality of the material is very important, and if it is too bad, it may not be saved

Film effect

The original:

It can be seen that this picture is just a very simple scenery photo (a telegraph pole next to the first phase of Zhongguancun Software Park, Haidian District, Beijing). It seems that you can directly post some questions in the photo and think of some ideas in moments.

  1. The clouds illuminated by the setting sun in the sky are not so bright
  2. I want the picture to be a little hazy
  3. I also wanted the photos to have a bit of a green, old photo feel
  4. I wish the sky would be a little darker

So I adjusted the color of the image through the following filter:

<svg style="width: 0; height: 0">
    <filter id="filter" x="0" y="0" width="100%" height="100%">
        <feFlood flood-color="# 089" flood-opacity="0.5" result="98FF3FAE-0126-490C-A82F-8E16FB2FEFE7"></feFlood>
        <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 0 0.5 0.2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" result="C7942AE9-423F-436F-B9C9-DA5AE285B6C4"></feColorMatrix>
        <feBlend in="SourceGraphic" in2="98FF3FAE-0126-490C-A82F-8E16FB2FEFE7" mode="lighten" result="A9D208EF-CC5A-4C72-B87F-9701CDEAC015"></feBlend>
        <feGaussianBlur in="A9D208EF-CC5A-4C72-B87F-9701CDEAC015" stdDeviation="2" result="07D9C1F0-6E6B-4F23-8CF8-E0D5FE822789"></feGaussianBlur>
        <feBlend in="C7942AE9-423F-436F-B9C9-DA5AE285B6C4" in2="07D9C1F0-6E6B-4F23-8CF8-E0D5FE822789" mode="soft-light" result="44BA7ABB-E248-431F-9DB0-D3EBF4FF160E"></feBlend>
        <feConvolveMatrix in="44BA7ABB-E248-431F-9DB0-D3EBF4FF160E" kernelMatrix="0 0 0, 0 1.6 0, 0 0 0" order="3, 3" divisor="1" edgeMode="none" kernelUnitLength="2" preserveAlpha="true" result="5DED114B-C12E-4B25-8021-2FEE5AC7BE66"></feConvolveMatrix>
    </filter>
</svg>
Copy the code

Here is the node map corresponding to the filter code:

Notice the difference between the diagram and the code. The source image in the code is imported using the SourceGraphic keyword, and the map is imported using

. So the output of

in the figure is equivalent to the SourceGraphic.

Let’s go through the process of image processing here by looking at this map. The author has marked the number for each line, which can be read step by step

  1. Import the source image, take the source imageSourceGraphicConnected tofeColorMatrixThe color matrix node is used to get an image that is yellow compared to the source image — essentially turning the brightness of the blue channel in the original image into0, without any blue components, and the green channel is slightly darker
  2. Fill a green color block and connect the color blocksfeBlendMixed mode nodein2Enter the port to participate in the blending next
  3. The source imageSourceGraphicConnected tofeBlendMixed mode nodeinInput port to allow source image with color block tolightenThe (lightening) mode is mixed, which gives the dark part of the image a greenish feel
  4. Will go throughfeBlendThe mixed mode node processes the image concatenationfeGaussianBlurGaussian blur node, get a blurred photo, have some hazy feeling
  5. Will go throughfeColorMatrixAfter the color matrix nodes are processed, the images are connected to onefeBlendBlend mode nodes for subsequent blending
  6. Will go throughfeGaussianBlurThe image processed by gaussian fuzzy node is connected to thefeBlendThe results of gaussian fuzzy nodes and color matrix nodes are mixedsoft-lightmixed
  7. After the previous stepfeBlendMixed mode node, the image looks dark, so next linkfeConvolveMatrixThe convolution matrix node, the center of the convolution kernel is set as a ratio1Large value, make the center pixel lighter.

Get:

The lights intensified

The original:

This picture is an ordinary rainy day photo (at the intersection of Houchang Cun Road, Haidian District, Beijing, one day the road was flooded by a rainstorm), I suddenly thought of some ideas:

  1. The hope is to make the light brighter and the reflection of the water more noticeable
  2. Add more blue or purple lights for more contrast

Therefore, after various adjustments and trial and error, the following filter was obtained:

<svg style="width: 0; height: 0">
    <filter id="filter" x="0" y="0" width="100%" height="100%">
        <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 1 0" result="15321EE7-E850-46DA-9DDF-119265E917FB"/>
        <feConvolveMatrix in="15321EE7-E850-46DA-9DDF-119265E917FB" kernelMatrix="0 1 0, 1 1 1, 0 1 0" order="3, 3" divisor="1.5" bias="0" edgeMode="none" kernelUnitLength="2" preserveAlpha="true" result="F12F0C6B-3D13-4F7A-A0B0-502118EA4557"/>
        <feBlend in="SourceGraphic" in2="F12F0C6B-3D13-4F7A-A0B0-502118EA4557" mode="lighten" result="4CE67E24-8ABA-4B72-97E8-737AD96949E5"/>
    </filter>
</svg>
Copy the code

Here is the node map corresponding to the filter code:

Similarly, we read it step by step according to the label:

  1. Import the source image, take the source imageSourceGraphicConnected tofeColorMatrixThe color matrix node extracts the red, blue, and Alpha channels in the source image to make the result appear to be devoid of any green components — in fact, the brightness of the green channel is set to zero
  2. willfeColorMatrixColor matrix node result concatenatedfeConvolveMatrixThe nodes of the convolution matrix, the center of the convolution kernel and all four values above and below are set to 1, which seems to give a luminous effect to the center pixel and the four pixels above, below, left and right. We can see in the result that the original light has some diffusion
  3. willfeConvolveMatrixConvolution matrix node processing results infeBlendMixed mode nodein2Input port for subsequent mixing
  4. The source imageSourceGraphicConnected tofeBlendMixed mode nodeinInput port, convolution matrix node result with source imagelighten(Lightened) mode for blending.

Get:

That’s all for this article. This article focuses on two examples to show you the power of SVG filters. In this example, instead of Canvas, WebGL, or even JavaScript, only the purest HTML/SVG elements are used. Since this is the lead article, the new filter primitives are not covered in detail, so stay tuned for the next few articles.

I have to say that every element (tag), whether HTML or SVG, has a very interesting story behind it. Understanding the role of various tags can sometimes help us implement potentially complex requirements in a native way and at a lower cost, or even discover the larger world.

Total directory:

  1. CSS filter paper
  2. The overview article
  3. Image introduction