svg在线画图-常用的矢量图绘图软件有那些？

栅格图形

,也叫做点阵图,位图(bitmap),像素图,图像是由像素构成的,像素的多少将决定图像的显示质量和文件大小,图像的分辨率越高,其显示越清晰,文件所占的空间也就越大。图像放大时会失真,可以看到整个图像是由很多像素组合而成的。

矢量图形

使用 XML 来描述二维图形和绘图程序,矢量图像在放大或改变尺寸的情况下其图形质量不会有所损失。

<canvas>和<svg>都是HTML5推荐使用的图形技术,Canvas基于像素,提供2D绘制函数,是一种HTML元素类型,依赖于HTML,只能通过脚本绘制图形;SVG为矢量,提供一系列图形元素(Rect, Path, Circle, Line …),还有完整的动画,事件机制,本身就能独立使用,也可以嵌入到HTML中,SVG很早就成为了国际标准,目前的稳定版本是1.1 C Scalable Vector Graphics (SVG) 1.1 (Second Edition) ,两者的主要特点见下面的表格:

SVG

Canvas

图形和图表

svg和Canvas都可以表现图表(如柱状图, 散点图, 饼图等等),常用的图形图表库中,百度的echarts是基于Canvas实现的,D3是基于svg实现的。

xmlns属性可定义SVG 命名空间(如果将SVG内嵌在HTML页面中并作为该页面提供,则不需要xmlns属性)。

使用 <g> 元素,可以对多个元素进行分组

path元素是SVG基本形状中功能最强大的一个,它不仅能创建其他基本形状,还能创建更多其他形状。你可以用path元素绘制矩形(直角矩形或者圆角矩形)、圆形、椭圆、折线形、多边形,以及一些其他的形状,例如贝塞尔曲线、2次曲线等。

path元素的形状是通过属性d来定义的,属性d的值是一个“命令+参数”的序列。

下面的命令可用于路径数据:(命令详情可查看 )

viewBox的四个参数分别代表:最小X轴数值;最小y轴数值;宽度;高度。

用于svg整体缩放

表示虚线描边。可选值为:none, <dasharray>, inherit. 其中,none表示不是虚线;<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线段的长度。可以是固定的长度值,也可以是百分比值;inherit表继承。

表示虚线的起始偏移。可选值为:<percentage>, <length>, inherit. 百分比值,长度值,继承。

如果stroke-dasharray值很大,超过了描边路径的总长度,加以css动画改变stroke-dashoffset值,就会出现一段时间内描边显示从无到有。

画矢量图的软件如下:

1、Pixso的矢量设计功能,非常适合没有任何基础的人群,它特有的画板工具、钢笔工具以及智能操作等等,利于理解。

2、mastergo是一款可跨平台在线使用的矢量设计软件,当然在协作交付方面mastergo也是有着优异的表现。

3、蓝湖是一款产品文档和设计图的共享平台,并且能够帮助企业团队更好的管理文档和设计图等相关文档。

4、Sketch是一款功能轻便并且能够满足UI设计师日常所需的矢量设计软件。

5、AdobeXD是一款适用于网站和应用程序等的快速且功能强大的UI/UX设计解决方案。

svg格式用“AdobeIllustrator”软件做,可以查看而且能够再次编辑svg文件,还能导出保存为svg或其他格式的文件。SVG可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。由于SVG是XML文件,SVG图像可以用任何文本编辑器创建,但它往往是与一个绘图程序一起使用,如Inkscape,更方便地创建SVG图像。\r\n更多关于svg格式用什么软件做,进入:https://m.