首页 > 资讯 > 关键词  > HTML5最新资讯  > 正文

HTML5/CSS3系列教程:使用SVG图片

2013-03-29 11:42 · 稿源: gbin1.com

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

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

为什么使用SVG?

  • 文件非常小
  • 能够无损失的缩放尺寸
  • 在Retina显示屏上效果超棒
  • 能够控制图片样式设计,例如互动和过滤filter

浏览器支持

  • IE8及其更低版本不支持
  • Android 2.3及其更低版本不支持
  • 其它浏览器都支持

如果你需要支持这些版本的浏览器的话,你可以使用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”>

你可以像控制JPG或者PNG格式文件一样,控制图片的大小,如下:

在线调试:https://www.gbtags.com/gb/debug/77d50934-592b-4b8a-b591-e7068c7e38ef.htm

SVG文件作为背景图片使用

我们也可以使用SVG图片作为背景图片使用,如下:

<a href=“https://www.gbtags.com” class=“logo”>

gbtags.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来定义背景色。

甚至可以使用filter来控制模糊度,如下:

.logo:hover{

fill: #F08000;

filter: url(#logoFilter);

}

当你使用鼠标hover图片时,会有如下效果。

在线调试:https://www.gbtags.com/gb/debug/acfcf33e-db11-4b71-bdcb-d38e99fdcef3.htm

SVG相关工具

在线转SVG工具:https://image.online-convert.com/convert-to-svg

微软的SVG filter效果展示工具:https://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_svg-filter-effects.htm

SVG减肥工具:https://www.mobilefish.com/services/base64/base64.php

总结

SVG是一个非常强大的图片格式,可以帮助你高效的处理图片,拥有比JPG或者PNG更灵活强大的图形展示方式,相信如果加以时日,必定成为最流行的图片处理方式!

via 极客标签

  • 相关推荐
  • 大家在看
  • 微软为Exchange Online服务器部署HTTP/3:延迟有望降低67%

    从一个多月前正式发布的 Windows Server 2022 开始,Exchange Online 团队就一直与 Microsoft 365 团队展开密切合作,以期在 Outlook.office.com 的服务器端提供对 HTTP/3 的支持。由微软分享的最新消息可知,其部署进度已达 20% 。这家软件巨头提供了所谓“最后一英里请求延迟指标”的一些详情。作为一个重要的性能指标,这意味着从总请求时间中(客户端与前门服务器之间),减去的后端处理所需时间。对于 Web 端的 Outlook 来说?

  • EFF将停止HTTPS Everywhere扩展服务 称其使命已经完成

    随着HTTPS采用率的提高和网络浏览器提供原生控制,电子前沿基金会(EFF)已决定在2022年将其流行的浏览器扩展HTTPS Everywhere转为维护模式。该公司表示,早在10年前就推出的扩展的目的就是为了像今天这样使其成为多余的。HTTPS Everywhere是一个可用于Firefox、Chrome、Microsoft Edge、Opera和Vivaldi等网络浏览器的扩展,安装该扩展后,会尽可能通过HTTPS加载HTTP网站。当该扩展最初可用时,大多数网站都不支持HTTPS。自从Mozil

  • HTC将推出新的VR耳机,主要用于多媒体消费

    HTC正在暗示将发布一款新的虚拟现实设备,该设备将在太平洋时间10月14日上午8点的一次虚拟活动中推出。据传闻,该设备将被称为Vive Flow。

  • 福特质量再升级,F-150 Lightning带来独特出行体验

    “皮卡之王”,美国44年来最畅销皮卡福特F系列以首款纯电智能皮卡F-150 Lightning逐浪电气化、智能网联化大潮。从近乎瞬时的峰值扭矩输出到智能化拖曳设定,从实时互联到整车OTA空中升级,加上能为家庭供电、带电源的智能前备箱和所有在售全尺寸皮卡中最大的数字屏幕——福特汽车F-150 Lightning不仅带来乐趣十足的驾乘体验,更是让百年福特质量的最佳呈现者。纯电动皮卡F-150 Lightning彰显福特质量福特汽车公司执行董事长比尔·?

  • OpenSilver将接替退休的微软Silverlight的工作

    让我们停顿片刻,回忆一下微软的Silverlight。这个网络应用程序框架以及Flash和Java的替代品于今天达到了其支持寿命的终点。虽然Silverlight从来没有像其他公司那样有着辉煌的市场渗透率,但它有长达15年的寿命,在2010年,这个插件实际上曾经在53%的浏览器上出现过。我们为什么要告诉你这些?因为全世界的开发者已经建立了无数的Silverlight应用程序,现在可能正在寻找一个替代方案。OpenSilver的出现,为重写Silverlight应用程序

  • ViewSonic32吋ELITE XG320U游戏显示器:https://m.cnbeta.com/cdn-cgi/l/email-protection" class

    ViewSonic 近日推出了全新的 32 英寸 ELITE XG320U 4K 游戏显示器,让玩家沉浸在最新的游戏显示技术中。该显示器提供 4K 超高清分辨率,144Hz 刷新率,可超频至 150Hz,1ms 响应时间(MPRT),以及 HDMI 2.1 连接,使玩家能够与当前和下一代 PC 和游戏机保持兼容。ViewSonic 公司业务线总监 Jeff Muto 表示ViewSonic ELITE XG320U 是公司表明了继续推动高端游戏的决心。这款显示器采用了最新的技术,所以玩家可以通过完全沉浸在令?

  • HTC或于10月14日发布可单独使用的Vive Flow VR头显

    Protocol 的一份报告称,HTC 计划在 10 月 14 日(本周四)的活动中发布 Vive Flow 。作为一款可单独使用的 VR 头显,其旨在帮助消费者轻松访问某些休闲游戏。然而 TheVerge 指出,Vive Flow 并未标配控制器,且功能性上逊于 Oculus Quest 2 。早些时候,HTC 已经放出了“Go with the Flow”的发布会预告。感兴趣的朋友可在太平洋夏令时 10 月 14 号上午 8 点,通过 Engage 平台进行收看。HTC 将新的虚拟空间称作 Viveport Verse,

  • 华体会(HTH)成为莱斯特城官方合作伙伴

    国际在线企业频道消息:近日,华体会(HTH)降临英超皇权球场,携手英超莱斯特城(Lcicester City)共同打造亚洲顶级数字体育平台。本次数字化体育平台华体会与英超劲旅莱斯特城的国际化合作,也预示着亚洲体育踏入新征程。自此,华体会(HTH)正式成为莱斯特城足球俱乐部官方合作伙伴,华体会(HTH)首席营销官Tony Han与莱斯特城代表团出席发布会,一同见证这一时刻。 莱斯特城作为当今欧洲足坛为数不多的“草根”逆袭顶级俱乐

  • 2021款MacBook Pro迎来Siri、勿扰和Spotlight等实体功能键

    尽管 Touch Bar 触控栏允许用户灵活自定义所需的快捷方式,但还是有不少人对实体功能键念念不忘。于是在 2021 款 MacBook Pro 上,苹果又为基于 M1 Pro / M1 Max 定制芯片组的新设备,引入了采用等宽设计的 ESC 和 F1-F12 功能键。与此同时,眼尖的人们还留意到了新添加的 Siri、勿扰、听写、以及 Spotlight 键。与以往一样,Fn 组合功能键保留了亮度、媒体播放、以及音量调节等常用快捷方式。对于注重生产力的用户来说,实体按键?

  • NHTSA拒绝对特斯拉的电池管理软件进行正式调查的请求

    美国国家公路交通安全管理局(NHTSA)拒绝了2019年的一份请愿书,该请愿书要求该机构对特斯拉的电池管理软件进行正式调查,因为有人指控该公司的空中软件更新存在缺陷,导致五辆车发生火灾。根据该机构网站上发布的一份文件,该机构决定不进行正式调查,部分原因是这些事件大多发生在美国境外。这些事件中没有一个与车祸有关,而且大多数都是停放的。作为评估的一部分,NHTSA在决定拒绝之前,审查了请愿书中包括的2012年至2019年总

这篇文章对你有价值吗?

  • 热门标签

热文

  • 3 天
  • 7天