趣味SVG图片制作指南之哆啦A梦篇

前言

在开发过程中，笔者经常需要使用到 svg 的图片，但是并不了解这个图片是如何制作的，趁着最近需要写分享，记录写下这篇文章，学习一下如何制作svg图片以及涉及到一些技术的细节，再分享一下如何制作哆啦A梦的 svg 的图片。或许现在已经有很多工具可以直接生成 svg 的图片，但是我们还是可以去了解一下它是如何生成的。 本篇文章通俗易懂，希望读者也能够体会到制作过程其中的趣味。

SVG

在开始制作哆啦A梦趣味图片之前，我们先了解一下什么是SVG。

MDN 的解释如下

可缩放矢量图形，即 SVG，是 W3C XML 的分支语言之一，用于标记可缩放的矢量图形。目前 SVG 在 Firefox、Opera、Webkit 浏览器、IE 等浏览器中已经部分实现。

本质上来说，SVG 是对于图像的描述，本质上来说也是文本文件，且体积较小，不管放大多少倍都不会失真。

如上所示，通常是以 .svg 结尾的文件。

基本语法

介绍完了 SVG 是什么，紧随其后的是需要介绍一下如何使用 SVG，相关的一些语法

• 标签

SVG 的代码都放在 标签中，笔者理解这个标签就相当于一个画布，定义了一块内容区域，可以向其中添加内容。

<svg width="300" height="200"></svg>
复制代码

标签中的 width、height 定义了图片在 html 中的宽度和高度，它可以是相对的，也可以是指定像素为单位，如果不设置的话默认大小是宽度为 300 像素，高度是 150 像素。

• 圆点形状标签

<circle cx="150" cy="100" r="80" />
复制代码

其中的 cx、cy、r 分别表示圆点的横坐标，纵坐标，半径

• 直线形状标签

<line x1="0" y1="0" x2="200" y2="200" />
复制代码

其中的 x1、y1 表示起点的横坐标和纵坐标，x2、y2 表示终点的横坐标和纵坐标

• 椭圆形状标签

<ellipse cx="100" cy="100" rx="30" ry="40" />
复制代码

其中的 cx、cy 代表椭圆的横坐标和纵坐标，rx、ry 分别表示椭圆横向轴和纵向轴的半径

• 文本标签

<text>shanshan<text />
复制代码

• 标签/ 标签

标签用于将多个形状组成一个组，方便使用 标签进行复用

<svg width="300" height="200">
  <g id="myCircle">
    <text x="32" y="20">圆形</text>
    <circle cx="50" cy="50" r="20"/>
  </g>

  <use href="" x="100" y="0" />
</svg>
复制代码

其中 标签的 x、y 属性表示引用组的左上角的坐标

• 标签

标签是一个比较灵活的标签，用来画出路径，使用它可以画出各种形状，不单单局限于固定的形状。

<svg width="900" height="900">
    <path d="
        M 0 0
        L 100 0
        L 100 100
        L 0 100
        Z" fill="green" />
</svg>
复制代码

path 的 d 属性为一个字符串，表示绘制的动作，每个动作后面紧跟着坐标。

其中 M 表示移动，并不会进行绘制，只是移动到了 0，0 这个位置，L 表示绘制从上一个点到该坐标的线条，Z 表示结束绘制。

样式语法

细心的同学发现了，在使用的时候我们 SVG 的标签的时候急需要样式进行修缮图形，SVG 中的样式有一下几个CSS 属性。

• fill：填充色

<svg width="300" height="200">
    <circle cx="150" cy="100" r="80" fill="green" />
</svg>
复制代码

• stroke：描边色

<svg width="300" height="200">
    <circle cx="150" cy="100" r="80" stroke="green" />
</svg>
复制代码

• stroke-width：边框宽度

<svg width="300" height="200">
    <circle cx="150" cy="100" r="80" stroke="green" stroke-width="20" />
</svg>
复制代码

当然也可以直接在标签中使用style进行样式属性编写

<svg width="300" height="200">
    <circle cx="150" cy="100" r="80" style="stroke:green; stroke-width:20"/>
</svg>
复制代码

基本使用

有关SVG的使用就不多加描述了，有下以几种常见的在 html 中使用方式：

• 使用 img 标签引入

<img src="https://juejin.cn/post/test.svg"/>
复制代码

• 使用 css 引入

.mySvg {
    background: url('./test.svg')
}
复制代码

哆啦A梦图片制作

上面介绍了 SVG 的基本语法和基本使用，接下来就笔者将使用上面介绍的标签制作哆啦A梦的卡通形象，话不多说，直接动手。

首先，我们将哆啦A梦划分为三个部分，分别为它的脑袋、身体、铃铛，SVG 的绘画支持从上到下的顺序，所以需要最后再绘制铃铛，将塔覆盖在哆啦A梦的身体上面，绘制出来的形象如下所示。

我们将哆啦A梦划分好部位之后，其基本的结构如下

<svg width="300" height="400">
    <g id="head">
    </g>
    <g id="body">
    </g>
    <g id="neck">
    </g>
</svg>
复制代码

脑袋

哆啦A梦的脑袋又可以划分成为头、眼睛、鼻子、嘴巴、胡须。

• 头

头部由两个一大，一小的圆构成，其中大圆为蓝底，小圆为白底，这个很好实现，我们先绘制这两个圆。

