1、位图（BMP, PNG, JPG等）基于颜色的描述
2、矢量图（SVGm AI等） 基于数据的描述

我也要学习前端的知识

svg使用方式

W3C标准：http://www.w3.org/TR/SVG11/

矢量图和位图

        位图（BMP、PNG、JPG等）  基于颜色的描述

        矢量图（SVG、AI等） 基于数学的描述

SVG--使用方式

1. 在浏览器中直接打开

2.在HTML中使用 <img> 标签引用

3.直接在HTML中使用 SVG 标签

4.作为 CSS 背景

• 1.1

https://www.w3.org/TR/SVG11/

打开方式： 

  直接用浏览器打开.svg文件

  <image>标签src属性引用

  css方式，background设置url(some.svg)

  html标签中使用<svg></svg>来使用

• 1.2

<rect>矩形 <circle>圆形 <ellipse>椭圆 <line>线条 <polyline>折线 <polygon>多边形

<g> <path>

fill strock stroke-width transform

• 1.3

document.createElementNS(ns, tagName)

element.appendChild(childElement)

element.setAttribute(name, value)

element.getAttribute(name)

• 1.4

svg使用方式

svg  w3c标准地址

1.        简介

使用XML描述的矢量文件

W3C标准（https://www.w3.org/TR/SVG11/）

2.        svg显示方式

2.1.         浏览器直接打开

2.2.         HTML中使用<img>标签

2.3.         直接在HTML中使用SVG标签

2.4.         作为CSS背景