1.资源查找

首先需要在svg图片资源网站寻找符合自己需求的原始svg图片，以下是资源统计

有许多网站提供免费的SVG图片资源，无论是图标、插画还是其他类型的矢量图形。以下是几个推荐的SVG图片网站：

  1. SVG Repo

    • 网站链接：SVG Repo
    • 提供超过50万的矢量SVG格式的插画和图标，可以免费下载使用。

  2. Icons8

    • 网站链接：Icons8
    • 主要以提供免费的平面化设计图标为主，并可根据不同平台的设计风格来筛选。

  3. Flaticon

    • 网站链接：Flaticon
    • 提供多种样式的图标，包括PNG、SVG等格式，适合各种项目需求。

  4. UnDraw

    • 网站链接：UnDraw
    • 提供高质量的免费SVG插画，可以根据需要调整配色。

  5. Freepik

    • 网站链接：Freepik
    • 包含了大量的矢量图、PSD文件、图标集以及插画，部分资源需要会员资格或署名。

  6. Iconfont

    • 网站链接：Iconfont
    • 阿里巴巴推出的矢量图标库，支持矢量图标下载、在线存储、格式转换等功能。

  7. Ikonate

    • 网站链接：Ikonate
    • 提供可自定义的矢量图标，注重无障碍访问和性能优化。

  8. Simple Icons

    • 网站链接：Simple Icons
    • 收录了众多品牌的Logo，全部为SVG格式，方便设计师查找使用。

  9. Boxicons

    • 网站链接：Boxicons
    • 提供了一系列简单干净的SVG图标集，适用于Web开发等多种用途。

  10. Feather Icons

    • 网站链接：Feather Icons
    • 开源图标集，包含简洁美观的矢量图标，易于在项目中使用。

2.选择自己喜欢的svg图下载改造

比如这样，我找到一个鱼的图片
image-20250501190755842

它的svg代码如下
<?xml version=”1.0” encoding=”utf-8”?>

这里展示出来就是一条鱼。然后我们进行改造：

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，允许在网页上直接显示高质量的图像。下面介绍SVG的基本组成以及修改时可以调整的部分。

SVG的基本组成

  1. SVG Namespace (命名空间)

    • 每个SVG文档都需要声明一个XML命名空间，通常是xmlns="http://www.w3.org/2000/svg"。这告诉解析器如何解释文档中的元素。

  2. 标签

    • 这是SVG图形的根元素，包含了整个图形的所有内容。你可以在这里设置宽度(width)、高度(height)和视图框(viewBox)等属性。
    • viewBox属性特别重要，它定义了SVG图形的坐标系统和缩放比例。

  3. 基本形状元素

    • <rect>：用于绘制矩形。
    • <circle>：用于绘制圆形。
    • <ellipse>：用于绘制椭圆。
    • <line>：用于绘制直线。
    • <polyline>：用于绘制由多个线段组成的路径。
    • <polygon>：用于绘制封闭的多边形。
    • <path>：最灵活的元素，可以用来绘制任何形状。

  4. 文本元素

    • <text>：用于添加文本到SVG图形中，支持字体样式、大小、颜色等属性。

  5. 分组元素

    • <g>：用于将多个元素组合在一起，方便一起移动或变换。

  6. 渐变与图案

    • <linearGradient> 和 <radialGradient>：用于创建线性或径向渐变。
    • <pattern>：用于定义可重复使用的图案。

  7. 滤镜效果

    • <defs> 和 <filter>：用于定义和应用各种滤镜效果，如模糊、阴影等。

  8. 其他

    • <image>：用于嵌入外部图片。
    • <use>：用于重复使用已定义的图形元素。

修改时可以调整的部分

  • 尺寸：通过修改<svg>标签中的width、height或viewBox属性来调整整个图形的尺寸。
  • 位置与变换：使用transform属性对单个或一组元素进行平移(translate)、旋转(rotate)、缩放(scale)等操作。
  • 颜色与填充：通过fill属性改变元素的颜色；对于线条，可以使用stroke和stroke-width属性。
  • 文本样式：可以通过font-family、font-size、font-weight等属性调整文本的外观。
  • 透明度：使用opacity属性调整元素的整体透明度；也可以针对填充色和描边单独设置透明度。
  • 滤镜效果：利用<filter>元素添加视觉特效，比如阴影、模糊等。

