Learn how to set an elements background image to embedded SVG. This method has an added benefit of not incurring any HTTP requests, as the SVG is simply embedded into the CSS. They can also be resized by changing the width and height of the element containing background image, so it’s easy to create multiple sizes of the same icon using this approach.

If you’re looking for the ability to display icons at different sizes and want to modify the SVG interaction styles (such as on :hover), this is could be a good option. One negative to adding the interaction styles is that it requires you to duplicate selectors and the SVG markup; the more icons you have, the larger your stylesheets will become.

Two Rules:

1. The embedded svg image, should use single quote.

2. Should encoder, can use http://meyerweb.com/eric/tools/dencoder/

[SVG] Add an SVG as an Embedded Background Image的更多相关文章

  1. [SVG] Add an SVG as a Background Image

    Learn how to set an SVG as the background image of an element. Background images can be resized by c ...

  2. 【翻译svg教程 】svg 的坐标系统

    http://tutorials.jenkov.com/svg/svg-coordinate-system.html svg的坐标系统(和大多数计算机绘图的坐标系统)和数学中绘图系统有点不一样 数学/ ...

  3. SVG Drawing Animation - SVG 绘制动画

    一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...

  4. SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  5. SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  6. SVG 学习<六> SVG的transform

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. SVG 学习<五> SVG动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  8. SVG vs Image, SVG vs Iconfont

    这可能是个别人写过很多次的话题,但貌似由于兼容性的原因?图标的显示还是用着 Iconfont 或者 CSS Sprite 的形式?希望通过自己新瓶装旧酒的方式能重新引导一下问题. SVG vs Ima ...

  9. [HTML5] Add an SVG Image to a Webpage and Get a Reference to the Internal Elements in JavaScript

    We want to show an SVG avatar of the patio11bot, so we'll do that in three ways: Using an img tag - ...

随机推荐

  1. Spring MVC框架实例

    Spring  MVC 背景介绍 Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块.使用 Spring 可插入的 MVC 架构,能够选择是使用内置的 Spring Web 框架还是 ...

  2. ubuntu-系统卡慢解决（转载）

    ubuntu系统狠慢 或者很卡的原因 1.  涉及内存小或者虚拟SWAP分区调整问题    可以通过 系统监视器 进行查看      在UBUNTU系统里面,并不是你的物理内存全部耗尽之后,系统才使用 ...

  3. C Tricks（十八）—— 整数绝对值的实现

    为正还是为负:(对 int 类型而言,第一位为符号位,其余为数值,则右移 31 位,再与 1 求与) 如果为正 ⇒ 返回原值 如果为负 ⇒ 对其二进制形式各位取反 + 1 int abs(int x) ...

  4. 硬件——nrf51822第一篇，GPIO的使用

    未完,待续...... 本实现是基于一个开发箱,包括:综合应用开发系统主板XT-EDU-AK   1套: 手持终端系统 XT-EDU-HK 1套: GPIO操作 工程: 这是一个关于流水灯的程序: 我 ...

  5. Java ThreadLocal Example（java中的ThreadLocal例子）

    Java ThreadLocal is used to create thread local variables. We know that all threads of an Object sha ...

  6. xcode 各种项目设置

    1:语言环境设置:项目–>PROJECT–>info–>Locailzation 2 : 手动加入项目依赖 Build Settings–>Search path–>Li ...

  7. 前端项目课程7 banner设计注意事项

    前端项目课程7 banner设计注意事项 一.总结 一句话总结: 1.每个部分的里面的部分可以用相同的名字么,如何修改样式呢? 可以, 用模块名 + 比如上中下(top middle bottom) ...

  8. 【BZOJ 4310】跳蚤

    [链接]h在这里写链接 [题意]     给你一个字符串;     让你把它分割成最多k个部分.         然后求出每个部分的字符串里面子串的字典序最大的那一个子串.         然后在这k ...

  9. HDU 2577 How to Type DP也可以模拟

    http://acm.hdu.edu.cn/showproblem.php?pid=2577 大意: 大家都打过字吧,现在有个有趣的问题:给你一串字符串,有大写有小写,要求你按键次数最少来输出它,输出 ...

  10. Solving the Problem of Overfitting

    The Problem of Overfitting Cost Function Regularized Linear Regression Note: [8:43 - It is said that ...