SVG基础知识 Adobe Illustrator绘制SVG

SVG
svg在线编辑器 https://editor.method.ac/

多边形

使用的是polygon标签
该标签能创建含有不少于三个边的图形。
如下

    
        
    

效果如下


SVG基础知识 Adobe Illustrator绘制SVG_第1张图片
image

其坐标为路径

曲线

poliline 为曲线
同样输入的为坐标
此时为了和上一个区分,将file设置为不填充,设置描边为black

    
        
    

效果如下


SVG基础知识 Adobe Illustrator绘制SVG_第2张图片
image

其中 填充为非零绕数原则

路径

path类似于笔的路径
其拥有一个属性d,该属性d由下方的单词的首字母组成。

Moveto

画笔的起点

    
        
    

Lineto

该执行从画笔的起点到位置绘制一条直线


SVG基础知识 Adobe Illustrator绘制SVG_第3张图片
image
    
        
    

Curveto

绘制贝塞尔曲线,由三个参数组成,考虑两个控制点

直接选择画板手绘吧,实在看不懂了,貌似缺少了椭圆的一些数学知识

总结

绘制一颗心,以下是在网上找的

    
        
    

没看懂。。。


SVG基础知识 Adobe Illustrator绘制SVG_第4张图片
image

文本

text元素
依旧当做图片处理


SVG基础知识 Adobe Illustrator绘制SVG_第5张图片
image
    
        Hello world
    

stroke属性

此为属性,定义任何类型的线条

    
        Hello world
    
SVG基础知识 Adobe Illustrator绘制SVG_第6张图片
image

模糊效果

对图片模糊
先引入图片


此时图片显示


SVG基础知识 Adobe Illustrator绘制SVG_第7张图片
image

接着定义可复用的组即defs

defs 标签为可复用的组标签

使用的是file用于存放滤镜的地方

使用file标签

使用feGaussianBlur滤镜即模糊滤镜
使用的in的参数为SourceGraphic表示图形作为原始的输入

此外还有背景图,通道等

stdDeviation 表示模糊的程度
完整的如下


    
        
    

接着再次使用滤镜


SVG基础知识 Adobe Illustrator绘制SVG_第8张图片
image

一个模糊

效果不错

此外还有阴影渐变,等滤镜,等就太复杂了,设计到矩阵变换等高等数学的内容,自己有心无力。

在adobe ai中生成svg

使用adobe ai 生成svg文件

创建一个画板

SVG基础知识 Adobe Illustrator绘制SVG_第9张图片
image

选择字符

SVG基础知识 Adobe Illustrator绘制SVG_第10张图片
image
SVG基础知识 Adobe Illustrator绘制SVG_第11张图片
image

添加字体

SVG基础知识 Adobe Illustrator绘制SVG_第12张图片
image

转曲

SVG基础知识 Adobe Illustrator绘制SVG_第13张图片
image
SVG基础知识 Adobe Illustrator绘制SVG_第14张图片
image

获取svg代码

SVG基础知识 Adobe Illustrator绘制SVG_第15张图片
image
SVG基础知识 Adobe Illustrator绘制SVG_第16张图片
image
SVG基础知识 Adobe Illustrator绘制SVG_第17张图片
image

画出图像

SVG基础知识 Adobe Illustrator绘制SVG_第18张图片
image

代码如下




    svg页面


    

这是一个svg

到此,可以发挥ai的想象啦。包括绘制图形,使用滤镜,画图图标等等,哪怕使用图片导入ai,绘制出矢量图。完美的ai和html的一次结合

一个svg.js框架

http://svgjs.com/ 使用该svg.js框架可以快速的操纵svg

你可能感兴趣的:(SVG基础知识 Adobe Illustrator绘制SVG)