位图，亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。然而，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。

提到SVG，我想大多数人的第一印象是矢量缩放。是的，SVG是制作Logo、图标及按钮的理想选择。和位图不同，SVG可以在不失真情况下进行任意的缩放。同时，和传统Web字体不同的是，SVG可以使用多种颜色、渐变甚至复杂的过滤器来处理文字。

位图和SVG有哪些优缺点呢？

图像类型

组成

优点

缺点

位图

像素

 只要有足够多的不同色彩的像素，就可以制作出色彩丰富的图象，逼真地表现自然界的景象 缩放和旋转容易失真，同时文件容量较大

SVG

数学向量

 文件容量较小，在进行放大、缩小或旋转等操作时图象不会失真 不易制作色彩变化太多的图象

下面让我们来对比一下位图和SVG图片使用方法的异同。

位图使用方法

位图在Web项目中的应用已经非常成熟了，如果需要常规的图片展示，我们通常不会使用多个图片，而是把需要的图片放置在一张图片中，例如：

这个例子里集合8个24×24 图标在一个大小为192×24 图片中。这样做的好处是，我们只需要发送一次 HTTP请求即可下载我们所需要的所有图标，减少浏览器请求并发数的压力，提高网页加载速度，增强用户体验。

当我们需要引用其中一个图标时，我们可以使用以下这段 CSS 代码来显示图片：

#print

{

    width: 24px;

    height: 24px;

    background: url("sprite.png") -168px 0;

}

SVG 使用方法

SVG同样可以把多个图像集成到一个文件中。而且在交互性上要优于位图图片；你可以使用图片名称来引用SVG对象，相比于通过手动计算像素位置通过CSS样式定位图片，显然方便了很多。

在使用之前，我们先创建一个很简单的SVG，包含三个独立图标：一个绿色的圆形、一个红色的方形和一个蓝色的三角形。

<?xml version="1.0"?>

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

<g class="sprite" id="circle">

    <ellipse cy="50" cx="50" ry="45" rx="45" stroke-width="5" stroke="#00ff00" fill="#00ff00" fill-opacity="0.75" />

</g>

<g class="sprite" id="square">

    <rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#ff0000" fill="#ff0000" fill-opacity="0.75" />

</g>

<g class="sprite" id="triangle">

    <path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#0000ff" fill="#0000ff" fill-opacity="0.75" />

</g>

</svg>

XML代码中，每个形状被指定了SpriteClass和ID。当前可以看到一个堆叠效果。如图：

有一个小技巧-你可以通过CSS样式来控制只显示当前目标图层，隐藏其它图层：

<defs>

    <style><![CDATA[

        .sprite { display: none; }

        .sprite:target { display: inline; }

    ]]></style>

</defs>

因此，如果我们可以通过定制链接来显示目标对象，例如，SVG文件名称为 sprite.xml，我们通过在URL中添加哈希值来指定目标对象，如sprite.xml#circle ，我们就可以仅显示圆形所在图层。

我们可以通过很多途径添加 SVG文件，如Object、iframe、img标签或者是作为CSS背景添加（Chrome、Safari和Opera 15+都不支持以img标签或者CSS背景添加形式添加SVG）。

<html lang="en">

<head>

<meta charset="utf-8" />

</head>

<style>

body

{

    font-family: sans-serif;

    margin: 10px;

    color: #222;

    background-color: #eee;

}

div.sprite

{

    display: inline-block;

    width: 100px;

    height: 100px;

}

div#circle { background-image: url("sprite.svg#circle"); }

div#square { background-image: url("sprite.svg#square"); }

div#triangle { background-image: url("sprite.svg#triangle"); }

</style>

<body>

<h2>object</h2>

<object type="image/svg+xml" width="100" height="100" data="sprite.svg#circle"></object>

<object type="image/svg+xml" width="100" height="100" data="sprite.svg#square"></object>

<object type="image/svg+xml" width="100" height="100" data="sprite.svg#triangle"></object>

<h2>iframe</h2>

<iframe src="sprite.svg#circle" width="100" height="100" frameborder="0"></iframe>

<iframe src="sprite.svg#square" width="100" height="100" frameborder="0"></iframe>

<iframe src="sprite.svg#triangle" width="100" height="100" frameborder="0"></iframe>

<h2>img</h2>

<img src="sprite.svg#circle" width="100" height="100" />

<img src="sprite.svg#square" width="100" height="100" />

<img src="sprite.svg#triangle" width="100" height="100" />

<h2>CSS background</h2>

<div id="circle" class="sprite"></div>

<div id="square" class="sprite"></div>

<div id="triangle" class="sprite"></div>

</body>

</html>

IE9和Chrome中看到的效果如下：

通过以上的描述，你现在大概了解 SVG 的使用方法及优势了吧？尽管它是如此的实用，但是关于SVG技术的前景众说纷纭。尽管SVG具有可扩展、易交互并且节省网

络资源等诸多优势，SVG还是没有在Web项目中被广泛应用。这是什么原因呢？

  • SVG 不支持早期的 IE 浏览器 -仅支持IE9及更高版本。
  • SVG诞生于1999年-至今仍然不温不火，给人感觉像一门既古老又不受欢迎的技术。
  • 设计工具稀少-导致使用起来很困难。
  • SVG基于XML-给大多初学者的印象很复杂，望而却步。