了解这些基础知识后，你可以根据需要对SVG图形进行精确控制和定制化修改。例如，如果你想改变某个图形的颜色，只需找到对应的元素并修改其fill或stroke属性即可。如果想要给文本加粗，则可以在<text>元素中添加font-weight="bold"属性。

<?xml version=”1.0” encoding=”utf-8”?>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<svg width="180" height="60" viewBox="0 0 180 60"  class="icon"  version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <!-- 背景矩形（可选） -->
  <rect x="0" y="0" width="180" height="60" rx="10" ry="10" fill="#FFFFFF" stroke="#ddd" stroke-width="1"/>

  <!-- 文字部分 -->
  <text x="10" y="40" font-family="Arial, sans-serif" font-size="20" fill="#000" text-anchor="start" font-weight="900"
        style="filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.1)); transition: all 0.3s ease;">
    在摸鱼
  </text>

  <!-- 鱼图标区域（右对齐） -->
  <g transform="translate(70, -10) scale(0.08)">
   <path d="M228.6 632.9c57.6-65.4 57.6-164.1-0.1-229.5-79.5 28.3-128.4 70.8-128.4 114.7 0 43.6 47.8 86.1 128.5 114.8zM491.2 705.1l0.1-3.7c-15.5 0.9-31.1 1.4-46.8 1.4-17 0-34-0.6-50.8-1.6 22.4 15.1 48.9 23.6 76.8 24.1 5.5 0.1 10.6-1.9 14.5-5.7 3.9-4 6.1-9.1 6.2-14.5zM632.4 337.8c0.4-17.5-26.1-37.6-64.9-38.6-73.3-1.9-144.1 11.9-202 38.3 25.7-2.6 52-3.9 78.9-3.9 66.4 0 130.7 8 187.5 23.4l0.5-19.2zM639.8 699.6c27.6 0 51-18.2 59-43.1-28.6 12.3-61.2 22.5-97 30.1 10.6 8.3 23.9 13 38 13z" fill="#663333" /><path d="M850.4 518.2c0-50.5 17.3-98.9 48.5-137.6-47.3 3.8-89.3 31.5-111.5 74.2-0.1 0.3-2 3.1-3 4.2-6.9 7.1-18.2 7.4-25.4 0.5-25.4-24.5-65.3-45.8-115.2-61.5-58.7-18.5-127.7-28.3-199.5-28.3-56.1 0-109.6 5.8-159.1 17.3-6.8 1.6-13.4 3.2-19.9 5 56.3 74.4 56.3 178.1 0.1 252.5 25.3 6.9 52.4 12.2 80.9 16 31.7 4.2 64.7 6.3 97.9 6.3 41.8 0 82.7-3.3 121.6-9.9 84.7-14.3 155.1-43.4 193.1-80 7.1-6.9 18.5-6.7 25.4 0.5 1 1 1.8 2.1 2.5 3.3 0.2 0.3 0.4 0.6 0.5 1 0 0.1 0.1 0.1 0.1 0.2 22.1 42.6 64.1 70.2 111.3 74-31-38.8-48.3-87.2-48.3-137.7z" fill="#663333" /><path d="M956.5 360.3c1.8 6.7-0.4 13.8-5.7 18.3-41 34.9-64.5 85.8-64.5 139.6s23.5 104.7 64.5 139.6c5.3 4.5 7.5 11.6 5.7 18.2-1.8 6.7-7.2 11.8-14 13.1-10.5 2-21.4 3-32.4 3-57.7 0-110.7-28.2-143-74.9-9 6.9-18.8 13.6-29.6 19.8v0.6c0 53.9-43.9 97.8-97.8 97.8-32.1 0-61.7-15.5-79.8-41.3-10.8 1.6-21.7 3-32.7 4.2l-0.1 7.3c-0.3 15-6.4 29.1-17.2 39.6-10.6 10.2-24.4 15.8-39.1 15.8h-1c-53.1-0.9-102-24.9-135.4-66.1-38-5.4-73.7-13.5-106.2-24.3-104.2-34.2-164-89.8-164-152.4 0-37.4 21.7-73 62.6-103 36.2-26.5 86.7-48 146.1-62.2 70.8-59.2 180.8-92.6 295.5-89.6 57.1 1.5 100.9 34.6 99.9 75.4l-0.8 29.2c39.9 13.8 73.7 31.2 99.5 51.2 32.3-46.7 85.2-74.9 143-74.9 11 0 21.9 1 32.4 3 6.9 1.3 12.3 6.3 14.1 13z" fill="#663333" /><path d="M641 466.7c3-9.4-2.3-19.5-11.7-22.5-54-17.1-118-26.1-184.9-26.1-9.9 0-18 8-18 18 0 9.9 8 18 18 18 63.3 0 123.5 8.4 174 24.4 1.8 0.6 3.6 0.8 5.4 0.8 7.7-0.1 14.7-5 17.2-12.6z" fill="#4EC8D8" /><path d="M898.9 380.6c-31.2 38.7-48.5 87.1-48.5 137.6s17.3 98.9 48.5 137.6c-47.2-3.8-89.2-31.4-111.3-74 0-0.1-0.1-0.1-0.1-0.2-0.2-0.4-0.4-0.7-0.5-1-0.7-1.1-1.5-2.2-2.5-3.3-6.9-7.1-18.2-7.4-25.4-0.5-38 36.6-108.4 65.7-193.1 80-38.9 6.6-79.8 9.9-121.6 9.9-33.3 0-66.2-2.1-97.9-6.3-28.5-3.8-55.6-9.1-80.9-16 56.2-74.4 56.2-178.1-0.1-252.5 6.5-1.7 13.1-3.4 19.9-5 49.5-11.5 103-17.3 159.1-17.3 71.8 0 140.8 9.8 199.5 28.3 49.9 15.8 89.8 37.1 115.2 61.5 7.1 6.9 18.5 6.7 25.4-0.5 1-1.1 2.9-3.9 3-4.2 22-42.6 64-70.3 111.3-74.1z" fill="#4EC8D8" /><path d="M698.7 656.5c-8 25-31.4 43.1-59 43.1-14.1 0-27.3-4.7-38-13 35.8-7.7 68.4-17.8 97-30.1z" fill="#92E4EA" /><path d="M629.3 444.2c9.4 3 14.7 13.1 11.7 22.5-2.4 7.7-9.5 12.6-17.1 12.6-1.8 0-3.6-0.3-5.4-0.8-50.6-16-110.8-24.4-174-24.4-9.9 0-18-8-18-18 0-9.9 8-18 18-18 66.8 0 130.7 9 184.8 26.1z" fill="#663333" /><path d="M567.5 299.2c38.8 1 65.4 21.2 64.9 38.6l-0.5 19.2c-56.8-15.3-121.1-23.4-187.5-23.4-26.9 0-53.3 1.3-78.9 3.9 57.9-26.3 128.7-40.2 202-38.3zM491.2 701.3l-0.1 3.7c-0.1 5.5-2.3 10.6-6.2 14.3-3.9 3.8-9.1 5.8-14.5 5.7-27.9-0.5-54.4-9-76.8-24.1 16.8 1.1 33.8 1.6 50.8 1.6 15.8 0.2 31.4-0.3 46.8-1.2z" fill="#92E4EA" /><path d="M225.7 491.2c0-11.4-9.3-20.7-20.7-20.7-11.4 0-20.7 9.3-20.7 20.7 0 11.4 9.3 20.7 20.7 20.7 11.4 0 20.7-9.2 20.7-20.7z" fill="#663333" /><path d="M228.5 403.4c57.7 65.4 57.7 164.1 0.1 229.5-80.7-28.7-128.5-71.2-128.5-114.7 0-43.9 48.9-86.5 128.4-114.8z" fill="#92E4EA" /><path d="M205 491.2m-20.7 0a20.7 20.7 0 1 0 41.4 0 20.7 20.7 0 1 0-41.4 0Z" fill="#663333" />  </g>

 <!-- 定义文字阴影效果 -->
    <defs>
        <filter id="text-shadow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="2.5"/>
            <feOffset dx="2" dy="2" result="offsetblur"/>
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>

</svg>

gdh

效果是这样的。