Scalable Vector Graphics(SVG)

SVG 全称为可缩放矢量图形（Scalable Vector Graphics），是一种基于 XML 语法的矢量图形格式。与传统的位图不同，SVG 图形具有无限的缩放和无失真的优点，因此适用于各种不同大小的设备和分辨率。

SVG 可以描述的图形包括线条、曲线、多边形、圆、矩形、文本等，其优点包括：

1. 支持无限缩放，不会出现失真和模糊；
2. 矢量图形，所以文件大小比位图小得多；
3. 支持动态修改和交互，能够实现复杂的动态效果；
4. 支持多种渐变、过渡和滤镜效果，具有良好的视觉效果。

SVG 的使用场景包括：

1. 网页设计：SVG 图像可以无损缩放，因此适用于网页上的各种图形和图标；
2. 数据可视化：SVG 可以用来制作各种图表和图形，如条形图、折线图、饼图等；
3. 游戏开发：SVG 支持动态效果和交互，可用于游戏人物、背景等的绘制；
4. 手机应用：SVG 可以适用于手机应用的各种图形和图标。

总之，SVG 具有矢量图形的优点，适用于各种不同的应用场景。

一个常见的SVG效果是阴影。以下是一个简单的例子：

<svg width="100" height="100">
  <rect x="20" y="20" width="60" height="60" fill="#4b96e9" filter="url(#shadow)"/>
  <filter id="shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
    <feOffset dx="2" dy="2" result="offsetblur"/>
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.7"/>
    </feComponentTransfer>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

这个SVG图形的外观是一个蓝色的正方形，带有一个微弱的阴影效果。这个阴影是通过应用一个包含多个SVG滤镜的filter元素来实现的。这些滤镜按顺序应用于图形，并且将处理的结果集成在一起，最终获得了一个阴影效果。

SVG可以应用许多不同的效果，以下是其中的一些：

1. 阴影效果：

<svg width="100" height="100">
  <rect x="20" y="20" width="60" height="60" fill="#4b96e9" filter="url(#shadow)"/>
  <filter id="shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
    <feOffset dx="2" dy="2" result="offsetblur"/>
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.7"/>
    </feComponentTransfer>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

1. 变形效果：

<svg width="120" height="120">
  <rect x="10" y="10" width="100" height="100" transform="translate(20) rotate(-45 60 60)" fill="#4b96e9"/>
</svg>

1. 渐变效果：

<svg width="100" height="100">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#4b96e9"/>
      <stop offset="100%" stop-color="#0067b3"/>
    </linearGradient>
  </defs>
  <rect x="20" y="20" width="60" height="60" fill="url(#gradient)"/>
</svg>

1. 填充效果：

<svg width="100" height="100">
  <path d="M10 10 L90 10 L50 90 Z" fill="#4b96e9"/>
</svg>

1. 描边效果：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" stroke="#4b96e9" stroke-width="4" fill="none"/>
</svg>

1. 文本效果：

<svg width="200" height="100">
  <text x="50%" y="50%" text-anchor="middle" alignment-baseline="central" font-size="36" fill="#4b96e9">SVG</text>
</svg>