矢量图形的使用

1. 矢量图形

在网络上，我们见到的最常用的两种类型的图片，分别是位图和矢量图 。

位图（Bitmap），又称栅格图，是使用像素网格来表示的图片。一个位图文件精确得包含了每个像素的位置和它的色彩信息。颜色信息用RGB组合或者灰度值表示。每个像素使用的信息位数越多，可用的颜色就越多，颜色表现就越逼真，相应的数据量越大。位图有，1、4、8、16、24及32位图像等。例如。例如，位深度为 1 的像素位图只有两个可能的值（黑色和白色），又称为二值位图。位深度为 8 的图像有 28（即 256）个可能的值。而位深度为 8 的灰度模式图像有 256 个可能的值。流行的位图格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)

RGB : 是一种将三种原色（红绿蓝）的色光以不同的比例进行添加，合成各种各样的色彩光。通过不同的比例，可以合成基本的颜色用16种。RGB颜色由三个数值控制，分别就是R G B 。而数值的表示方式有4种。浮点，百分比 八位数字 十六位数字。我可以调用css样式中的color属性中的rgb参数，来试试各种数值表示方式的区别。

color: (rgb(hsl(0, 100%, 50%)) #红色
color: (rgb(255，0，0)))        #红色
color: (rgb(#ff0000))          #红色

可以看到上述例子分别表示了 浮点，百分比 八位数字 三种表示方式。

矢量图（Vector graphics）是用于描述矢量图像的XML语言。它基本上是像 HTML 一样的标记，只是你有许多不同的元素来定义要显示在图像中的形状，以及要应用于这些形状的效果。SVG 用于标记图形，而不是内容。非常简单，你有一些元素来创建简单图形，如和。

他使用算法来定义 — 一个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。矢量图形现在常见于SVG、WMF、EPS、PDF、CDR或AI类型的图形文件格式中.但其中，SVG（可缩放矢量图形）格式是W3C所推荐的矢量图形标准。类似于推荐css为层叠样式表一样。

让我们用具体的图片来看一下，他们之间的不同。为了让你清楚地认识到两者的区别，我们来一个例子。（他的方式就比我写得优美0

你会发现当你放大网页的时候，区别就会变得明显起来 — 随着你的放大，PNG 图片变得像素化了，因为它存储是每个像素的颜色和位置信息 — 当它被放大时，每个像素就被放大以填满屏幕上更多的像素，所以图像就会开始变得马赛克感觉。矢量图像看起来仍然效果很好且清晰，因为无论它的尺寸如何，都使用算法来计算出图像的形状，仅仅是根据放大的倍数来调整算法中的值.

SVG 有一些预定义的形状元素，（比如矩形，圆形，线，椭圆......)可被开发者使用和操作.以下代码创建一个矩形。

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
</svg>

1.1 添加方式

1. img标签

位图形使用img标签引入图片，矢量图形也是图形的一种类型。根据继承性原则，也是可以使用img标签。

<img src="file-path" alt="">

但这种做法有几种缺点。

js无法操作图形。
如果要使用 CSS 控制 SVG 内容，则必须在 SVG 代码中包含内联 CSS 样式。（从 SVG 文件调用的外部样式表不起作用）
不能用 CSS 伪类来重设图像样式（如:focus :hover）

某些浏览器(如 IE 8 及更低版本，Android 2.3 及更低版本），无法显示svg图形。所以为了确保，在低版本浏览器中能够显示图形，我们可以使用src属性引入，位图形，而使用srcset属性引入svg图形。这样做就确保了兼容性，在低版本浏览器下显示png图片，而在其他支持svg图片的浏览器中显示svg图片。

<img src="equilateral.png" alt="triangle with equal sides" 
  srcset="equilateral.svg">

1.1 css样式表

div {
    background-image: url("image.svg"); 图片地址
    background-image: url("image.png"); 
}

像上面描述的<img>方法一样，使用 CSS 背景图像插入 SVG 意味着它不能被 JavaScript 操作，并且也受到相同的 CSS 限制。

在查询css样式中，顺便学到了一种新的写法。

background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */

rgba有4个参数，其中三个，就相当于 rgb的三个参数。最后一个参数是，就是opacity 属性，该属性添加元素的不透明度。

1.2 svg标签

<svg version="1.1"
    class = "class-name"
    id    = "id-name"
  <rect width="100px" height="100px" fill="white" stroke-width = "1" stroke = "red"/>
</svg>

可以使用 class 和id为元素取名。
并使用 CSS 修改样式，无论是在 SVG 中，还是 HTML 文档中的 CSS 样式规则
可以使用伪类选择器（如 :hover :focus

1.2 小练习

我们先分析一下。这里一共有三个图形。分别是矩形，三角形，半圆。需要注意的是，矩形和其他两个图形进行重合。三角形与Hello又进行重合。

我的思路。

创建div盒子，并设置好盒子的宽度和高度，并设置定位属性的相对定位。
用rect polygon circle 分别创建矩形，三角，和圆形，并为各标签设置绝对定位。
利用position的各种属性，定位到相应位置。
1. 因为这里是一个半圆，所以采取position移动圆形到矩形的末尾右边。因为设置了盒子的宽度，所以圆形的其余部分是溢出在盒子外面的。使用overflow属性，隐藏溢出的多余圆形，就形成了，四分之一半圆。
创建p标签，设置相应的字体大小和字体类型。设置绝对定位，并移动到相应位置。

以下是自己的还原效果。

HTML学习day4- 矢量图