什么是SVG？及SVG引入方式

如题，什么是SVG呢？

百度百科答：SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

我们用过canvas，不管是安卓、iOS还是HTML，都有canvas标签，用来绘制简单的图形。

	图形类别	类别区别	识别色彩	代码标签
Canvas绘制图形	位图	放大变模糊、失真	丰富	基于HTML既有标签绘制
SVG绘制图形	矢量图	放大不会失真，依然清晰	稍逊于位图	基于XML绘制，可自定义标签

svg可以做出比HTML更加复杂，更加炫酷的图形出来。

svg可以作为单独的一个文档出现，文档后缀为.svg。

HTML引入SVG有多种方式，下面讲解四种方式：

图片
背景
框架

直接引用

<body>hello world!!!
<!--  图片方式引入--><img src="standard_svg.svg" />
<!--  背景方式引入--><div style="height:200px;width:200px;background:url(standard_svg.svg) no-repeat"></div>
<!--  框架方式引入--><iframe src="first-圆-人脸.svg"></iframe>
<!--  直接在html中引入svg代码--><div id="svg_div"><svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><circle cx="100" cy="100" r="50" fill="red"></circle></svg></div>
</body>

什么是SVG？及SVG引入方式相关推荐

svg图片如何引入vue
有时候在项目开发时需要用到svg图片,那我们如何引入呢? 具体配置如下: 1.安装对应的loader npm i svg-sprite-loader -D 2.src/components下创建Svg ...
在HTML中插入SVG的几种方式
SVG (Scalable Vector Graphics) 可缩放矢量图,是一种基于XML语法的图像格式.其他图像格式都是基于像素处理的,SVG则是属于对图像的形状描述,所以它本质上是文本文件,体积 ...
01 【介绍使用步骤引入方式基础配置】
1.Echarts-介绍常见的数据可视化库: D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源 Javascript 数 ...
SVG 阴影 SVG 渐变 SVG 动画
1 SVG 阴影 1.1 <defs> SVG 允许我们定义以后需要重复使用的图形元素.建议把所有需要再次使用的引用元素定义在 <defs> 元素里面.这样做可以增加 SVG ...
前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
web前端（13）—— 了解JavaScript，JavaScript的引入方式
从本篇博文开始,将进入web前端方便最关键最重要的部分--javascript,学到后面你就知道它真的太重要了什么是JavaScript JavaScript一种直译式的脚本语言,是一种动态类型.弱 ...
05CSS的引入方式
1.CSS的三种样式表按照CSS样式书写的位置(或者引入的方式),CSS样式表可以分成三大类: 内部样式表(嵌入式) 行内样式表(行内式) 外部样式表(链接式) 2.内部样式表内部样式表(内嵌样式 ...
11月8日学习内容整理：js的引入方式，变量数据类型，运算符，流程控制，函数...
js是一门成熟的编程语言,专门用浏览器客户端执行的语言一.js的引入方式 1.直接在body标签中使用script标签写js语言 2.通过script标签导入js文件,<script sr ...
python全栈开发 * 表格标签表单标签 css 引入方式 * 180807
html部分一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...
CSS 从入门到放弃系列：CSS的引入方式
css的四种引入方式内联方式(行间样式) <div style="width:100px;height: 100px; background-color: red"> ...

什么是SVG？及SVG引入方式

什么是SVG？及SVG引入方式相关推荐

最新文章

热门文章