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. Android控件：RadioButton(单选button)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  2. 1.2 Use Cases中 Metrics官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Metrics 指标 Kafka is often used for operati ...

  3. Android内存泄露分析之StrictMode

    转载请注明地址:http://blog.csdn.NET/yincheng886337/article/details/50524709 StrictMode(严格模式)使用 StrictMode严格 ...

  4. windows.location属性（常用知识点）

    location对象 含有当前URL的信息. 属性 href 整个URL字符串.protocol 含有URL第一部分的字符串,如http:host 包含有URL中主机名:端口号部分的字符串.如//ww ...

  5. JS/CSS 全屏幕导航 – 从上到下动画

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  6. EXT gridPanel 添加图片

    var workAreaGrid = new Ext.grid.GridPanel({ region: 'west', title: '工作面预警结果', store: wkSto, width: , ...

  7. 关于python的深浅拷贝、赋值

    https://blog.csdn.net/weixin_39750084/article/details/81435454

  8. UvaLive 6663 Count the Regions 离散化+DFS

    链接:http://vjudge.net/problem/viewProblem.action?id=49408 题意:在平面内给出若干个矩形,求出它们能将整个平面分成多少份. 思路:刚開始一眼看到认 ...

  9. LA-3708 - Graveyard 简单的模拟一下即可

    一开始不知道在想啥,竟然写了个双重for循环的.T T一直WA,又没效率. T T然后在纸上模拟演算,改了,就AC了 以后做题果断要先模拟一下例子...能加深对题目的理解. 当教训吧..太懒导致写了好 ...

  10. testng并发测试与测试并发

    一.testng并发测试 通过xml文件中suit结点的parallel属性指定,如 <suite name="bundle-module-testabc" parallel ...