摘要:在中使用很简单,但是也有一些需要知道的事情。兼容的方法在里面使用如果想要通过控制,但是又想避免内联的弊端,可以在里面使用。记得去掉换行它可以在上述的所有场景里面使用,除了内联。
原文地址: https://css-tricks.com/using-...原文作者: Chris Coyier
翻译作者: https://github.com/chenmf6
翻译出处:https://github.com/lightningm...
SVG是一种向量图的图片格式,即可伸缩向量图(Scalable Vector Graphics),可以在Adobe Illustrator里面生成。在Web中使用SVG很简单,但是也有一些需要知道的事情。
为什么用SVG压缩后文件体积小
可以无损伸缩到任意尺寸(除非尺寸特别小)
在retina屏幕上可以完美显示
设计可控,比如交互和滤镜
怎么生成SVG可以在Adobe Illustrator里设计并且得到SVG。下面是一个站在椭圆上的奇异鸟:
留意到画板刚好贴着设计主体的边缘,画布的大小在SVG里面的重要性和在PNG和JPG里面是一样的。
然后可以直接在Adobe Illustrator里面保存成SVG文件。
保存的时候,可以在duihua对话框里面选择SVG选项。完整的参考可以看SVG 介绍。这里选SVG 1.1就可以了。
当点击"OK"或者"SVG Code..."的时候,就会打开文本编辑器,显示SVG的编码。
然后就可以用特殊的SVG CSS来控制这些元素了。SVG元素由着特殊的CSS属性,比如它没有background-color,而是用fill,但是也可以使用一些其他的普通属性,比如:hover
CSS .kiwi { fill: #94d31b; } .kiwi:hover { fill: #ace63c; }
更厉害的是,SVG可以使用滤镜(filter),比如模糊滤镜。比如在SVG代码里面可以加上一个滤镜:
SVG
然后可以在CSS里面使用这个滤镜
CSS .ground:hover { filter: url(#pictureFilter); }
下面是一个完整的例子:
前往codepen查看
更多阅读:
SVG滤镜的更多应用
SVG CSS属性大全(针对Opera)
SVG滤镜效果演示(由Microsoft提供)
浏览器支持内联SVG的浏览器支持看这里,基本和前面的一样。兼容的方法:
HTML
CSS .fallback { display: none; /* Make sure it"s the same size as the SVG takes up */ } .no-svg .fallback { background-image: url(logo.png); }在里面使用SVG
如果想要通过CSS控制SVG,但是又想避免内联SVG的弊端,可以在里面使用SVG。
HTML
同样可以使用Modernizr来兼容:
CSS .no-svg .logo { width: 200px; height: 164px; background-image: url(kiwi.png); }
这种情况下,如果想要用CSS控制SVG,就不能用外部的样式或者文档里面的了,要用SVG文件内部的:
SVG在 SVG里使用外部样式
可以在SVG文件开头的标签前面引入:
HTML
如果把这个放在HTML里面,页面会崩溃没法渲染,如果把这个放在或者background-image的SVG里面,页面不会崩溃,但是也不起作用。
在Data URL里面使用SVG还可以把SVG转换成Data URL,转换之后可能不止原来的文件大小,但是它很方便,因为不需要额外产生网络请求。
Mobilefish.com上面有一个base64在线转换器,可以转成base64编码,但是这种方式不太推荐。记得去掉换行:
它可以在上述的所有场景里面使用,除了内联SVG。
个人比较推荐这个在线转换器,因为转换之后可读性比较强。
用在里面
HTML
CSS里面
CSS .logo { background: url("data:image/svg+xml;base64,[data]"); }
里面
HTML
如果,SVG在base64编码之前有嵌套的,那么它依然可以在里面起作用。
Data URI格式上面的例子都是base64编码的,但是也不一定要转换成base64编码,实际上对于SVG最好不要转成base64编码。因为SVG的原始格式文本重复性比较高,gzip压缩效果更好。
HTML data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL... data:image/svg+xml;charset=UTF-8, data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://..." data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//...自动化工具
grunticon
从CSS的角度来看比较易用,为每个icon生成一个class,不用CSS sprites。grunticon输入一个SVG/PNG文件的目录,然后输出对应的3种格式的CSS:SVG data url,png data url和一个引用普通的png图片的兼容性CSS文件。
iconizr
一个PHP命令行工具,把SVG图片转换成CSS icon,支持图片优化和SASS输出。相关参考
David Bushell: 一个前端SVG Hacking的更好方法
David Bushell: 使用不依赖于分辨率的SVG
MDN on SVG
SVG相关的浏览器支持
Peter Gasston: 使用Fragment Identifiers更好地实现SVG Sprites
simuari: SVG栈
SVG.js - "轻量的第三方库,可以操作SVG,还可以实现动画"
Emmet:一种直接从文本编辑器里面生成SVG data URI的方式
Compass Inline Data Helpers.
Adobe: 给SVG添加样式
Andrew J. Baker: 驯服SVG
除了Illustrator的其他编辑工具: Inkscape, Sketch
Krister Kari: 在移动端浏览器中使用SVG图片
Kyle Foster: 更优的SVG工作流
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114836.html
摘要:在中使用很简单,但是也有一些需要知道的事情。兼容的方法在里面使用如果想要通过控制,但是又想避免内联的弊端,可以在里面使用。记得去掉换行它可以在上述的所有场景里面使用,除了内联。 原文地址: https://css-tricks.com/using-...原文作者: Chris Coyier 翻译作者: https://github.com/chenmf6 翻译出处:https://gi...
摘要:它是基于,由联盟进行开发的。是一种采用来描述二维图形的语言这个大家都知道,那么元素是什么呢单纯翻译的话,是符号的意思,然我的理解是元素用来定义一个图形模板对象,它可以用一个元素实例化。 showImg(https://segmentfault.com/img/bVbhAl9?w=1278&h=722); 大家好,这里是@IT·平头哥联盟,我是首席填坑官——苏南(South·Su),...
阅读 3318·2023-04-26 00:07
阅读 3896·2021-11-23 10:08
阅读 2930·2021-11-22 09:34
阅读 848·2021-09-22 15:27
阅读 1733·2019-08-30 15:54
阅读 3719·2019-08-30 14:07
阅读 901·2019-08-30 11:12
阅读 659·2019-08-29 18:44