`

HTML5/CSS3教程:使用SVG图片

阅读更多

在我们开始使用SVG前,让我们先了解一下 SVG,并且解释一下为什么使用SVG。

SVG全称是Scalable Vector Graphics,如果你使用过adobe Illustrator的话,相信你对这种适量格式的图片并不陌生!

为什么使用SVG?

  • 文件非常小

  • 能够无损失的缩放尺寸

  • 在Retina显示屏上效果超棒

  • 能够控制图片样式设计,例如互动和过滤filter

浏览器支持

如果你需要支持这些版本的浏览器的话,你可以使用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更灵活强大的图形展示方式,相信如果加以时日,必定成为最流行的图片处理方式!

0
0
分享到:
评论

相关推荐

    HTML5/CSS3实现图片倒影3D效果

    本教程将聚焦于一个具体的实例——使用HTML5和CSS3实现图片的3D倒影效果。这种效果不仅能让网页元素看起来更具有立体感,还能增加视觉吸引力,提升用户体验。 首先,HTML5是下一代超文本标记语言,它扩展了HTML4的...

    疯狂HTML 5/CSS 3/JavaScript配套源代码

    《疯狂HTML 5/CSS 3/JavaScript讲义》是一本深入浅出的教程,旨在帮助读者掌握现代网页开发的核心技术。配套的源代码提供了丰富的实例,帮助学习者直观理解HTML5、CSS3和JavaScript的实际应用。以下是这些关键知识点...

    css3使用svg绘制唐老鸭图片样式代码

    这个例子中的"css3使用svg绘制唐老鸭图片样式代码"是一个教程,教你如何用CSS3配合SVG实现唐老鸭的图形绘制。 首先,SVG的基本结构包含一个`&lt;svg&gt;`根元素,其中可以包含各种形状元素,如`&lt;rect&gt;`(矩形)、`...

    CSS3 SVG放大镜查看图片代码

    本教程将详细讲解如何使用CSS3和SVG技术来实现一个交互式的图片放大镜效果。这个效果是通过网格布局、SVG剪切路径以及鼠标悬停动画来实现的,旨在提升用户对图片细节的观察。 首先,我们需要创建一个基本的HTML结构...

    encodeSVG:一个很棒的工具,用于将SVG图片编码为CSS背景图像代码

    此工具是学生时代写前端时候,将SVG图片encode为css background-image的小工具,后面域名已经莫得了,现在估计也没人在用这个工具了,留待以后整理 @todo 迁移到gitee 线上工具地址【传送门】: 用的方便还请给个star...

    html5与css3基础教程(第八版)源码

    这份"HTML5与CSS3基础教程(第八版)源码"提供了丰富的实例和代码,帮助初学者深入理解这两种技术。 HTML5是超文本标记语言的最新版本,其核心在于增强网页的语义性和可访问性。以下是一些HTML5的关键知识点: 1. ...

    60023Web前端开发案例教程(HTML5+CSS3)(微课版)(第2版)_PPT课件.zip

    《60023Web前端开发案例教程》是针对HTML5和CSS3技术的一套实践性强、内容丰富的教学资源,特别适用于初学者和希望提升Web前端技能的学习者。本教程以PPT课件的形式呈现,旨在通过实例讲解,帮助读者掌握网页设计与...

    html5与css3基础教程第7版配书源码

    在《HTML5与CSS3基础教程(第7版)》这本权威指南中,作者深入浅出地介绍了这两个技术的核心概念和实际应用。源代码包含在提供的压缩包中,这些文件反映了书中各个章节的实例,方便读者实践和学习。 HTML5是超文本...

    HTML5+SVG打造蝴蝶漫天飞舞动画3D效果

    HTML5和SVG(可缩放矢量图形)是现代网页开发中的重要技术,它们结合使用可以创造出丰富多彩的交互式和动态视觉效果。本教程将深入探讨如何利用这两者来构建一个蝴蝶漫天飞舞的3D动画场景。 首先,HTML5是超文本...

    HTML5+CSS3最新完整版教程

    在本教程中,我们将深入探讨HTML5的新特性以及CSS3的高级样式规则,帮助你掌握创建现代网页所需的核心技能。 HTML5是超文本标记语言(HyperText Markup Language)的第五个版本,它的主要改进包括: 1. 结构性元素...

    初学css制作的按钮变色

    本教程将针对初学者,详细讲解如何使用CSS来实现按钮在鼠标悬停时的颜色变化效果。 首先,我们要理解CSS选择器的基本概念。选择器是CSS用来定位HTML元素的工具,比如`&lt;button&gt;`标签就是一个常见的HTML元素。在我们...

    基于TypeScript的NiceFish设计源码及HTML/CSS/JavaScript实现教程

    包含254个文件,涵盖92个TypeScript源文件、35个SCSS样式文件、34个PNG图片资源、30个HTML页面文件、15个JSON数据文件、14个CSS样式文件、6个GIF动画文件、5个SVG矢量图形文件、3个JavaScript脚本文件、3个EOT字体...

    html5 svg鼠标拖动气泡滑块动画特效

    本教程将详细讲解如何利用HTML5和SVG创建一个鼠标拖动气泡滑块动画特效。 首先,HTML5是超文本标记语言的第五版,它引入了许多新的元素和API,使得网页内容的结构化和交互性大大增强。在本项目中,`&lt;svg&gt;`元素是...

    css3实现点击svg图标动画特效.zip

    本教程通过结合CSS3和SVG,展示了如何实现一个点击SVG图标时的动画特效,属于JS特效中的“其它代码”类别。 首先,SVG图标的优势在于其矢量特性,使得图形在任何分辨率下都能保持清晰,不会因放大而失真。在HTML中...

    html5+css3练习.zip

    HTML5和CSS3是现代网页开发的两大核心技术,它们为创建功能丰富、视觉效果出色的网页提供了强大的工具。在这个“html5+css3练习.zip”压缩包中,包含了用于新手学习的实例,特别是针对那些对HTML5和CSS3还不太熟悉的...

    svg 实例 和 教程

    3. **样式和属性**:SVG图形可以通过内联样式或CSS进行样式化。包括填充色(fill)、描边色(stroke)、描边宽度(stroke-width)、描边样式(stroke-dasharray)等。此外,还有透明度(opacity)、变换(transform...

    H5 SVG边框特效

    3. **CSS结合SVG边框** 为了在H5中实现SVG边框特效,我们通常会将SVG代码内联插入到HTML文档的`&lt;style&gt;`标签中,或者将其放在独立的SVG文件中并通过`&lt;use&gt;`标签引用。然后,我们可以通过CSS控制SVG元素的样式,例如...

    html5-css3教程

    HTML5和CSS3是现代网页开发的两大核心技术,它们极大地丰富了网页的展现形式和功能。HTML5作为超文本标记语言的最新版本,主要提升了在结构化内容、多媒体支持和离线存储等方面的能力,而CSS3则在布局、动画和样式...

    svg入门pdf文档

    - **CSS背景**:SVG也可以用作CSS的背景图片。 #### 二、基本图形和属性 - **基本图形**: - `&lt;rect&gt;`:矩形 - `&lt;circle&gt;`:圆形 - `&lt;ellipse&gt;`:椭圆 - `&lt;line&gt;`:直线 - `&lt;polyline&gt;`:折线 - `&lt;polygon&gt;`...

    CSS3教程和css3新特性专题

    【CSS3教程和css3新特性专题】 CSS3是 Cascading Style Sheets(层叠样式表)的第三版,是Web设计领域的一个重要里程碑,引入了许多新的功能和特性,极大地增强了网页设计的灵活性和表现力。这个专题将深入探讨CSS3...

Global site tag (gtag.js) - Google Analytics