SVG将何去何从，让我们拭目以待。

位图和SVG用法比较的更多相关文章

  1. 依赖于设备的位图(DDB) ,CreateCompatibleBitmap用法

    DDB(Device-dependent bitmap)依赖于具体设备,这主要体现在以下两个方面: DDB的颜色模式必需与输出设备相一致.例如,如果当前的显示设备是256色模式,那么DDB必然也是25 ...

  2. [2011-3-9 12:59 ]As3.0中的位图(Bitmap/BitmapData)用法

    1.位图使用(模糊)滤镜 //创建一个矩形区域的BitmapData var bmd:BitmapData = new BitmapData(80, 30, false, 0xefefef); //画 ...

  3. HTML5_04之SVG绘图

    1.关于Canvas绘制图像: 问题:需要绘制多张图片时,必须等待所有图片加载完成才能开始绘制:而每张图片都是异步请求,彼此没有先后顺序,哪一张先加载完成完全无法预测: 方案: var progres ...

  4. SVG颜色、渐变和填充

    颜色 RGB和HSL都是CSS3支持的颜色表示方法,一般普遍使用是RGB.PS:HSL浏览器兼容. RGB RGB即是代表红.绿.蓝三个通道的颜色,通过对红(R).绿(G).蓝(B)三个颜色通道的变化 ...

  5. SVG系列教程：SVG简介与嵌入HTML页面的方式

    地址:http://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html 随着技术向前的推进,SVG相关的讨论也越渐频繁 ...

  6. 8款超好用的SVG编辑工具用起来

    随着响应式网页的发展,对于内容呈现的要求也越来越高,尤其是图像.为了在各种设备上能实现自然伸缩或扩展而不影响图片质量,所以矢量图形(SVG)正变得越来越受欢迎. 大家都知道,在计算机图形学中,有两种主 ...

  7. Anaconda安装Graphviz, mac下Graphviz安装, pcharm中调用pycharm, Graphviz典型例子

    mac下的Graphviz安装及使用 2017年10月13日 13:30:07 阅读数:7495 一.安装 Graphviz http://www.graphviz.org/ mac用户建议直接用ho ...

  8. html5高级

    Html5高级 项目回顾 Day 01 第三阶段知识体系: (1)AJAX异步请求 数据库.PHP.HTTP.原生AJAX.jQuery中的AJAX (2)HTML5高级特性 九大新特性 (3)Boo ...

  9. 使用Graphviz绘图（一）

    前言 日常开发或者编写课程论文时,除了代码文档的编写,其中一个很重要的部分就是需要绘制流程图.示意图 绘制流程图有很多工具,一般常见的就有如下几种: Word.PPT等办公软件 Viso以及开源的Di ...

随机推荐

  1. [Leetcode]931.下降路径最小和

    题目链接 这一题目首先需要弄懂题目的意思,下降路径最小和指的是在方阵中可以从上往下行走,走过后获得的值最小,方向可以是走左下,右下,直下. 题目和传统的动态规划一样,把边界的值先初始化,然后通过状态转 ...

  2. StringBuffer、StringBuilder、冒泡与选择排序、二分查找、基本数据类型包装类_DAY13

    1:数组的高级操作(预习) (1)数组:存储同一种数据类型的多个元素的容器. (2)特点:每个元素都有从0开始的编号,方便我们获取.专业名称:索引. (3)数组操作: A:遍历 public stat ...

  3. .NET平台常用框架

    分布式缓存框架: Microsoft Velocity:微软自家分布式缓存服务框架. Memcahed:一套分布式的高速缓存系统,目前被许多网站使用以提升网站的访问速度. Redis:是一个高性能的K ...

  4. Quartz.NET在ASP.NET 中使用

    Quartz.NET 项目地址 http://quartznet.sourceforge.net/ common logging是一个通用日志接口,log4net是一个具体实现 ,也可以使用NLog, ...

  5. SimpleVisitorMemberType类的visitClassType解读

    举个例子,如下: class CA<T>{ public T getVal(){ return null; } } interface IA{} interface IB{} public ...

  6. 详解C#特性和反射（四）

    本篇内容是特性和反射的最后一篇内容,前面三篇文章: 详解C#特性和反射(一) 详解C#特性和反射(二) 详解C#特性和反射(三) 一.晚期绑定(Late Binding)是一种在编译时不知道类型及其成 ...

  7. Vue + Element UI 实现权限管理系统 前端篇（四）：优化登录流程

    完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面,放置一个登录界面表单,包含账号密码输入框和登录重置按钮. <template> <el- ...

  8. docker（二）部署docker容器虚拟化平台

    yum安装方法参考:https://www.cnblogs.com/yufeng218/p/8370670.html https://www.cnblogs.com/straycats/p/84112 ...

  9. C++类型转化小结

    之前面试就有被问过关于使用类型转换的问题,因为主要是做Windows驱动的开发,一直都是纯C语言+汇编,当时真的是只用过C语言的强制类型转换,C语言的强制类型转换(Type Cast)很简单,不管什么 ...

  10. 对CAP原理的理解

    对CAP原理的理解 CAP原理按照定义,指的是C(Consistency)一致性,A(Availability)可用性,P(Partition tolerance)分区容错性在一个完整的计算机系统中三 ...