1, Understand SVG shadows

1. <defs> and <filter>

All Internet SVG filters are defined in the <defs> element.

The <defs> element is an abbreviation for definition. Contains definitions of special elements, such as filters.

The <filter> element has the required id attribute to identify the filter. The graph then points to the filter you want to use.

2,<feOffset>

The <feoffset> element is used to create shadow effects. Our idea is to take an SVG graph (image or element) and move it a little on the xy plane.

Offset a rectangle

<svg>
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

• The < Filter > element id attribute defines the unique name of a filter
• The filter attribute of the <rect> element is used to link the element to the "f1" filter
• in = "SourceGraphic" refers to the blur effect to be applied to the whole picture

3,<feGaussianBlur>

• Blur the offset rectangle with <fegaussianblur>
• The stdDeviation attribute of the <fegaussianblur> element defines the blur amount

<svg>
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

2, SVG filter

Svg filter includes

• feBlend: filter combined with image
• feColorMatrix: for color filter conversion
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur: blur filter
• feImage
• feMerge: multi filter superposition filter
• feMorphology
• feOffset: filter shadows
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight: used for lighting filtering
• fePointLight: used for lighting filtering
• FeSpotLight: used for lighting filtering

• Filter properties

• Attribute function
• x. Y provides the coordinates of the upper left corner to define where to render the filter effect. (default: 0)
• Width, height draw the width and height of the filter container box (the default value is 100%)
• result is used to define the output name of one filter effect, so that it can be used as the input (in) of another filter effect
• in specifies the input source of the filter effect, which can be the result exported by a filter or the following six values

Six values of in attribute

in value function

• SourceGraphic this keyword indicates that the graphic element itself will be the original input of the <filter> primitive
• SourceAlpha this keyword indicates that the graphic element itself will be used as the original input of the "Filter > primitive. SourceAlpha has the same rules as SourceGraphic, except that SourceAlpha only uses the non transparent part of the element
• Backgroundlmage is similar to SourceGraphic, but it can be used in the background. BackgroundAlpha needs to be explicitly set, which is similar to SourceAlpha, but can be used on the background. Explicit setting required
• FillPaint uses fill paint as if it were placed on an infinite plane
• StrokePaint uses stroke painting as if it were placed on an infinite plane

Mode of the feBlend filter

• Normal - normal
• multiply - positive overlay
• screen - filter color
• Dark - darken
• Lighten - lighten

• The <fecolormatrix> filter is used to convert the offset image to make it closer to the black color.

<svg>
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

3, SVG gradient

1. Understand SVG gradients

Gradient is a smooth transition from one color to another. In addition, you can transition multiple colors to the same element.

There are two main types of SVG gradients:

• Linear gradient
• Radial gradient

2. SVG linear gradient <lineargradient>

The <lineargradient> element is used to define a linear gradient.
The <1ineargradient> element must be nested within the <defs> tag< Defs> tags are abbreviations of definitions and contain definitions of special elements (such as gradients).

Linear gradients can be defined as horizontal, vertical, or angular gradients:

• When y1 and y2 are equal and x1 and x2 are different, a horizontal gradient is created
• When x1 and x2 are equal and y1 and y2 are different, a vertical gradient is created

When x1 and x2 are different and y1 and y2 are different, an angle gradient is created

<svg width="1000" height="1000">
        <defs>
            <!-- Linear gradient -->
            <linearGradient id="linear" x1="0%" y1="10%" x2="0%" y2="100%">
                <!-- Set gradient,use stop label -->
                <stop offset="20%" stop-color="pink"></stop>
                <stop offset="100%" stop-color="#0ff"></stop>
            </linearGradient>
            <linearGradient id="one" x1="0%" y1="0%" x2="100%" y2="0%">
                <!-- Set gradient,use stop label -->
                <stop offset="20%" stop-color="pink"></stop>
                <stop offset="100%" stop-color="#0ff"></stop>
            </linearGradient>
        </defs>
        <rect x="0" y="0" width="200" height="100" fill="url(#linear)">
        </rect>
        <rect x="0" y="100" width="200" height="100" fill="url(#one)">
        </rect>
        <text x="200" y="100" font-size="50" fill="url(#Linear) "> font linear gradient -- vertical </text>
        <text x="200" y="200" font-size="50" fill="url(#One) "> font linear gradient -- horizontal </text>
    </svg>

 

3. Radial gradient

 <svg width="1000" height="1000">
        <defs>
            <!-- Radial Gradient  -->
            <radialGradient id="two" cx="50%" cy="50%" r="80%" fx="50%" fy="50%">
                <stop offset="20%" stop-color="pink"></stop>
                <stop offset="100%" stop-color="#0ff"></stop>
            </radialGradient>
        </defs>
        <rect x="0" y="200" width="200" height="100" fill="url(#two)">
        </rect>
        <text x="200" y="300" font-size="50" fill="url(#Two) "> font radial gradient </text>
    </svg>