svg究竟是什么?
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究竟是什么?的更多相关文章
- SVG文件:从Illustrator导文件到Web
可缩放矢量图形(SVG)是早在1998年就已经有的一种矢量图像格式.它总是和Web一起发展,但是直到现在才开始赶上Web发展的步伐.如今我们已经不能否认SVG和Web的相关性,所以让我们来学习一下从I ...
- 理解SVG坐标系统和变换: transform属性
SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换.然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别.在这篇文章中我们讨论SVG的transf ...
- 蛋疼的SVG外部引用方式
SVG在html页面中有两种引用方式: 1. 内联.就是直接将SVG图形写在html的svg标签中,比如: <html> <head></head> <bod ...
- 获取SVG中g标签的宽度高度及位置坐标
1. 问题的出现 对于普通的HTML元素,有很多获得其宽度width.高度height.距左left.距顶top等属性的方法: 类似offsetWidth,clientWidth,width之类的,通 ...
- 那些好用的 VS Code 插件,究竟是如何提高编码效率的?
在上一篇文章中我们已经对 vscode 插件有了一个初步的认识与了解了,接下去我们就要"揭秘"一下市面上那些好用的 vscode 插件究竟是如何帮我们提高工作效率的. 本文首发于「 ...
- 学习ASP.NET Core,怎能不了解请求处理管道[1]: 中间件究竟是个什么东西?
ASP.NET Core管道虽然在结构组成上显得非常简单,但是在具体实现上却涉及到太多的对象,所以我们在 "通过重建Hosting系统理解HTTP请求在ASP.NET Core管道中的处理流 ...
- 【Web动画】SVG 实现复杂线条动画
在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...
- 【Web动画】SVG 线条动画入门
通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...
- SVG:textPath深入理解
SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...
随机推荐
- SQL实战——02. 查找入职员工时间排名倒数第三的员工所有信息
查找入职员工时间排名倒数第三的员工所有信息CREATE TABLE `employees` (`emp_no` int(11) NOT NULL,`birth_date` date NOT NULL, ...
- 生成器generator和迭代器Iterator
一.列表生成式 在学习生成器迭代器之前先了解一下什么是列表生成式,列表生成式是Python内置的非常简单却强大的可以用来创建list的生成式.什么意思?举个例子,如果想生成列表[0,1,2 ...
- 【随笔】菜刀(代码执行)函数和命令执行函数详解及Getshell方法
代码执行函数 VS 命令执行函数 一直想整理这两块的内容,但是一直没时间弄,直到前两天碰上一个写入了菜刀马但是死活连不上菜刀的站,顿时不知道怎么继续了,所以就趁这个机会整理了一下代码执行函数怎么get ...
- ATMEGA的SPI总线 - 第1部分
转自: 1. https://www.yiboard.com/thread-782-1-1.html 2.https://mansfield-devine.com/speculatrix/2018/0 ...
- 小白使用Hystrix
Hystrix是什么东西?百度一下: 没错,hystrix是豪猪的意思,作为SpringCloud微服务系统中保持服务稳定的重要组件,正如它的名字一样,它对整个系统起到了保护的作用. 在许多文章当中把 ...
- Tomcat配置Gizp 客户端使用okHttp3
找到tomcat 在 server.xml 新增如下配置 <Connector connectionTimeout="20000" port="8088" ...
- turtle库元素语法分析
一.turtle原理理解: turtle库是Python中一个有趣的图形绘制函数库.原名(海龟),我们想象一只海龟,位于显示器上窗体的正中心,在画布上游走,它游走的轨迹就形成了绘制的图形. 对于小海龟 ...
- day67:Vue:es6基本语法&vue.js基本使用&vue指令系统
目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...
- 【模拟】CF 796C Bank Hacking
题目大意 洛谷链接 给定一棵带点权树,选出一个最佳的根节点,使得根节点的点权不变,它的儿子点权加1,其余点点权加2,并使最大点权最小,输出这个最小的最大点权. 其他见链接(懒). PS:原题面很不好总 ...
- 说明资源路径位置类型无法解析The type javax.servlet.http.HttpServletResponse cannot be resolved.
导入dispatch项目后报错: 解决办法:在项目上单击鼠标右键> Add Libraries 选择 Server Runtime,下一步 选中Apache Tomcat7 完成 切换标 ...