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. 这么美的“vector容器”,你确定你不看吗?

    内容思维导图: 一.vector基本概念: 1.功能: vector数据结构和数组非常相似,也称为单端数组. 2.vector和普通数组的区别: 不同之处在于数组是静态空间,而vector是可以动态扩 ...

  2. Linux设置主机名称与host映射

    uname -n :查看host对应的域名 2.在 /etc/hostname 删除原来的重新配置需要的域名   3.在 /etc/hosts 中添加域名和映射ip   4.重启系统   5.其他主机 ...

  3. Dell XPS 7590 Hackintosh

    网上主流引导Hackintosh的工具有Chameleon, Clover和OpenCore. 但是随着Hackintosh重要驱动开发团队acidanthera逐渐转向OpenCore,后者显然才是 ...

  4. 009 01 Android 零基础入门 01 Java基础语法 02 Java常量与变量 03 什么是变量?

    009 01 Android 零基础入门 01 Java基础语法 02 Java常量与变量 03 什么是变量? 什么是变量? 形象化的生活中的例子理解什么是变量以及变量的三个元素 我们可以根据客人要求 ...

  5. matlab中upper 将字符串转换为大写

    参考:https://ww2.mathworks.cn/help/matlab/ref/fprintf.html?searchHighlight=fprintf&s_tid=doc_srcht ...

  6. 题解【[USACO18FEB]New Barns 】

    浅谈一下对于这题做完之后的感受(不看题解也是敲不出来啊qwq--) 题意翻译 Farmer John注意到他的奶牛们如果被关得太紧就容易吵架,所以他想开放一些新的牛棚来分散她们. 每当FJ建造一个新牛 ...

  7. mycat ER分片

    有一类业务,例如订单(ORDER)跟订单明细表(ORDER_DETAIL),明细表会依赖于订单,就是该会存在表的主从关系,这类似业务的切分可以抽象出合适的切分规则,比如根据用户ID切分,其它相关的表都 ...

  8. 网站搭建-云服务器ECS的使用

    1. 查看购买的云服务器实例,重置密码 2. 查找IP进行查看,此时网页时不存在的,开始配置: 3. 登录putty或其他终端,进行网页搭建,先按教程走一遍,然后再做个性化处理: #安装Apache ...

  9. Python之集合详解

    定义: 1.不同元素组成 2.无序 3.集合中的元素必须是不可变类型 创建集合 s = {1,2,3,4,5,6,7,8} 1.定义可变集合 >>> set_test = set(' ...

  10. eclipse安装报错

    例如这样 原因是被墙了 个人搭**后完美解决