在我们开始使用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更灵活强大的图形展示方式,相信如果加以时日,必定成为最流行的图片处理方式!
相关推荐
This is SVG, a language for describing two-dimensional graphics in XML. The Scalable Vector Graphics (SVG) Copyright 2001, 2002, 2011 World Wide Web Consortium (Massachusetts Institute of ...
之前我们分享过一些基于CSS3和SVG的自行车动画,比如这款SVG/CSS3自行车 模拟自行车行驶动画和纯CSS3 3D自行车动画都非常炫酷。今天我们要给大家介绍另外一款基于SVG的3D镂空自行车骑行动画,与前面自行车动画不同的...
-svgo 使用PostCSS优化内联SVG。安装使用可以: npm install postcss-svgo --save例子输入 h1 { background : url ( 'data:image/svg+xml;utf-8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg ...
之前我们分享过一款非常出色的CSS3 Tab菜单HTML5 SVG Tab滑块菜单,结合SVG,Tab菜单实现非常灵活。今天我们要再来分享一款基于CSS3的华丽Tab菜单,这款Tab菜单的菜单项是一个[......] 阅读全文>>
使用场景:很多时候下载的图片都是SVG矢量文件,不适用于需要 ico图片 的场景。 举例说明:比如,iconfont网站上下载的图标资源。 功能描述:此程序使用Python编写 1. 可以将 单个SVG图片文件 转换为 【128/64/48/32...
之前我们分享过一些很酷的HTML5文字特效,像这款HTML5/CSS3 3D文字特效的折叠效果非常不错,这款HTML5/CSS3发光文字 可自定义文字色彩也很绚丽。今天我们来分享一款利用SVG实现的文字按路径显示应用,同时文字的填充...
svg转css,css转svg,svg与css互相转换并压缩
With this practical guide, you’ll learn how to use SVG not only for illustrations but also as graphical documents that you can integrate into complex HTML5 web pages, and style with custom CSS....
注:无后台 html5 svg+css3带左侧收缩菜单宇航员
css3使用svg绘制唐老鸭图片样式代码 css3使用svg绘制唐老鸭图片样式代码
Using SVG with CSS3 and HTML5 Vector Graphics for Web Design 英文azw3 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
通过将SVG图形编码,在css:background-image: url("data:image/svg+xml,encodeddSVG")或者border-image中使用SVG背景图片 此工具是学生时代写前端时候,将SVG图片encode为css background-image的小工具,后面域名...
一款好看的CSS3+HTML5 SVG彩色霓虹灯文字特效,霓虹灯文字走马灯动画效果。
CSS3 优质资源HTML5 部分本地存储定位File & FileReader Api网页绘图(canvas、svg)CanvasCanvas API(入门):Getting Started With The Canvas API丰富的Canvas资源:Canvas(MDN)SVGSVG(MDN)SVG特征、支持...
前面我们刚刚分享过一款很不错的HTML5/SVG折线图表,这次我们依然要来分享一款带超酷动画的HTML5/CSS3动态折线图表,图表数据会定时切换,图表数据在切换的时候有很酷的切换动画,感觉数据模拟非常真实。另外,更多...
CSS3 SVG网页沙漏加载动画特效
这是一款效果非常炫酷的HTML5 SVG和CSS3蹦床式图片切换特效插件。该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意。
html背景图片铺满网页,CSS3+HTML5 SVG斑点动画背景图片特效
SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程
Sharp is a Scalable Vector Graphics (SVG) implementation for Android. It facilitates loading vector graphics as SharpDrawables, and can effectively be used wherever a conventional image would be ...