码迷,mamicode.com
首页 > 其他好文 > 详细

SVG以及它的使用方式

时间:2020-01-12 13:35:58      阅读:57      评论:0      收藏:0      [点我收藏+]

标签:XML   文件中   org   路径   方法   优点   图像   img   方式   

一:什么是svg?

SVG英文全称为Scalable Vector Graphics,意思为可缩放的矢量图
 
科普:
计算机中有2种图形,一种是位图,一种是矢量图
传统的 jpg / png / gif图都是位图
位图是一个个很小的颜色小方块组合在一起的图片。一个小方块代表1px
位图的优点和缺点
优点:色彩丰富逼真
缺点:放大后会失真,体积大
 
矢量图是用XML格式定义, 通过各种「路径」和「填充颜色」来描述渲染的的图片
矢量图的缺点和优点
优点:方法后不会失真,体积小
缺点:不易制作色彩变化太多的图像
 
二:SVG常见的四种方式
1.内嵌到HTML中(直接在HTML中绘制)
2.通过浏览器直接打开SVG文件
    注意点:
    如果需要将svg保存到一个单独的文件中, 并且需要通过浏览器直接打开, 那么就必须给svg添加一个属性
    xmlns="http://www.w3.org/2000/svg"
3.在HTML的img标签中引用
4.作为css背景使用
 
 
 
 
 

SVG以及它的使用方式

标签:XML   文件中   org   路径   方法   优点   图像   img   方式   

原文地址:https://www.cnblogs.com/gsq1998/p/12182403.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!