svg究竟是什么?

1 要点

要点1:svg与jpg/png等格式的用途完全不同,不可相提并论,没有可比性,不可互相替代。

要点2:日常生活中,我们用相机拍摄自然景象得到的照片和视频,能且只能用jpg/png/mp4等格式存储,不可用svg格式存储。在自然景象中,像素之间没有确定的数学函数关系。我们称自然景象为图像,只能用像素点描述,无法用数学函数描述。

要点3:svg用于人为设计(特别强调人为设计,而非自然存在的)的点、线、面构成的图形,这些图形可用数学函数来表达。svg无法描述和表达自然界的景象。

概念

特点

生成者

描述方法

文件格式

图像

像素点之间无确定的数学函数关系

自然

逐个像素

jpg/png/mp4等

图形

点与点之间有确定的数学函数关系

人为

数学函数

svg

2 svg举例说明

假设要设计一个线条非常优美的图标,由椭圆、双曲线和抛物线构成。

假设这个图标非常巨大,由一万亿个点构成。

我们可以用以下要素描述这个图标:

S1:椭圆方程:长轴长度,短轴长度,x的范围,线条颜色。

S2:双曲函数或方程:x的范围,线条颜色

S3:抛物线函数或方程:x的范围,线条颜色

描述以上要素大约需要256字节,有了这256字节,软件会根据x的范围逐点绘制每条曲线,最终绘制出由一万亿个点构成的美丽图标!

设想一下,这个图标若用jpg/png去绘制,将耗费多少数据量。

结论

结论1:svg仅适用于人为设计的图形,这些图形可以用数学函数来表达,这些数学函数可以用很少的数据来表达。最终达到的目的:用很少的数据表达很复杂、很优美的图形。

结论2:自然景象(图像)中的点与点之间无关联关系,无法用数学函数表达,只能用像素点表达,jpg/png/mp4适用于表达自然景象(图像)。

另外,一定要辨别清楚图形和图像这两个概念。

图形是人为设计的,可用数学函数来表达,svg针对这种用途。

图像是自然存在的,无法用数学函数来表达,jpg/png/mp4针对这种用途。

svg究竟是什么?的更多相关文章

  1. SVG文件:从Illustrator导文件到Web

    可缩放矢量图形(SVG)是早在1998年就已经有的一种矢量图像格式.它总是和Web一起发展,但是直到现在才开始赶上Web发展的步伐.如今我们已经不能否认SVG和Web的相关性,所以让我们来学习一下从I ...

  2. 理解SVG坐标系统和变换: transform属性

    SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换.然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别.在这篇文章中我们讨论SVG的transf ...

  3. 蛋疼的SVG外部引用方式

    SVG在html页面中有两种引用方式: 1. 内联.就是直接将SVG图形写在html的svg标签中,比如: <html> <head></head> <bod ...

  4. 获取SVG中g标签的宽度高度及位置坐标

    1. 问题的出现 对于普通的HTML元素,有很多获得其宽度width.高度height.距左left.距顶top等属性的方法: 类似offsetWidth,clientWidth,width之类的,通 ...

  5. 那些好用的 VS Code 插件,究竟是如何提高编码效率的?

    在上一篇文章中我们已经对 vscode 插件有了一个初步的认识与了解了,接下去我们就要"揭秘"一下市面上那些好用的 vscode 插件究竟是如何帮我们提高工作效率的. 本文首发于「 ...

  6. 学习ASP.NET Core,怎能不了解请求处理管道[1]: 中间件究竟是个什么东西?

    ASP.NET Core管道虽然在结构组成上显得非常简单,但是在具体实现上却涉及到太多的对象,所以我们在 "通过重建Hosting系统理解HTTP请求在ASP.NET Core管道中的处理流 ...

  7. 【Web动画】SVG 实现复杂线条动画

    在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...

  8. 【Web动画】SVG 线条动画入门

    通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...

  9. SVG:textPath深入理解

    SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...

随机推荐

  1. vs调试程序缺少 msvcp140d.dll 解决方法

    简介一下吧: 如果只是为了解决问题请直接看第      7       点 ,谢谢. vs2013运行刚安装的opencv问题总结,尤其是电脑还很渣的情况下------花了我起码2天样子----很无奈 ...

  2. JavaScript封装函数:获取下一个/上一个兄弟元素节点

    要求: 获得下一个/上一个兄弟元素节点,不包括文本节点等 解决IE兼容性问题 代码实现: 获得下一个兄弟元素节点: function getNextElement(element) { var el ...

  3. Jmeter JDBC Request 使用详解

    本篇博文讲解以MySQL为例,搞懂JDBC Request中MySQL的使用方法,换成其它数据库, 如Oracle.PSQL也会很容易上手. 一.基本配置 1.首先我们先了解一下,不同数据库的驱动类和 ...

  4. 网站搭建-云服务器是什么-云服务器ECS是什么

    学习上瘾了,本博客关闭,后期再总结整理.

  5. 我是先学C语言还是先学C++,实不相瞒,鱼和熊掌可兼得!

    这是最近一周时间几个读者小伙伴所提的问题,我顺手截了两个图. 实不相瞒,这类问题之前也经常看到.     每次遇到这种问题,看起来很简单,但是打字一时半会还真说不清,想想今天周末了,写一篇文章来统一聊 ...

  6. spring boot:用dynamic-datasource-spring-boot-starter配置多数据源访问seata(seata 1.3.0 / spring boot 2.3.3)

    一,dynamic-datasource-spring-boot-starter的优势? 1,dynamic-datasource-spring-boot-starter 是一个基于springboo ...

  7. centos8平台使用ulimit做系统资源限制

    一,ulimit的用途 1, ulimit 用于shell启动进程所占用的资源,可用于修改系统资源限制 2, 使用ulimit -a 可以查看当前系统的所有限制值 使用ulimit -n <可以 ...

  8. Python操作CSV和Excel

    概述 csv是最通用的文件格式,本质是文本文件,用记事本即可打开.同一行中每个字段间用逗号分隔,在csv中显示的是在不同单元格中,在记事本中显示的是一行中用逗号分隔. xls是excel专用格式,是二 ...

  9. Jquery特效之=》仿京东多条件筛选特效

    仿京东多条件筛选特效 * { margin: 0; padding: 0; list-style-type: none } a, img { border: 0 } body { font: 12px ...

  10. python 实现多层列表拆分成单层列表

    有个多层列表:[1, 2, 3, 4, [5, 6, [7, 8]], ['a', 'b', [2, 4]]],拆分成单层列表 使用内置方法 结果和原列表顺序不同 def split(li): pop ...