// doreamon.svg
<svg width="300" height="400">
    <style>
        .whiteCircle {
            fill: white;
            stroke: #333333;
            stroke-width: 2px;
        }
        .buleCircle {
            fill: #3F87FF;
            stroke: #333333;
            stroke-width: 2px;
        }
    </style>
    <g id="head">
        <circle cx="150" cy="115" r="105" class="buleCircle"/>
        <circle cx="150" cy="130" r="80" class="whiteCircle"/>
    </g>
    ...
</svg>
复制代码

• 眼睛和鼻子

眼睛则是又两个椭圆，椭圆上面覆盖一个黑点。鼻子则是一个底色为红色、黑边的圆

<svg width="300" height="400">
    <style>
        ...
        .nose {
            fill: #C93E01;
            stroke: #333333;
            stroke-width: 2px;
        }
    </style>
    <g id="head">
        ...
        <g id="eye">
            <ellipse cx="120" cy="70" rx="30" ry="35" class="whiteCircle"/>
            <circle cx="135" cy="85" r="5" />
            <ellipse cx="180" cy="70" rx="30" ry="35" class="whiteCircle" />
            <circle cx="165" cy="85" r="5" />
        </g>
        <circle cx="150" cy="110" r="15" class="nose"/>
    </g>
    ...
</svg>
复制代码

• 嘴巴

嘴巴分为两部分，一个是鼻子到嘴巴的直线，一个是微笑的嘴巴，嘴巴这部分则是使用 path 标签画出弧度（椭圆），且不填充颜色。

<svg width="300" height="400">
    <style>
        ...
        .mouthLine {
            fill: #333333;
            stroke: #333333;
            stroke-width: 2px;
        }
        .notFill {
            fill: none;
        }
    </style>
    <g id="head">
        ...
        <g id="mouth">
            <line x1="150" y1="125" x2="150" y2="180" class="mouthLine"/>
            <path
                d="M 100 157, A 80 100 0 0 0 200 157"
                class="mouthLine notFill"
            />
        </g>
    </g>
    ...
</svg>
复制代码

• 胡须

<svg width="300" height="400">
    <style>
        ...
        .mouthLine, .moustacheLine {
            fill: #333333;
            stroke: #333333;
            stroke-width: 2px;
        }
        .notFill {
            fill: none;
        }
    </style>
    <g id="head">
        ...
        <g id="moustache">
            <g>
                <line x1="90" y1="110" x2="130" y2="125" class="moustacheLine notFill" />
                <line x1="90" y1="130" x2="130" y2="130" class="moustacheLine notFill" />
                <line x1="90" y1="150" x2="130" y2="135" class="moustacheLine notFill" />
            </g>
            <g>
                <line x1="170" y1="125" x2="210" y2="110" class="moustacheLine notFill" />
                <line x1="170" y1="130" x2="210" y2="130" class="moustacheLine notFill" />
                <line x1="170" y1="135" x2="210" y2="150" class="moustacheLine notFill" />
            </g>
        </g>
    </g>
    ...
</svg>
复制代码

以上，头部就完成了。

身体

身体又可以划分为身体轮廓，手、脚和肚子

<svg width="300" height="400">
    <style>
        .whiteCircle {
            fill: white;
            stroke: #333333;
            stroke-width: 2px;
        }
        ...
    </style>
    ...
    <g id="body">
        <path d="
            M 80 215,
            L 30 245,
            L 45 285,
            L 85 265,
            L 85 340,
            L 140 340,
            A 15 50 0 0 1 160 340,
            L 215, 340,
            L 215 265,
            L 255 285,
            L 270 245,
            L 220 215,
            Z
            " class="body" />
        <g id="hand">
            <circle cx="40" cy="265" r="25" class="whiteCircle" />
            <circle cx="260" cy="265" r="25" class="whiteCircle" />
        </g>
        <g id="foot">
            <path d="
                M 85 340,
                A 2 2 0 0 0 80 360,
                L 140 360,
                A 1.5 2 0 0 0 140 340,
                Z
            " class="whiteCircle" />
            <path d="
                M 215 340,
                A 2 2 0 0 1 220 360,
                L 160 360,
                A 1.5 2 0 0 1 160 340,
                Z
            " class="whiteCircle" />
        </g>
        <g id="tummy">
            <circle cx="150" cy="255" r="58" class="whiteCircle"/>
            <path d="
                M 110 250,
                A 40 50 0 0 0 190 250,
                Z
            " class="whiteCircle" />
        </g>
    </g>
</svg>
复制代码

铃铛

<svg width="300" height="400">
    <style>
        ...
        .yellowCircle {
            fill: #F5ED27;
            stroke: #333333;
            stroke-width: 2px;
        }
        .mouthLine, .moustacheLine, .ringLine {
            fill: #333333;
            stroke: #333333;
            stroke-width: 2px;
        }
    </style>
    ...
    <g id="neck">
        <rect x="75" y="195" width="150" height="20" rx="8" ry="8" class="neck"/>
        <g id="ring">
            <circle cx="150" cy="218" r="15" class="yellowCircle"/>
            <line x1="138" y1="208" x2="162" y2="208" class="ringLine notFill" />
            <line x1="135" y1="212" x2="165" y2="212" class="ringLine notFill" />
            <circle cx="150" cy="220" r="5" />
            <line x1="150" y1="225" x2="150" y2="233" class="ringLine notFill" />
        </g>
    </g>
</svg>
复制代码

结尾

以上对于 SVG 的图片的制作就介绍完成了，如若 SVG 相关知识感兴趣，可以点击后面的链接去官方文档了解更多知识，当然如果本篇文章若有不正确的地方，欢迎指正。

链接

• 官网：www.w3.org/TR/SVG/
• MDN 介绍：developer.mozilla.org/zh-CN/docs/…
• 完整代码：