千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

上海
  • 北京
  • 郑州
  • 武汉
  • 成都
  • 西安
  • 沈阳
  • 广州
  • 南京
  • 深圳
  • 大连
  • 青岛
  • 杭州
  • 重庆
当前位置:成都千锋IT培训  >  技术干货  >  初识SVG

初识SVG

来源:千锋教育
发布人:qyf
时间: 2022-12-13 18:18:49

  解决网站图标问题的最佳方案——SVG!

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

  我们用手机拍摄的照片,图片格式一般都是基于像素处理的,图片放大会模糊失真。SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。

  我们来真实的体验一下。

  打开阿里巴巴矢量图标库网站,(https://www.iconfont.cn/)

图片14

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

图片15

  打开编辑器,新建一个 svg-demo.html 文件。补全基础代码,在 body 里添加一个 img 标签,属性 src 的资源路径设置为当前目录的 png 图片名,width 宽度设置为 100. height 高度也设置为 100.复制另一个 img 标签,src 的值修改为当前目录的 svg 图片名。保存文件。

  在浏览器中打开网页,两张图片显示了。目前看,两张图片没有什么区别,但当我们把两张图片逐渐放大时,就会发现,png 格式的图片边界模糊了,svg 格式的图片边界依然清晰。

图片16

  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 的画布就做好了。

  这节课我们就讲到这,下节课开始,我们在画布上绘制各种美妙的图形,大家加油!

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

10年以上业内强师集结,手把手带你蜕变精英

请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通

免费领取

今日已有369人领取成功

刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取

猜你喜欢LIKE

如何做用户分层?

2022-12-12

如何进行有效的数据分析?

2022-12-12

如何建立产品的增长模型?

2022-12-12

最新文章NEW

四种方式创建SpringBoot项目

2023-02-27

表单综合案例(中)

2022-12-13

表单综合案例(上)

2022-12-13

相关推荐HOT

更多>>

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>