乐趣区

关于前端:零基础教你学前端43初识SVG

解决网站图标问题的最佳计划——SVG!

SVG 是一种基于 XML 语法的图像格式,英文全称是:Scalable Vector Graphics,即可缩放矢量图,是 W3C 的一项倡议。

咱们用手机拍摄的照片,图片格式个别都是基于像素解决的,图片放大会含糊失真。SVG 则是属于对图像的形态形容,所以它实质上是文本文件,体积较小,且不论放大多少倍都不会失真。咱们来实在的体验一下。关上阿里巴巴矢量图标库网站,(https://www.iconfont.cn/) 

在素材库菜单里抉择矢量插画库,抉择任意一个主题点击进去,鼠标划入图标,点击下载按钮,在弹框中别离点击 SVG 下载和 PNG 下载,这个图标的两种格式文件就下载到本地电脑了,将图片拷贝到咱们的目录下。当初,它们能够当做图片插入到网页中了。

关上编辑器,新建一个 svg-demo.html 文件。补全根底代码,在 body 里增加一个 img 标签,属性 src 的资源门路设置为当前目录的 png 图片名,width 宽度设置为 100,height 高度也设置为 100。复制另一个 img 标签,src 的值批改为当前目录的 svg 图片名。保留文件。

在浏览器中关上网页,两张图片显示了。目前看,两张图片没有什么区别,但当咱们把两张图片逐步放大时,就会发现,png 格局的图片边界含糊了,svg 格局的图片边界仍然清晰。

svg 图片怎么制作呢?返回编辑器,咱们在 VSCode 里关上 png,能够间接预览图片,其实 png 图片是基于像素解决的,咱们不能在 VSCode 里编辑。再关上 svg 图片,咱们发现 svg 图片是用相似 html 代码绘制进去的。因而,咱们能够通过 html 元素来绘制 svg 图片!

能够应用 svg 标签来实现。svg 标签是 svg 图形的一个容器,它是一个双标签,根本语法是:尖角号 svg,尖角号 /svg。外面蕴含很多子标签,用于绘制各种图形。svg 也能够了解为绘制图形的画布,它有两个重要的属性,width,定义画布的宽度,height,定义画布的高度,它们值都是数字。

 再次关上 svg-demo.html 文件,在图片下方增加 br 标签。再增加一个 svg 标签,给 svg 定义属性 width 等于 800,height 等于 600。保留。

回到浏览器,刷新,按键盘 F12,关上开发者工具,在 elements 页签下,点击 svg 元素,咱们看到,一个 800 乘 600 的画布就做好了。

文章配套视频链接 https://www.bilibili.com/vide…

退出移动版