在我们开始使用SVG前，让我们先了解一下 SVG，并且解释一下为什么使用SVG。
SVG全称是Scalable Vector Graphics，如果你使用过adobe Illustrator的话，相信你对这种适量格式的图片并不陌生！
为什么使用SVG？
-
文件非常小
-
能够无损失的缩放尺寸
-
在Retina显示屏上效果超棒
-
能够控制图片样式设计，例如互动和过滤filter
浏览器支持
-
IE8及其更低版本不支持
-
Android 2.3及其更低版本不支持.精心开发5年的UI前端框架！
-
其它浏览器都支持
如果你需要支持这些版本的浏览器的话，你可以使用Modernizr，如下：
if (!Modernizr.svg) {
$(".gblogo img").attr("src", "images/logo.png");
}
或者使用如下更简单的代码：
<img src="gblogo.svg" onerror="this.onerror=null; this.src="gblogo.png"">
SVG文件作为一般图片使用
你可以作为图片来直接使用，如下：
<img src="logo.svg" alt="gbtags logo">
SVG文件作为背景图片使用
我们也可以使用SVG图片作为背景图片使用，如下： 精心开发5年的UI前端框架！
<a href="http://www.csswang.com" class="logo"> csswang.com </a>
css代码:
.logo {
display: block;
text-indent: -9999px;
width: 100px;
height: 100px;
background: url(gblogo.svg);
background-size: 100px 82px;
}
} |
使用行内SVG
你可以直接将SVG代码拷贝到body中，将会看到图片，如下：
<body> <!-- 将SVG代码拷贝到此处，将会显示图片 --> </body>
使用CSS控制SVG
你可以使用CSS来控制SVG文件，下面代码将控制鼠标悬浮时的图片背景颜色：
<g class="logo" transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
以上代码定义了一个logo的class，然后我们可以在CSS定义如下：
.logo:hover{
fill: #F08000;
...
}
注意SVG中我们使用fill而不是background来定义背景色。精心开发5年的UI前端框架！
甚至可以使用filter来控制模糊度，如下：
.logo:hover{
fill: #F08000;
filter: url(#logoFilter);
}
当你使用鼠标hover图片时，会有如下效果。精心开发5年的UI前端框架！
总结
SVG是一个非常强大的图片格式，可以帮助你高效的处理图片，拥有比JPG或者PNG更灵活强大的图形展示方式，相信如果加以时日，必定成为最流行的图片处理方式！
相关推荐
本教程将聚焦于一个具体的实例——使用HTML5和CSS3实现图片的3D倒影效果。这种效果不仅能让网页元素看起来更具有立体感，还能增加视觉吸引力，提升用户体验。 首先，HTML5是下一代超文本标记语言，它扩展了HTML4的...
《疯狂HTML 5/CSS 3/JavaScript讲义》是一本深入浅出的教程，旨在帮助读者掌握现代网页开发的核心技术。配套的源代码提供了丰富的实例，帮助学习者直观理解HTML5、CSS3和JavaScript的实际应用。以下是这些关键知识点...
这个例子中的"css3使用svg绘制唐老鸭图片样式代码"是一个教程，教你如何用CSS3配合SVG实现唐老鸭的图形绘制。 首先，SVG的基本结构包含一个`<svg>`根元素，其中可以包含各种形状元素，如`<rect>`（矩形）、`...
本教程将详细讲解如何使用CSS3和SVG技术来实现一个交互式的图片放大镜效果。这个效果是通过网格布局、SVG剪切路径以及鼠标悬停动画来实现的，旨在提升用户对图片细节的观察。 首先，我们需要创建一个基本的HTML结构...
此工具是学生时代写前端时候，将SVG图片encode为css background-image的小工具，后面域名已经莫得了，现在估计也没人在用这个工具了，留待以后整理 @todo 迁移到gitee 线上工具地址【传送门】: 用的方便还请给个star...
这份"HTML5与CSS3基础教程（第八版）源码"提供了丰富的实例和代码，帮助初学者深入理解这两种技术。 HTML5是超文本标记语言的最新版本，其核心在于增强网页的语义性和可访问性。以下是一些HTML5的关键知识点： 1. ...
《60023Web前端开发案例教程》是针对HTML5和CSS3技术的一套实践性强、内容丰富的教学资源，特别适用于初学者和希望提升Web前端技能的学习者。本教程以PPT课件的形式呈现，旨在通过实例讲解，帮助读者掌握网页设计与...
在《HTML5与CSS3基础教程（第7版）》这本权威指南中，作者深入浅出地介绍了这两个技术的核心概念和实际应用。源代码包含在提供的压缩包中，这些文件反映了书中各个章节的实例，方便读者实践和学习。 HTML5是超文本...
HTML5和SVG（可缩放矢量图形）是现代网页开发中的重要技术，它们结合使用可以创造出丰富多彩的交互式和动态视觉效果。本教程将深入探讨如何利用这两者来构建一个蝴蝶漫天飞舞的3D动画场景。 首先，HTML5是超文本...
在本教程中，我们将深入探讨HTML5的新特性以及CSS3的高级样式规则，帮助你掌握创建现代网页所需的核心技能。 HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，它的主要改进包括： 1. 结构性元素...
本教程将针对初学者，详细讲解如何使用CSS来实现按钮在鼠标悬停时的颜色变化效果。 首先，我们要理解CSS选择器的基本概念。选择器是CSS用来定位HTML元素的工具，比如`<button>`标签就是一个常见的HTML元素。在我们...
包含254个文件，涵盖92个TypeScript源文件、35个SCSS样式文件、34个PNG图片资源、30个HTML页面文件、15个JSON数据文件、14个CSS样式文件、6个GIF动画文件、5个SVG矢量图形文件、3个JavaScript脚本文件、3个EOT字体...
本教程将详细讲解如何利用HTML5和SVG创建一个鼠标拖动气泡滑块动画特效。 首先，HTML5是超文本标记语言的第五版，它引入了许多新的元素和API，使得网页内容的结构化和交互性大大增强。在本项目中，`<svg>`元素是...
本教程通过结合CSS3和SVG，展示了如何实现一个点击SVG图标时的动画特效，属于JS特效中的“其它代码”类别。 首先，SVG图标的优势在于其矢量特性，使得图形在任何分辨率下都能保持清晰，不会因放大而失真。在HTML中...
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富、视觉效果出色的网页提供了强大的工具。在这个“html5+css3练习.zip”压缩包中，包含了用于新手学习的实例，特别是针对那些对HTML5和CSS3还不太熟悉的...
3. **样式和属性**：SVG图形可以通过内联样式或CSS进行样式化。包括填充色（fill）、描边色（stroke）、描边宽度（stroke-width）、描边样式（stroke-dasharray）等。此外，还有透明度（opacity）、变换（transform...
3. **CSS结合SVG边框** 为了在H5中实现SVG边框特效，我们通常会将SVG代码内联插入到HTML文档的`<style>`标签中，或者将其放在独立的SVG文件中并通过`<use>`标签引用。然后，我们可以通过CSS控制SVG元素的样式，例如...
HTML5和CSS3是现代网页开发的两大核心技术，它们极大地丰富了网页的展现形式和功能。HTML5作为超文本标记语言的最新版本，主要提升了在结构化内容、多媒体支持和离线存储等方面的能力，而CSS3则在布局、动画和样式...
- **CSS背景**：SVG也可以用作CSS的背景图片。 #### 二、基本图形和属性 - **基本图形**： - `<rect>`：矩形 - `<circle>`：圆形 - `<ellipse>`：椭圆 - `<line>`：直线 - `<polyline>`：折线 - `<polygon>`...
【CSS3教程和css3新特性专题】 CSS3是 Cascading Style Sheets（层叠样式表）的第三版，是Web设计领域的一个重要里程碑，引入了许多新的功能和特性，极大地增强了网页设计的灵活性和表现力。这个专题将深入探讨CSS3...